Extensões de navegador são complementos aos navegadores que são usados ​​para adicionar estética ao site e também fornecer uma experiência de usuário ideal.
O conceito de script de conteúdo no desenvolvimento de extensões é um conhecimento bastante útil a ser adquirido por desenvolvedores, pois expandiu significativamente os casos de uso de extensões de navegador.

Este artigo tem como objetivo apresentar o que são scripts de conteúdo e como funcionam. Haveria também um projeto de demonstração no qual o básico das extensões do Chrome seria discutido e um script de conteúdo simples seria usado em nossa extensão. Com isso, vamos começar.

Compreendendo os scripts de conteúdo

Em primeiro lugar, o que é um script de conteúdo? Scripts de conteúdo são códigos JavaScript que, ao interagir com páginas da web por meio de uma extensão do navegador, são executados para modificar a página da web.

Isso é facilmente alcançado interagindo com o modelo de objeto de documento da página da web. O modelo de objeto de documento de página da web é a estrutura bruta de uma determinada página da web. A maneira pela qual os scripts de conteúdo do Chrome agem para modificar a página da web em questão é geralmente chamada de injeção.

Tendo feito uma breve introdução aos scripts de conteúdo, prosseguiríamos para implementá-los em nossas páginas da web. Mas antes disso, precisamos configurar nossa extensão de navegador que irá alimentar o script.

Configurando sua extensão do Chrome

Configurar um arquivo de extensão do Chrome é bastante simples. Para obter mais referências sobre extensões de construção, em anexo abaixo está o link para a página de documentação de extensões do Chrome.
Uma extensão ideal do Chrome deve incluir um arquivo manifest.json bem detalhado que fornece as informações básicas padrão sobre a extensão do Chrome.
Além disso, o arquivo JS apropriado a ser executado também está incluído. Outros arquivos adicionais (HTML e CSS) ajudam a dar estética à extensão.
Com isso, vamos construir nossa extensão, incorporando nossa injeção de script de conteúdo. Ilustraremos o poder dos scripts de conteúdo criando uma extensão do Chrome que exibe um botão sobreposto a qualquer página da web ativa em que navegamos.

Escrevendo um arquivo de manifesto

Nesta seção, as partes do arquivo de manifesto serão destacadas e discutidas. Aqui está o código do arquivo de manifesto do projeto.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Versão do manifesto: A versão do manifesto geralmente é solicitada. Por padrão, está definido como 3. pois é uma atualização significativamente melhor do que a versão 2.
Nome: O nome da extensão também é digitado no arquivo de manifesto. No meu caso, o projeto se chama botão Adicionar. Isso pode ser ajustado para atender à preferência do usuário.
A versão da extensão do Chrome também é inserida. No nosso caso, esta é a primeira versão da extensão, portanto é chamada de 1.0. Melhorias subsequentes nesta extensão podem solicitar a modificação do arquivo para aumentar as versões respectivamente.
Descrição: uma descrição do que a extensão faz também dá credibilidade à extensão do Chrome para os usuários não técnicos da extensão.

Os pontos subsequentes levantados são bastante convincentes na construção dos scripts de conteúdo.

O objeto de permissões destaca a rota para a execução dos scripts de conteúdo. Isso também evita que os scripts de conteúdo sejam executados em guias e páginas da web inesperadas. Isso nos permite listar todas as permissões que nossa extensão do Chrome pode exigir. Algumas extensões do Chrome podem precisar de acesso ao armazenamento do navegador, outras APIs do Chrome e alguns sites em questão. No nosso caso para este projeto, estamos limitando nossa extensão do Chrome apenas à guia ativa do navegador em uso. É importante implementar isso para reduzir o risco de a extensão do Chrome comprometer outras partes não utilizadas do navegador Chrome.

Em seguida, configuraremos o campo de scripts de conteúdo em nosso arquivo de manifesto.
O campo de scripts de conteúdo especifica os vários arquivos de código que pretendemos injetar em nossa página web.
Ele contém o subcampo de correspondências que especifica o URL da página da web sobre a qual queremos que ele atue. Para facilitar o uso, incluímos apenas todos os URLs que permitem que isso atue em todas as páginas da web que acessamos. No entanto, você pode especificar o URL que pretende injetar no valor do subcampo. Por exemplo, www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

Os arquivos JS que contêm o código de injeção também são especificados. No nosso caso,
Nosso arquivo JS é denominado Content script.js. Também especificamos o arquivo CSS usado no estilo deste projeto.

Com isso, tivemos uma implementação em miniatura do arquivo de manifesto do nosso projeto. Em seguida, escreveremos nosso código de injeção na seção subsequente

Criação de scripts de conteúdo

No espírito de manter as coisas simples, estaríamos criando um botão simples que, quando clicado, mostra uma mensagem de alerta. Espera-se que este botão se sobreponha à página da web existente.
Aqui está o código abaixo

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

O estilo pode ser alterado de acordo com sua preferência, porém um modelo de estilo foi incluído no repositório de código.

aqui está uma foto de sua implementação.

Aqui está o link para o código-fonte contendo o estilo do código.

Técnicas Avançadas e Casos de Uso

Até agora concluímos o projeto. No entanto, para aprimorar o conhecimento, aqui estão algumas das técnicas avançadas e práticas recomendadas que você também pode implementar ao criar scripts de conteúdo.

• Interação cruzada com scripts de fundo do navegador
• Implementação de gerenciadores de estado de dados para permitir scripts dinâmicos
• A integração de outras APIs externas permite a manipulação e análise de dados
• Empregar estratégias de cache para otimizar o desempenho da extensão
• Integração de scripts de conteúdo com service workers

Conclusão

Você também pode interagir comigo no meu blog e conferir meus outros artigos aqui. Até a próxima, continue codificando!