Crie sua Própria Extensão de Navegador pt 2

Por

Adicionando Content e Background Scripts

Vamos dar um passo adiante e adicionar lógica para desativar a extensão de trabalhar em páginas fora do domínio rafaelwms.com.br.

Para fazer isso, primeiro precisamos criar um content script . Scripts de conteúdo executados no contexto de uma determinada página da Web, podem acessar o conteúdo de uma página da Web e podem se comunicar com scripts de fundo, que criaremos em breve. Dentro do seu diretório js, crie um arquivo chamado content.js. Adicione o seguinte código:

// captura a URL da página
var url = document.location.href;

// Se não tiver em um domínio rafaelwms.com.br
if (url.indexOf("//rafaelwms.com.br") === -1) {
    // send envia os ícones inativos
    chrome.runtime.sendMessage({
        "iconPath20": "images/inactive20.png",
        "iconPath40": "images/inactive40.png"
    });
}

Este script obtém a URL da página atual e verifica se a página atual está ou não em um domínio rafaelwms.com.br. Se a página não estiver em um domínio rafaelwms.com.br (por exemplo, https://www.google.com/),os caminhos para os ícones inativos (ícones acinzentados) serão enviados para o script de fundo usando runtime.sendMessage().document.location.href

Você também precisa atualizar manifest.json para incluir esta chave:content_scripts

  "content_scripts": [{
    "matches": [
        "<all_urls>"
    ],
    "js": ["js/content.js"],
    "run_at": "document_end"
}]

Definições-chave:

  • content_scripts:especifica quais scripts de conteúdo o navegador deve carregar
    • matches (obrigatório): especifica o padrão de URL a ser correspondido para que o script de conteúdo seja carregado
    • js: o script que deve ser carregado em URLs correspondentes
    • run_at: especifica onde os arquivos JavaScript da chave são injetadosjs

Em seguida, precisamos criar um background script. Scripts background são executados em segundo plano no plano de fundo do navegador, executados independentemente da vida útil de uma página da Web ou janela do navegador, e podem se comunicar com scripts de conteúdo.

Dentro da pasta js, crie um arquivo chamado background.js e adicione este código:

// listen for sendMessage() from content script
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        // set the icon for the browser action from sendMessage() in content script
        chrome.browserAction.setIcon({
            path: {
                "20": request.iconPath20,
                "40": request.iconPath40
            },
            tabId: sender.tab.id
        });
        // disable browser action for the current tab
        chrome.browserAction.disable(sender.tab.id);
    });

O método runtime.onMessage ouve runtime.sendMessage() a partir do content script. Se o domínio da página não for rafaelwms.com.br, então o navegadorAction.setIcon() definirá os caminhos do ícone para as imagens inativas.

Este script também desativa a ação do navegador(browserAction.disable),de modo que os usuários não podem clicar na ação do navegador fora de uma página rafaelwms.com.br.

Precisamos adicionar o script de fundo ao manifest.json. Adicione a seguinte chave ao seu manifesto:background

    "background": {
      "scripts": ["js/background.js"],
      "persistent": true
    }

Definições-chave:

  • plano de fundo:especifica quaisquer scripts de fundo
    • scripts: um caminho para um arquivo JavaScript
    • persistent (obrigatório): Isso pode ser definido para ou . Se definido como , o background script será carregado e continuará a persistir para toda a seção de navegação. Se definido como, o background script será carregado com um atraso e, em seguida, persistirá para a sessão de navegação.truefalsetruefalse

Recarregue sua extensão e teste novamente. Para recarregar sua extensão, clique em Extensões, clique em sua extensão, Color Changer e clique em Recarregar ou Atualizar.

Agora, abra uma nova guia ou atualize uma guia existente que não seja uma página rafaelwms.com.br. Você deve ver o ícone inativo e não ser capaz de clicar na ação do navegador.

Muito bom!! Parabéns! Você criou uma extensão para Navegadores! Agora, associe sua habilidade como programador Web, para construir algo mais complexo!

Se você gostou desse post, lembre de inscrever-se no nosso canal do Youtube! Gratidão pelo acompanhamento e até o próximo Post.