Criando uma extensão de navegador para todos os navegadores: Edge, Chrome, Firefox, Opera, Brave e Vivaldi

Vou explicar como você pode instalar esta extensão que suporta o modelo de extensão da web (ou seja, Edge, Chrome, Firefox, Opera, Brave e Vivaldi), e fornecer algumas dicas simples sobre como obter uma base de código exclusiva para todos eles, mas também como depurar em cada navegador.

Observação: não abordaremos o Safari neste artigo porque ele não suporta o mesmo modelo de extensão que outros.

Fundamentos

Não abordarei o básico do desenvolvimento de extensões porque muitos bons recursos já estão disponíveis em cada fornecedor:

• Google
• Microsoft (veja também o ótimo vídeo de visão geral “Building Extensions for Microsoft Edge”)
• Mozilla (também, veja o wiki)
• Ópera
• Corajoso

Portanto, se você nunca criou uma extensão antes ou não sabe como ela funciona, dê uma olhada rápida nesses recursos. Não se preocupe: construir um é simples e direto.

Nossa Extensão

Vamos construir uma prova de conceito — uma extensão que usa inteligência artificial (IA) e visão computacional para ajudar cegos a analisar imagens em uma página da web.

Veremos que, com algumas linhas de código, podemos criar alguns recursos poderosos no navegador. No meu caso, estou preocupado com a acessibilidade na web e já passei algum tempo pensando em como tornar um jogo de breakout acessível usando áudio da web e SVG, por exemplo.

Ainda assim, tenho procurado algo que ajude as pessoas cegas de uma forma mais geral. Recentemente me inspirei ao ouvir uma ótima palestra de Chris Heilmann em Lisboa: “Pixels and Hidden Meaning in Pixels”.

De fato, usando os algoritmos de IA atuais na nuvem, bem como as tecnologias de conversão de texto em fala, expostas no navegador com a API Web Speech ou usando um serviço de nuvem remoto, podemos criar facilmente uma extensão que analisa imagens de páginas da Web com dados ausentes ou propriedades de texto alt preenchidas incorretamente.

Minha pequena prova de conceito simplesmente extrai imagens de uma página da web (aquela na guia ativa) e exibe as miniaturas em uma lista. Quando você clica em uma das imagens, a extensão consulta a API do Computer Vision para obter algum texto descritivo para a imagem e, em seguida, usa a API de fala da Web ou a API de fala do Bing para compartilhá-la com o visitante.

O vídeo abaixo demonstra isso no Edge, Chrome, Firefox, Opera e Brave.

Você notará que, mesmo quando a API do Computer Vision estiver analisando algumas imagens CGI, ela é muito precisa! Estou realmente impressionado com o progresso que a indústria fez sobre isso nos últimos meses.

Estou usando estes serviços:

• API de Visão Computacional, Serviços Cognitivos da Microsoft
  Isso é gratuito para usar (com uma cota). Você precisará gerar uma chave gratuita; substitua a seção TODO no código por sua chave para fazer essa extensão funcionar em sua máquina. Para ter uma ideia do que essa API pode fazer, brinque com ela.



• Bing Text to Speech API, Serviços Cognitivos da Microsoft
  Isso também é gratuito (com uma cota também). Você precisará gerar uma chave gratuita novamente. Também usaremos uma pequena biblioteca que escrevi recentemente para chamar essa API do JavaScript. Se você não tiver uma chave do Bing, a extensão sempre retornará à API de fala da Web, que é compatível com todos os navegadores recentes.

Mas sinta-se à vontade para experimentar outros serviços semelhantes:

• Reconhecimento Visual, IBM Watson
• API Cloud Vision, Google

Você pode encontrar o código para esta pequena extensão do navegador na minha página do GitHub. Sinta-se à vontade para modificar o código de outros produtos que deseja testar.

Dica para tornar seu código compatível com todos os navegadores

A maioria do código e dos tutoriais que você encontrará usa o namespace chrome.xxx para a API de extensão ( chrome.tabs , por exemplo).

Mas, como eu disse, o modelo de API de extensão está sendo padronizado para browser.xxx , e alguns navegadores estão definindo seus próprios namespaces nesse meio tempo (por exemplo, Edge está usando msBrowser ).

Felizmente, a maior parte da API permanece a mesma por trás do navegador. Portanto, é muito simples criar um pequeno truque para suportar todos os navegadores e definições de namespace, graças à beleza do JavaScript:

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

E voilá!

Obviamente, você também precisará usar o subconjunto da API compatível com todos os navegadores. Por exemplo:

• O Microsoft Edge tem uma lista de suporte.
• O Mozilla Firefox compartilha suas atuais incompatibilidades com o Chrome.
• O Opera mantém sua própria lista de APIs de extensão suportadas por seu navegador.

Arquitetura de extensão

Vamos revisar juntos a arquitetura desta extensão. Se você é novo em extensões de navegador, isso deve ajudá-lo a entender o fluxo.

Vamos começar com o arquivo de manifesto:

Este arquivo de manifesto e seu JSON associado é o mínimo que você precisará para carregar uma extensão em todos os navegadores, se não estivermos considerando o código da própria extensão, é claro. Verifique a fonte na minha conta do GitHub e comece aqui para ter certeza de que sua extensão é compatível com todos os navegadores.

Por exemplo, você deve especificar uma propriedade de author para carregá-la no Edge; caso contrário, ele lançará um erro. Você também precisará usar a mesma estrutura para os ícones. A propriedade default_title também é importante porque é usada por leitores de tela em alguns navegadores.

Aqui estão os links para a documentação para ajudá-lo a criar um arquivo de manifesto compatível com todos os lugares:

• cromada
• Borda
• Raposa de fogo

A extensão de exemplo usada neste artigo é baseada principalmente no conceito de script de conteúdo. Este é um script que vive no contexto da página que gostaríamos de inspecionar. Por ter acesso ao DOM, ele nos ajudará a recuperar as imagens contidas na página web. Se você quiser saber mais sobre o que é um script de conteúdo, Opera, Mozilla e Google têm documentação sobre isso.

Nosso script de conteúdo é simples:

 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

Isso primeiro faz login no console para permitir que você verifique se a extensão foi carregada corretamente. Verifique através da ferramenta de desenvolvedor do seu navegador, acessível a partir de F12 , Control + Shift + I ou ⌘ + ⌥ + I .

Em seguida, ele espera por uma mensagem da página da interface do usuário com um comando requestImages para obter todas as imagens disponíveis no DOM atual e, em seguida, retorna uma lista de seus URLs se forem maiores que 64 × 64 pixels (para evitar todos os o lixo de rastreamento de pixel e imagens de baixa resolução).

A página pop-up da interface do usuário que estamos usando é muito simples e exibirá a lista de imagens retornadas pelo script de conteúdo dentro de um contêiner flexbox. Ele carrega o script start.js , que cria imediatamente uma instância de dareangel.dashboard.js para enviar uma mensagem ao script de conteúdo para obter os URLs das imagens na guia visível no momento.

Aqui está o código que fica na página da interface do usuário, solicitando os URLs para o script de conteúdo:

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Gere uma chave do Computer Vision na outra guia.
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fprodutos%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Estamos criando elementos de imagem. Cada imagem acionará um evento se tiver foco, consultando a API da Pesquisa Visual Computacional para revisão.

Isso é feito por esta simples chamada XHR:

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Os artigos a seguir ajudarão você a entender como essa API de Visão Computacional funciona:

• “Analisando uma Imagem Versão 1.0,” Serviços Cognitivos da Microsoft
• “API do Computer Vision, v1.0,” Serviços Cognitivos da Microsoft
  Isso mostra por meio de um console interativo em uma página da Web como chamar a API REST com as propriedades JSON apropriadas e o objeto JSON que você receberá em troca. É útil entender como funciona e como você vai chamá-lo.

No nosso caso, estamos usando o recurso de describe da API. Você também notará no retorno de chamada que tentaremos usar a API Web Speech ou o serviço Bing Text-to-Speech , com base em suas opções.

Aqui, então, está o fluxo de trabalho global desta pequena extensão:

Carregando a extensão em cada navegador

Vamos rever rapidamente como instalar a extensão em cada navegador.

Pré-requisitos

Baixe ou clone minha pequena extensão do GitHub em algum lugar para o seu disco rígido.

Além disso, modifique o dareangel.dashboard.js para adicionar pelo menos uma chave de API da Pesquisa Visual Computacional. Caso contrário, a extensão só poderá exibir as imagens extraídas da página web.

Microsoft borda

Primeiro, você precisará de pelo menos uma atualização de aniversário do Windows 10 (SO Build 14393+) para ter suporte para extensões no Edge.

Em seguida, abra o Edge e digite about:flags na barra de endereços. Marque a opção "Ativar recursos do desenvolvedor de extensão".

Clique em “…” na barra de navegação do Edge e depois em “Extensions” e depois em “Load extension” e selecione a pasta onde você clonou meu repositório GitHub. Você obterá isso:

Clique nesta extensão recém-carregada e ative “Mostrar botão ao lado da barra de endereço”.

Observe o botão “Recarregar extensão”, que é útil enquanto você desenvolve sua extensão. Você não será forçado a removê-lo ou reinstalá-lo durante o processo de desenvolvimento; basta clicar no botão para atualizar a extensão.

Navegue até BabylonJS e clique no botão Dare Angel (DA) para seguir a mesma demonstração mostrada no vídeo.

Google Chrome, Opera, Vivaldi

No Chrome, navegue até chrome://extensions . No Opera, navegue até opera://extensions . E no Vivaldi, navegue até vivaldi://extensions . Em seguida, ative o “Modo de desenvolvedor”.

Clique em “Carregar extensão descompactada” e escolha a pasta onde você extraiu minha extensão.

Navegue até BabylonJS e abra a extensão para verificar se funciona bem.

Mozilla Firefox

Você tem duas opções aqui. A primeira é carregar temporariamente sua extensão, que é tão fácil quanto no Edge e no Chrome.

Abra o Firefox, navegue até about:debugging e clique em “Load Temporary Add-on”. Em seguida, navegue até a pasta da extensão e selecione o arquivo manifest.json . É isso! Agora vá para BabylonJS para testar a extensão.

O único problema com esta solução é que toda vez que você fechar o navegador, terá que recarregar a extensão. A segunda opção seria usar o pacote XPI. Você pode aprender mais sobre isso em “Extension Packaging” na Mozilla Developer Network.

Corajoso

A versão pública do Brave não possui um “modo de desenvolvedor” embutido para permitir que você carregue uma extensão não assinada. Você precisará criar sua própria versão seguindo as etapas em "Carregar extensões do Chrome no Brave".

Conforme explicado nesse artigo, depois de clonar o Brave, você precisará abrir o arquivo extensions.js em um editor de texto. Localize as linhas abaixo e insira o código de registro do seu ramal. No meu caso, acabei de adicionar as duas últimas linhas:

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Copie a extensão para a pasta app/extensions . Abra dois prompts de comando na pasta browser-laptop . No primeiro, inicie npm run watch e espere o webpack terminar de construir o aplicativo Electron do Brave. Deveria dizer "webpack: o pacote agora é VALID". Caso contrário, você terá alguns problemas.

Em seguida, no segundo prompt de comando, inicie npm start , que iniciará nossa versão ligeiramente personalizada do Brave.

No Brave, navegue até about:extensions e você deverá ver a extensão exibida e carregada na barra de endereço.

Depurando a extensão em cada navegador

Dica para todos os navegadores : Usando console.log() , simplesmente registre alguns dados do fluxo de sua extensão. Na maioria das vezes, usando as ferramentas de desenvolvedor do navegador, você poderá clicar no arquivo JavaScript que o registrou para abri-lo e depurá-lo.

Microsoft borda

Para depurar a parte do script do cliente, vivendo no contexto da página, basta abrir F12 . Em seguida, clique na aba “Debugger” e encontre a pasta da sua extensão.

Abra o arquivo de script que você gostaria de depurar — dareangel.client.js , no meu caso — e depure seu código normalmente, configurando pontos de interrupção etc.

Se sua extensão cria uma guia separada para fazer seu trabalho (como o Page Analyzer, que nossa equipe Vorlon.js publicou na loja), basta pressionar F12 nessa guia para depurá-la.

Se você quiser depurar a página pop-up, primeiro precisará obter o ID de sua extensão. Para fazer isso, basta entrar na propriedade da extensão e você encontrará uma propriedade ID:

Em seguida, você precisará digitar na barra de endereço algo como ms-browser-extension://ID_of_your_extension/yourpage.html . No nosso caso, seria ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Em seguida, basta usar F12 nesta página:

Google Chrome, Opera, Vivaldi, Brave

Como o Chrome e o Opera dependem da mesma base de código do Blink, eles compartilham o mesmo processo de depuração. Embora Brave e Vivaldi sejam forks do Chromium, eles também compartilham o mesmo processo de depuração na maioria das vezes.

Para depurar a parte do script do cliente, abra as ferramentas de desenvolvedor do navegador na página que você deseja depurar (pressionando F12 , Control + Shift + I ou ⌘ + ⌥ + I , dependendo do navegador ou plataforma que você está usando).

Em seguida, clique na guia “Scripts de conteúdo” e encontre a pasta da sua extensão. Abra o arquivo de script que deseja depurar e depure seu código como faria com qualquer código JavaScript.

A página pop-up da interface do usuário que estamos usando é muito simples e exibirá a lista de imagens retornadas pelo script de conteúdo dentro de um contêiner flexbox. Ele carrega o script start.js , que cria imediatamente uma instância de dareangel.dashboard.js para enviar uma mensagem ao script de conteúdo para obter os URLs das imagens na guia visível no momento.

Aqui está o código que fica na página da interface do usuário, solicitando os URLs para o script de conteúdo:

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Gere uma chave do Computer Vision na outra guia.
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fprodutos%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Estamos criando elementos de imagem. Cada imagem acionará um evento se tiver foco, consultando a API da Pesquisa Visual Computacional para revisão.

Isso é feito por esta simples chamada XHR:

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Os artigos a seguir ajudarão você a entender como essa API de Visão Computacional funciona:

• “Analisando uma Imagem Versão 1.0,” Serviços Cognitivos da Microsoft
• “API do Computer Vision, v1.0,” Serviços Cognitivos da Microsoft
  Isso mostra por meio de um console interativo em uma página da Web como chamar a API REST com as propriedades JSON apropriadas e o objeto JSON que você receberá em troca. É útil entender como funciona e como você vai chamá-lo.

No nosso caso, estamos usando o recurso de describe da API. Você também notará no retorno de chamada que tentaremos usar a API Web Speech ou o serviço Bing Text-to-Speech , com base em suas opções.

Aqui, então, está o fluxo de trabalho global desta pequena extensão:

Carregando a extensão em cada navegador

Vamos rever rapidamente como instalar a extensão em cada navegador.

Pré-requisitos

Baixe ou clone minha pequena extensão do GitHub em algum lugar para o seu disco rígido.

Além disso, modifique o dareangel.dashboard.js para adicionar pelo menos uma chave de API da Pesquisa Visual Computacional. Caso contrário, a extensão só poderá exibir as imagens extraídas da página web.

Microsoft borda

Primeiro, você precisará de pelo menos uma atualização de aniversário do Windows 10 (SO Build 14393+) para ter suporte para extensões no Edge.

Em seguida, abra o Edge e digite about:flags na barra de endereços. Marque a opção "Ativar recursos do desenvolvedor de extensão".

Clique em “…” na barra de navegação do Edge e depois em “Extensions” e depois em “Load extension” e selecione a pasta onde você clonou meu repositório GitHub. Você obterá isso:

Clique nesta extensão recém-carregada e ative “Mostrar botão ao lado da barra de endereço”.

Observe o botão “Recarregar extensão”, que é útil enquanto você desenvolve sua extensão. Você não será forçado a removê-lo ou reinstalá-lo durante o processo de desenvolvimento; basta clicar no botão para atualizar a extensão.

Navegue até BabylonJS e clique no botão Dare Angel (DA) para seguir a mesma demonstração mostrada no vídeo.

Google Chrome, Opera, Vivaldi

No Chrome, navegue até chrome://extensions . No Opera, navegue até opera://extensions . E no Vivaldi, navegue até vivaldi://extensions . Em seguida, ative o “Modo de desenvolvedor”.

Clique em “Carregar extensão descompactada” e escolha a pasta onde você extraiu minha extensão.

Navegue até BabylonJS e abra a extensão para verificar se funciona bem.

Mozilla Firefox

Você tem duas opções aqui. A primeira é carregar temporariamente sua extensão, que é tão fácil quanto no Edge e no Chrome.

Abra o Firefox, navegue até about:debugging e clique em “Load Temporary Add-on”. Em seguida, navegue até a pasta da extensão e selecione o arquivo manifest.json . É isso! Agora vá para BabylonJS para testar a extensão.

O único problema com esta solução é que toda vez que você fechar o navegador, terá que recarregar a extensão. A segunda opção seria usar o pacote XPI. Você pode aprender mais sobre isso em “Extension Packaging” na Mozilla Developer Network.

Corajoso

A versão pública do Brave não possui um “modo de desenvolvedor” embutido para permitir que você carregue uma extensão não assinada. Você precisará criar sua própria versão seguindo as etapas em "Carregar extensões do Chrome no Brave".

Conforme explicado nesse artigo, depois de clonar o Brave, você precisará abrir o arquivo extensions.js em um editor de texto. Localize as linhas abaixo e insira o código de registro do seu ramal. No meu caso, acabei de adicionar as duas últimas linhas:

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Copie a extensão para a pasta app/extensions . Abra dois prompts de comando na pasta browser-laptop . No primeiro, inicie npm run watch e espere o webpack terminar de construir o aplicativo Electron do Brave. Deveria dizer "webpack: o pacote agora é VALID". Caso contrário, você terá alguns problemas.

Em seguida, no segundo prompt de comando, inicie npm start , que iniciará nossa versão ligeiramente personalizada do Brave.

No Brave, navegue até about:extensions e você deverá ver a extensão exibida e carregada na barra de endereço.

Depurando a extensão em cada navegador

Dica para todos os navegadores : Usando console.log() , simplesmente registre alguns dados do fluxo de sua extensão. Na maioria das vezes, usando as ferramentas de desenvolvedor do navegador, você poderá clicar no arquivo JavaScript que o registrou para abri-lo e depurá-lo.

Microsoft borda

Para depurar a parte do script do cliente, vivendo no contexto da página, basta abrir F12 . Em seguida, clique na aba “Debugger” e encontre a pasta da sua extensão.

Abra o arquivo de script que você gostaria de depurar — dareangel.client.js , no meu caso — e depure seu código normalmente, configurando pontos de interrupção etc.

Se sua extensão cria uma guia separada para fazer seu trabalho (como o Page Analyzer, que nossa equipe Vorlon.js publicou na loja), basta pressionar F12 nessa guia para depurá-la.

Se você quiser depurar a página pop-up, primeiro precisará obter o ID de sua extensão. Para fazer isso, basta entrar na propriedade da extensão e você encontrará uma propriedade ID:

Em seguida, você precisará digitar na barra de endereço algo como ms-browser-extension://ID_of_your_extension/yourpage.html . No nosso caso, seria ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Em seguida, basta usar F12 nesta página:

Google Chrome, Opera, Vivaldi, Brave

Como o Chrome e o Opera dependem da mesma base de código do Blink, eles compartilham o mesmo processo de depuração. Embora Brave e Vivaldi sejam forks do Chromium, eles também compartilham o mesmo processo de depuração na maioria das vezes.

Para depurar a parte do script do cliente, abra as ferramentas de desenvolvedor do navegador na página que você deseja depurar (pressionando F12 , Control + Shift + I ou ⌘ + ⌥ + I , dependendo do navegador ou plataforma que você está usando).

Em seguida, clique na guia “Scripts de conteúdo” e encontre a pasta da sua extensão. Abra o arquivo de script que deseja depurar e depure seu código como faria com qualquer código JavaScript.

Para depurar uma guia que sua extensão criaria, é exatamente igual ao Edge: basta usar as ferramentas do desenvolvedor.

Para Chrome e Opera, para depurar a página pop-up, clique com o botão direito do mouse no botão da sua extensão ao lado da barra de endereço e escolha “Inspecionar pop-up” ou abra o painel HTML do pop-up e clique com o botão direito dentro dele para “Inspecionar. ” O Vivaldi suporta apenas clicar com o botão direito do mouse e depois “Inspecionar” dentro do painel HTML uma vez aberto.

Para o Brave, é o mesmo processo do Edge. Primeiro você precisa encontrar o GUID associado à sua extensão em about:extensions :

E então, em uma guia separada, abra a página que você gostaria de depurar - no meu caso, chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html - e abra as ferramentas do desenvolvedor.

Para o layout, você tem um pouco de ajuda usando Shift + F8 , que permitirá inspecionar o quadro completo do Brave. E você descobrirá que o Brave é um aplicativo Electron usando React!

Observe, por exemplo, o atributo data-reactroot .

Nota : Eu tive que modificar um pouco o CSS da extensão para Brave porque atualmente exibe pop-ups com fundo transparente por padrão, e também tive alguns problemas com a altura da minha coleção de imagens. Limitei-o a quatro elementos no Brave.

Mozilla Firefox

A Mozilla tem uma documentação muito boa sobre depuração de extensões da web.

Para a parte do script do cliente, é o mesmo que no Edge, Chrome, Opera e Brave. Basta abrir as ferramentas do desenvolvedor na guia que você deseja depurar e você encontrará uma seção moz-extension://guid com seu código para depurar:

Se você precisar depurar uma guia que sua extensão criaria (como a extensão Page Analyzer do Vorlon.js), basta usar as ferramentas do desenvolvedor:

Por fim, depurar um pop-up é um pouco mais complexo, mas é bem explicado na seção “Depurando pop-ups” da documentação.

Publicando sua extensão em cada loja

Cada fornecedor possui documentação detalhada sobre o processo a seguir para publicar sua extensão em sua loja. Todos eles adotam abordagens semelhantes. Você precisa empacotar a extensão em um formato de arquivo específico - na maioria das vezes, um contêiner do tipo ZIP. Em seguida, você deve enviá-lo em um portal dedicado, escolher um modelo de preços e aguardar a conclusão do processo de revisão. Se aceita, sua extensão poderá ser baixada no próprio navegador por qualquer usuário que visite a loja de extensões.

Aqui estão os vários processos:

• Google: “Publicar na Chrome Web Store”
• Mozilla: “Publicando sua WebExtension”
• Opera: “Diretrizes de publicação”
• Microsoft: “Empacotando extensões do Microsoft Edge”

Observe que o envio de uma extensão do Microsoft Edge para a Windows Store é atualmente um recurso restrito. Entre em contato com a equipe do Microsoft Edge com sua solicitação para fazer parte da Windows Store e eles o considerarão para uma atualização futura.

Tentei compartilhar o máximo que aprendi trabalhando em nossa extensão Vorlon.js Page Analyzer e esta pequena prova de conceito.

Alguns desenvolvedores se lembram da dor de trabalhar com várias implementações para construir sua extensão - seja usando diferentes diretórios de compilação, ou trabalhando com APIs de extensão ligeiramente diferentes, ou seguindo abordagens totalmente diferentes, como extensões XUL do Firefox ou BHOs ​​e ActiveX do Internet Explorer.

É incrível ver que, hoje, usando nossas habilidades regulares de JavaScript, CSS e HTML, podemos construir grandes extensões usando a mesma base de código e em todos os navegadores!

Sinta-se à vontade para me enviar um ping no Twitter para qualquer feedback.