Desenvolvimento de Extensões de Navegador: Navegando pelo Manifest V3 e APIs JavaScript

As extensões de navegador oferecem uma forma poderosa de melhorar e personalizar a experiência de navegação. Elas permitem que os desenvolvedores adicionem funcionalidades aos navegadores da web, interajam com páginas da web e se integrem a serviços da web. Este guia fornece uma visão abrangente do desenvolvimento de extensões de navegador, com foco no Manifest V3 e nas principais APIs JavaScript que alimentam essas extensões.

Entendendo as Extensões de Navegador

Uma extensão de navegador é um pequeno programa de software que expande a funcionalidade de um navegador da web. As extensões podem modificar páginas da web, adicionar novos recursos e integrar-se a serviços externos. Elas são tipicamente escritas em JavaScript, HTML e CSS, e empacotadas como um arquivo ZIP com um arquivo de manifesto que descreve os metadados e as permissões da extensão.

Casos de uso populares para extensões de navegador incluem:

• Bloqueadores de anúncios: Removem anúncios de páginas da web.
• Gerenciadores de senhas: Armazenam e gerenciam senhas de forma segura.
• Ferramentas de produtividade: Melhoram o fluxo de trabalho com recursos como gerenciamento de tarefas e anotações.
• Personalização de conteúdo: Modificam a aparência e o comportamento das páginas da web.
• Ferramentas de acessibilidade: Melhoram a acessibilidade da web para usuários com deficiência.

Manifest V3: O Novo Padrão

O Manifest V3 é a versão mais recente do arquivo de manifesto da extensão do navegador, um arquivo JSON que descreve os metadados, permissões e recursos da extensão. Ele introduz mudanças significativas no processo de desenvolvimento de extensões, focando principalmente na melhoria da segurança, privacidade e desempenho. As principais mudanças no Manifest V3 incluem:

• Service Workers: Substituindo as páginas de fundo por service workers para melhorar o desempenho e reduzir o consumo de memória. Service workers são scripts orientados a eventos que rodam em segundo plano e lidam com eventos como requisições de rede e alarmes.
• API Declarative Net Request: Substituindo a API de bloqueio webRequest pela API Declarative Net Request para filtrar requisições de rede. Isso aumenta a privacidade e a segurança, limitando o acesso da extensão ao tráfego de rede.
• Content Security Policy (CSP): Aplicação de políticas CSP mais rigorosas para prevenir a execução de código arbitrário e mitigar riscos de segurança.
• Versão do Manifesto: A chave manifest_version no arquivo manifest.json deve ser definida como 3.

Migrando do Manifest V2 para o Manifest V3

A migração do Manifest V2 para o Manifest V3 requer um planejamento cuidadoso e modificações no código. Aqui está um guia passo a passo:

1. Atualize o arquivo de manifesto: Defina manifest_version como 3 e atualize os campos permissions e background para cumprir os requisitos do Manifest V3.
2. Substitua as páginas de fundo por service workers: Reescreva os scripts de fundo como service workers, lidando com eventos usando as APIs chrome.scripting e chrome.alarms.
3. Migre para a API Declarative Net Request: Substitua as chamadas de bloqueio da API webRequest por regras declarativas definidas na API declarativeNetRequest.
4. Atualize a política de segurança de conteúdo: Ajuste o campo content_security_policy no arquivo de manifesto para cumprir os requisitos mais rigorosos do CSP.
5. Teste exaustivamente: Teste a extensão extensivamente em diferentes navegadores para garantir a compatibilidade e a funcionalidade adequada.

Exemplo: Migrando um Script de Fundo para um Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

APIs JavaScript Essenciais para Extensões de Navegador

As extensões de navegador dependem de um conjunto de APIs JavaScript para interagir com o navegador e as páginas da web. Aqui estão algumas das APIs mais importantes:

1. chrome.runtime

A API chrome.runtime fornece acesso ao ambiente de tempo de execução da extensão. Ela permite que as extensões se comuniquem com o script de fundo, acessem o arquivo de manifesto e gerenciem o ciclo de vida da extensão.

Métodos principais:

• chrome.runtime.sendMessage(): Envia uma mensagem para o script de fundo ou outras extensões.
• chrome.runtime.onMessage.addListener(): Ouve mensagens de outros scripts.
• chrome.runtime.getManifest(): Retorna o arquivo de manifesto da extensão como um objeto JavaScript.
• chrome.runtime.reload(): Recarrega a extensão.

Exemplo: Enviando uma Mensagem do Script de Conteúdo para o Script de Fundo

Script de Conteúdo (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Script de Fundo (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

A API chrome.storage fornece um mecanismo para armazenar e recuperar dados dentro da extensão. Ela oferece opções de armazenamento local e sincronizado.

Métodos principais:

• chrome.storage.local.set(): Armazena dados localmente.
• chrome.storage.local.get(): Recupera dados do armazenamento local.
• chrome.storage.sync.set(): Armazena dados que são sincronizados entre os dispositivos do usuário.
• chrome.storage.sync.get(): Recupera dados do armazenamento sincronizado.

Exemplo: Armazenando e Recuperando Dados no Armazenamento Local

            // Armazenar dados
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Recuperar dados
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

A API chrome.tabs permite que as extensões interajam com as abas do navegador. Ela fornece métodos para criar, consultar, modificar e fechar abas.

Métodos principais:

• chrome.tabs.create(): Cria uma nova aba.
• chrome.tabs.query(): Consulta abas que correspondem a critérios específicos.
• chrome.tabs.update(): Atualiza as propriedades de uma aba.
• chrome.tabs.remove(): Fecha uma aba.
• chrome.tabs.executeScript(): Executa código JavaScript em uma aba.

Exemplo: Criando uma Nova Aba

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

A API chrome.alarms permite que as extensões agendem tarefas para serem executadas em um horário específico ou após um intervalo especificado. Isso é particularmente importante no Manifest V3, pois substitui o uso de temporizadores em páginas de fundo, que não são mais suportados.

Métodos principais:

• chrome.alarms.create(): Cria um novo alarme.
• chrome.alarms.get(): Recupera um alarme existente.
• chrome.alarms.clear(): Limpa um alarme.
• chrome.alarms.getAll(): Recupera todos os alarmes.
• chrome.alarms.onAlarm.addListener(): Ouve eventos de alarme.

Exemplo: Criando um Alarme

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

A API chrome.scripting permite que as extensões injetem JavaScript e CSS em páginas da web. Esta API é um componente chave do Manifest V3 e é usada por service workers para interagir com páginas da web depois que elas são carregadas.

Métodos principais:

• chrome.scripting.executeScript(): Executa código JavaScript em uma aba ou frame.
• chrome.scripting.insertCSS(): Insere CSS em uma aba ou frame.

Exemplo: Injetando JavaScript em uma Aba

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

A API chrome.notifications permite que as extensões exibam notificações ao usuário. Isso é útil para fornecer atualizações, alertas e outras informações importantes.

Métodos principais:

• chrome.notifications.create(): Cria uma nova notificação.
• chrome.notifications.update(): Atualiza uma notificação existente.
• chrome.notifications.clear(): Limpa uma notificação.
• chrome.notifications.getAll(): Recupera todas as notificações.

Exemplo: Criando uma Notificação

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

A API chrome.contextMenus permite que as extensões adicionem itens ao menu de contexto do navegador (menu do botão direito). Isso fornece uma maneira conveniente para os usuários acessarem a funcionalidade da extensão diretamente das páginas da web.

Métodos principais:

• chrome.contextMenus.create(): Cria um novo item de menu de contexto.
• chrome.contextMenus.update(): Atualiza um item de menu de contexto existente.
• chrome.contextMenus.remove(): Remove um item de menu de contexto.
• chrome.contextMenus.removeAll(): Remove todos os itens de menu de contexto criados pela extensão.

Exemplo: Criando um Item de Menu de Contexto

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

A API chrome.i18n é usada para internacionalizar sua extensão, tornando-a acessível a usuários em diferentes idiomas e regiões. Ela permite que você forneça versões localizadas da interface do usuário e das mensagens da sua extensão.

Métodos Principais:

• chrome.i18n.getMessage(): Recupera uma string localizada do diretório _locales da extensão.

Exemplo: Usando chrome.i18n para Localização

Primeiro, crie um diretório _locales na pasta raiz da sua extensão. Dentro dele, crie pastas específicas para cada idioma, como en, es, pt_BR, etc.

Dentro de cada pasta de idioma, crie um arquivo messages.json. Por exemplo, em _locales/pt_BR/messages.json:

            {
  "extensionName": {
    "message": "Minha Extensão",
    "description": "O nome da extensão."
  },
  "greetingMessage": {
    "message": "Olá, mundo!",
    "description": "Uma simples mensagem de saudação."
  }
}

            

              
                Copy
              
            
          

Então, em seu código JavaScript:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Saída: Minha Extensão
console.log(greeting);      // Saída: Olá, mundo!

            

              
                Copy
              
            
          

Compatibilidade entre Navegadores

Embora o Chrome seja o navegador mais popular para o desenvolvimento de extensões, é importante considerar a compatibilidade entre navegadores. Firefox, Safari e outros navegadores também suportam extensões, mas suas APIs e formatos de manifesto podem diferir ligeiramente.

Para garantir a compatibilidade entre navegadores:

• Use a API WebExtensions: A API WebExtensions é uma API padronizada para o desenvolvimento de extensões de navegador suportada por vários navegadores.
• Teste em diferentes navegadores: Teste sua extensão em diferentes navegadores para identificar e corrigir problemas de compatibilidade.
• Use polyfills: Use polyfills para fornecer funcionalidades de API ausentes em diferentes navegadores.
• Código condicional: Use código condicional para se adaptar a diferenças específicas do navegador. Por exemplo: if (typeof browser === "undefined") { var browser = chrome; }

Melhores Práticas para o Desenvolvimento de Extensões de Navegador

Aqui estão algumas melhores práticas a seguir ao desenvolver extensões de navegador:

• Minimize as permissões: Solicite apenas as permissões que sua extensão absolutamente precisa. Isso aumenta a privacidade e a segurança do usuário.
• Use práticas de codificação segura: Siga práticas de codificação segura para prevenir vulnerabilidades como cross-site scripting (XSS) e injeção de código.
• Otimize o desempenho: Otimize o desempenho da sua extensão para minimizar seu impacto no desempenho do navegador.
• Forneça documentação clara e concisa: Forneça documentação clara e concisa para ajudar os usuários a entender como usar sua extensão.
• Lide com erros graciosamente: Implemente o tratamento de erros para evitar que sua extensão falhe ou cause comportamento inesperado.
• Mantenha sua extensão atualizada: Atualize regularmente sua extensão para corrigir bugs, vulnerabilidades de segurança e problemas de compatibilidade.
• Considere a internacionalização (i18n): Projete sua extensão para ser facilmente localizada para diferentes idiomas. Use a API chrome.i18n.
• Respeite a privacidade do usuário: Seja transparente sobre como sua extensão coleta e usa dados do usuário e obtenha o consentimento do usuário quando necessário. Cumpra os regulamentos de privacidade relevantes, como GDPR e CCPA.

Enviando sua Extensão para as Lojas

Depois que sua extensão for desenvolvida e testada, você vai querer enviá-la para as lojas de extensões dos navegadores para disponibilizá-la aos usuários. Cada navegador tem sua própria loja e processo de envio:

• Chrome Web Store: Envie sua extensão para a Chrome Web Store para usuários do Chrome. O processo envolve a criação de uma conta de desenvolvedor, o empacotamento da sua extensão e o envio para a loja.
• Firefox Add-ons: Envie sua extensão para o Firefox Add-ons para usuários do Firefox. O processo é semelhante ao da Chrome Web Store e envolve a criação de uma conta de desenvolvedor e o envio da sua extensão para revisão.
• Safari Extensions Gallery: Envie sua extensão para a Safari Extensions Gallery para usuários do Safari. O processo envolve a obtenção de um certificado de desenvolvedor da Apple e o envio da sua extensão para revisão.

Ao enviar sua extensão, certifique-se de fornecer informações precisas e completas, incluindo um título descritivo, uma descrição detalhada, capturas de tela e uma política de privacidade. As lojas de extensões revisam os envios para garantir que eles cumpram suas políticas e diretrizes.

Conclusão

O desenvolvimento de extensões de navegador com Manifest V3 e APIs JavaScript oferece uma maneira poderosa de personalizar e aprimorar a experiência de navegação. Ao entender os conceitos centrais, seguir as melhores práticas e considerar a compatibilidade entre navegadores, os desenvolvedores podem criar extensões valiosas e envolventes para usuários em todo o mundo. À medida que a web evolui, as extensões de navegador continuarão a desempenhar um papel vital na formação do futuro da internet.

Lembre-se de sempre priorizar a privacidade e a segurança do usuário ao desenvolver extensões. Ao construir com esses princípios em mente, você pode criar extensões que são úteis e confiáveis.

Este guia fornece uma base sólida para começar com o desenvolvimento de extensões de navegador. À medida que você se aprofunda, explore as várias APIs e recursos disponíveis e experimente diferentes técnicas para criar extensões inovadoras e impactantes.