Como fazer a transição para Manifest V3 para extensões do Chrome

Embora eu não seja um programador regular de extensões do Chrome, certamente codifiquei extensões suficientes e tenho um portfólio de desenvolvimento da Web amplo o suficiente para saber como lidar com a tarefa. No entanto, recentemente, um cliente rejeitou uma de minhas extensões porque recebi um feedback de que minha extensão estava “desatualizada”.

Enquanto lutava para descobrir o que estava errado, varri meu constrangimento para debaixo do tapete e imediatamente comecei meu mergulho profundo de volta ao mundo das extensões do Chrome. Infelizmente, as informações sobre o Manifest V3 eram escassas e foi difícil para mim entender rapidamente do que se tratava essa transição.

Escusado será dizer que, com um trabalho pendente, tive que navegar meticulosamente pelo caminho Documentação do desenvolvedor do Google Chrome e descobrir as coisas por mim mesmo. Enquanto fazia o trabalho, não queria que meu conhecimento e pesquisa nessa área fossem desperdiçados e decidi compartilhar o que gostaria de ter acesso fácil em minha jornada de aprendizado.

Por que a transição para o Manifesto 3 é importante

Manifest V3 é uma API que o Google usará em seu navegador Chrome. É o sucessor da API atual, Manifest V2, e rege como as extensões do Chrome interagem com o navegador. O Manifest V3 apresenta mudanças significativas nas regras para extensões, algumas das quais serão o novo esteio do V2 ao qual estávamos acostumados.

A transição para o Manifesto V3 pode ser assim resumido:

1. A transição está em andamento desde 2018.
2. O Manifest V3 começará oficialmente a ser lançado em janeiro de 2023.
3. Até junho de 2023, as extensões que executam o Manifest V2 não estarão mais disponíveis na Chrome Web Store.
4. As extensões que não estiverem de acordo com as novas regras introduzidas no Manifest V3 serão eventualmente removidas da Chrome Web Store.

Um dos principais objetivos do Manifest V3 é tornar os usuários mais seguros e melhorar a experiência geral do navegador. Anteriormente, muitas extensões de navegador dependiam de código na nuvem, o que significava que poderia ser difícil avaliar se uma extensão era arriscada. O Manifest V3 visa resolver isso exigindo que as extensões contenham todo o código que serão executados, permitindo que o Google as verifique e detecte possíveis riscos. Também força as extensões a solicitar permissão do Google para as alterações que podem implementar no navegador.

Manter-se atualizado com a transição do Google para o Manifest V3 é importante porque introduz novas regras para extensões que visam melhorar a segurança do usuário e a experiência geral do navegador, e as extensões que não cumprirem essas regras serão eventualmente removidas do Chrome Web Loja.

Resumindo, todo o seu trabalho duro na criação de extensões que usaram o Manifest V2 pode ser em vão se você não fizer essa transição nos próximos meses.

As principais diferenças entre o Manifest V2 e V3

Existem muitas diferenças entre os dois e, embora eu recomende fortemente que você leia Guia "Migrando para o Manifest V3" do Chrome, aqui está um breve e agradável resumo dos pontos-chave:

1. Trabalhadores de serviço substitua as páginas de plano de fundo no Manifest V3.
2. A modificação da solicitação de rede é tratada com o novo declarativeNetRequest API no Manifesto V3.
3. No Manifest V3, as extensões só podem executar JavaScript incluído em seu pacote e não podem usar código hospedado remotamente.
4. Manifesto V3 apresenta promise suporte para muitos métodos, embora callbacks ainda sejam suportados como uma alternativa.
5. As permissões de host no Manifest V3 são um elemento separado e devem ser especificadas no "host_permissions" campo.
6. A política de segurança de conteúdo no Manifest V3 é um objeto com membros que representam contextos alternativos de política de segurança de conteúdo (CSP), em vez de uma string como era no Manifest V2.

Em um simples Manifesto de Extensão do Chrome que altera o plano de fundo de uma página da Web, pode ser assim:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Se você achar que algumas das tags acima parecem estranhas para você, continue lendo para descobrir exatamente o que você precisa saber.

Como fazer uma transição suave para o Manifest V3

Resumi a transição para o Manifest V3 em quatro áreas principais. É claro que, embora existam muitos sinos e assobios no novo Manifest V3 que precisam ser implementados a partir do antigo Manifest V2, a implementação de alterações nessas quatro áreas colocará sua extensão do Chrome no caminho certo para a eventual transição.

As quatro áreas principais são:

1. Atualizando a estrutura básica do seu manifesto.
2. Modifique suas permissões de host.
3. Atualize a política de segurança de conteúdo.
4. Modifique sua manipulação de solicitação de rede.

Com essas quatro áreas, os fundamentos do seu Manifest estarão prontos para a transição para o Manifest V3. Vejamos cada um desses aspectos principais em detalhes e vejamos como podemos trabalhar para proteger sua extensão do Chrome para o futuro a partir dessa transição.

Atualizando a estrutura básica do seu manifesto

Atualizar a estrutura básica do seu manifesto é o primeiro passo na transição para o Manifest V3. A alteração mais importante que você precisará fazer é alterar o valor do "manifest_version" elemento para 3, que determina que você está usando o conjunto de recursos Manifest V3.

Uma das principais diferenças entre o Manifest V2 e o V3 é a substituição das páginas de plano de fundo por um único trabalhador de serviço de extensão no Manifest V3. Você precisará registrar o service worker sob o "background" campo, usando o "service_worker" key e especifique um único arquivo JavaScript. Embora o Manifest V3 não suporte vários scripts em segundo plano, você pode, opcionalmente, declarar o service worker como um Módulo ES especificando "type": "module", que permite importar código adicional.

No Manifesto V3, o "browser_action" e "page_action" propriedades são unificadas em um único "action" propriedade. Você precisará substituir essas propriedades por "action" em seu manifesto. Da mesma forma, o "chrome.browserAction" e "chrome.pageAction" As APIs são unificadas em uma única API “Action” no Manifest V3 e você precisará migrar para esta API.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

No geral, atualizar a estrutura básica do seu manifesto é uma etapa crucial no processo de transição para o Manifest V3, pois permite que você aproveite os novos recursos e alterações introduzidas nesta versão da API.

Modifique suas permissões de host

A segunda etapa na transição para o Manifest V3 é modificar suas permissões de host. No Manifest V2, você especifica as permissões de host no "permissions" campo no arquivo de manifesto. No Manifest V3, as permissões de host são um elemento separado e você deve especificá-las no "host_permissions" campo no arquivo de manifesto.

Aqui está um exemplo de como modificar suas permissões de host:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Atualize a política de segurança de conteúdo

Para atualizar o CSP de sua extensão Manifest V2 para ser compatível com Manifest V3, você precisará fazer algumas alterações em seu arquivo de manifesto. No Manifesto V2, o CSP foi especificado como uma string no "content_security_policy" campo do manifesto.

No Manifest V3, o CSP agora é um objeto com diferentes membros que representam contextos CSP alternativos. Em vez de um único "content_security_policy" campo, agora você terá que especificar campos separados para "content_security_policy.extension_pages" e "content_security_policy.sandbox", dependendo do tipo de páginas de extensão que você está usando.

Você também deve remover quaisquer referências a domínios externos no "script-src", "worker-src", "object-src" e "style-src" diretivas se estiverem presentes. É importante fazer essas atualizações em seu CSP para garantir a segurança e a estabilidade de sua extensão no Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Modifique o tratamento de solicitações de rede

A etapa final na transição para o Manifest V3 é modificar o tratamento de solicitações de rede. No Manifesto V2, você teria usado o chrome.webRequest API para modificar solicitações de rede. No entanto, esta API é substituída no Manifest V3 pelo declarativeNetRequest API.

Para usar esta nova API, você precisará especificar o declarativeNetRequest permissão em seu manifesto e atualize seu código para usar a nova API. Uma diferença fundamental entre as duas APIs é que o declarativeNetRequest A API exige que você especifique uma lista de endereços predeterminados a serem bloqueados, em vez de poder bloquear categorias inteiras de solicitações HTTP como faria com o chrome.webRequest API.

É importante fazer essas alterações em seu código para garantir que sua extensão continue funcionando corretamente no Manifest V3. Aqui está um exemplo de como você modificaria seu manifesto para usar o declarativeNetRequest API no Manifesto V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

Você também precisará atualizar seu código de extensão para usar o declarativeNetRequest API em vez do chrome.webRequest API.

Outros aspectos que você precisa verificar

O que eu cobri é apenas a ponta do iceberg. Claro, se eu quisesse cobrir tudo, poderia ficar aqui por dias e não faria sentido ter os guias de desenvolvedores do Chrome do Google. Embora o que abordei o deixe preparado para o futuro o suficiente para armar suas extensões do Chrome nessa transição, aqui estão algumas outras coisas que você pode querer observar para garantir que suas extensões estejam funcionando da melhor maneira possível.

• Migrando scripts em segundo plano para o contexto de execução do service worker: Conforme mencionado anteriormente, o Manifest V3 substitui as páginas de plano de fundo por um único service worker de extensão, portanto, pode ser necessário atualizar os scripts de plano de fundo para se adaptar ao contexto de execução do service worker.
• Unificando o **chrome.browserAction** e **chrome.pageAction** APIs: Essas duas APIs equivalentes são unificadas em uma única API no Manifest V3, portanto pode ser necessário migrar para a Action API.
• Migrando funções que esperam um contexto de segundo plano do Manifest V2: A adoção de service workers no Manifest V3 não é compatível com métodos como chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs() e chrome.extension.getViews(). Pode ser necessário migrar para um design que transmita mensagens entre outros contextos e o service worker em segundo plano.
• Movendo solicitações CORS em scripts de conteúdo para o service worker em segundo plano: Pode ser necessário mover solicitações CORS em scripts de conteúdo para o trabalhador de serviço em segundo plano para cumprir o Manifest V3.
• Migrando para longe da execução de código externo ou strings arbitrárias: O manifesto V3 não permite mais a execução de lógica externa usando chrome.scripting.executeScript({code: '...'}), eval() e new Function(). Pode ser necessário mover todo o código externo (JavaScript, WebAssembly, CSS) para o pacote de extensão, atualizar scripts e referências de estilo para carregar recursos do pacote de extensão e usar chrome.runtime.getURL() para construir URLs de recursos em tempo de execução.
• Atualização de determinados métodos de script e CSS na API de guias: Conforme mencionado anteriormente, vários métodos são movidos da API de guias para a API de script no Manifest V3. Pode ser necessário atualizar quaisquer chamadas para esses métodos para usar a API Manifest V3 correta.

E muito mais!

Sinta-se à vontade para dedicar algum tempo para se atualizar sobre todas as mudanças. Afinal, essa mudança é inevitável e se você não deseja que suas extensões do Manifest V2 sejam perdidas por evitar essa transição, gaste algum tempo se munindo do conhecimento necessário.

Por outro lado, se você é novo na programação de extensões do Chrome e deseja começar, uma ótima maneira de fazer isso é mergulhar no mundo das ferramentas de desenvolvedor da Web do Chrome. Eu fiz isso através de um curso sobre Aprendizado Linkedin, o que me atualizou rapidamente. Assim que tiver esse conhecimento básico, volte a este artigo e traduza o que você sabe para o Manifest V3!

Então, como vou usar os recursos do novo Manifest V3 daqui para frente?

Bem, para mim, a transição para o Manifest V3 e a remoção do chrome.webRequest A API parece estar mudando as extensões de casos de uso centrados em dados (como bloqueadores de anúncios) para usos mais funcionais e baseados em aplicativos. Tenho me afastado do desenvolvimento de aplicativos ultimamente, pois pode ficar bastante uso intensivo de recursos às vezes. No entanto, essa mudança pode ser o que me traz de volta!

A ascensão das ferramentas de IA nos últimos tempos, muitas com APIs disponíveis para uso, gerou toneladas de aplicativos SaaS novos e atualizados. Pessoalmente, acho que está chegando em um momento perfeito com a mudança para mais extensões do Chrome baseadas em aplicativos! Embora muitas das extensões mais antigas possam ser eliminadas dessa transição, muitas novas construídas com base em novas ideias de SaaS virão para ocupar seu lugar.

Portanto, esta é uma atualização empolgante para atualizar e renovar extensões antigas ou criar novas! Pessoalmente, vejo muitas possibilidades no uso de APIs que envolvem o uso de IA em extensões para aprimorar a experiência de navegação do usuário. Mas isso é realmente apenas a ponta do iceberg. Se você realmente deseja se envolver com suas próprias extensões profissionais ou entrar em contato com empresas para criar/atualizar extensões para elas, eu recomendaria atualizando sua conta do Gmail pelos benefícios que oferece na colaboração, desenvolvimento e publicação de extensões para a Chrome Web Store.

No entanto, lembre-se de que os requisitos de cada desenvolvedor são diferentes, portanto, saiba o que você precisa para manter suas extensões atuais funcionando ou as novas!

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/