prefácio
As extensões do Chrome (também comumente chamadas de plug-ins) também são programas de software, desenvolvidos usando a pilha de tecnologia da Web (HTML, CSS e JavaScript). Permite que os usuários personalizem a experiência de navegação do Chrome. Os desenvolvedores podem otimizar a experiência adicionando efeitos ou funções especiais. Por exemplo: ferramentas de eficiência, agregação de informações, etc. Você pode conferir uma grande variedade de extensões na Chrome Store. Por exemplo, algumas extensões de tradução, extensões de formatação JSON, etc. melhoraram muito nosso desenvolvimento ou eficiência de trabalho. Este artigo visa ajudá-lo a entender os conceitos básicos e o processo de desenvolvimento da extensão do Chrome. E, finalmente, desenvolva uma extensão de extração de cores de fundo para aprofundar a impressão da extensão do Chrome. Este artigo é baseado no Manifest V3 e a maior parte do conteúdo é traduzida de https://developer.chrome.com/docs/extensions/mv3/. No final, as funções estendidas que queremos implementar são as seguintes:
conceito básico
Manifesto
O manifesto da extensão é o único arquivo necessário e o nome do arquivo deve ser manifest.json. O manifesto deve ser colocado no diretório raiz da extensão, registra metadados importantes, definições de recursos, declarações de permissão e identifica quais arquivos estão sendo executados em segundo plano e na página.
trabalhador de serviço
O usuário estendido do Service Worker manipula e escuta os eventos do navegador. Como pular para uma nova página, remover favoritos, fechar guias, etc. Ele pode usar todas as APIs do Chrome, mas não pode interagir diretamente com as páginas da web (são necessários Scripts de conteúdo para interagir com as páginas da web).
Scripts de conteúdo
O script de conteúdo pode executar JavaScript no contexto da página da web. Também é possível ler e modificar o DOM da página em que são injetados. O script de conteúdo pode usar apenas parte da API do Chrome. O restante pode ser acessado indiretamente por meio dos Service Workers.
Pop-ups e páginas
As extensões podem conter vários arquivos HTML, como pop-ups, opções de página etc., que podem acessar as APIs do Chrome.
Desenvolva uma extensão simples
Vamos desenvolver uma extensão simples do Hello Extensions .
Criar arquivo manifest.json
Crie um novo diretório e crie um arquivo manifest.jsonnomeado .
mkdir hello_extension
cd hello_extension
touch manifest.jsonmanifest.jsonAdicione o seguinte código ao :
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}O arquivo JSON acima descreve a função e a configuração da extensão. Por exemplo, a ação descreve o ícone da extensão que precisa ser exibido no Chrome e a página que aparece depois de clicar no ícone. Você pode baixar o ícone aqui para o seu diretório e, em seguida, alterar o nome para aquele configurado manifest.jsonem default_icon.
criar arquivo html
Um também é configurado na ação acima default_popupe, em seguida, criamos um arquivo hello.htmlchamado e adicionamos o seguinte código.
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>extensão de carga
Carregue extensões não empacotadas no modo de desenvolvimento.
Digite-o na barra de endereço do navegador Chrome
chrome://extensions. Ele também pode ser aberto das duas maneiras a seguir.
Ative o modo de desenvolvedor
Clique para carregar a extensão descompactada
Depois de selecionar nossa pasta, ela será exibida na página da extensão
extensão fixa
Clique em Pin e nossa extensão pode ser exibida na barra de ferramentas. Em seguida, clicamos no ícone para abrir a página correspondente.
recarregar extensão
Vamos voltar ao código e mudar o nome da extensão para "Hello Extensions of the world!"
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}Depois de salvar, volte para a página da extensão, clique em atualizar e você verá que o nome mudou. 
Preciso recarregar a extensão toda vez que fizer uma alteração? Você pode consultar a tabela abaixo.
| Extensões | Você precisa recarregar |
|---|---|
| o manifesto | Sim |
| trabalhador de serviço | Sim |
| Scripts de conteúdo | Sim (mais a página do host) |
| o pop-up | Não |
| página de opções | Não |
| Outras páginas HTML de extensão | Não |
Exibir logs e erros do console
Registros do console
Durante o desenvolvimento, você pode depurar seu código por meio dos logs do console do navegador. No código anterior, adicione<script src="popup.js"></script>
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>Crie um arquivo popup.jsnomeado e adicione o seguinte código:
console.log("This is a popup!")Próximo:
extensão de atualização
abra o pop-up
clique com o botão direito do mouse
Selecione Inspecionar
Alterne para a guia Console nas ferramentas do desenvolvedor.
Registros de erro
Abaixo modificamos popup.js, retire as aspas
console.log("This is a popup!) // ❌ 错误代码Depois de atualizar e, em seguida, clicar para abrir a extensão, você verá o botão de erro aparecer. 
Clique no botão de erro para visualizar as informações de erro específicas.
Estrutura estendida do projeto
Existem várias maneiras de expandir a estrutura do projeto, mas manifest.jsono arquivo deve estar localizado no diretório raiz, segue um exemplo de estrutura.
Roteiro de conteúdo
O Content Script é executado no contexto da página da Web. Por meio do DOM padrão, o Content Script pode ler os detalhes da página acessada pelo navegador, modificá-la e passar essas informações para a extensão pai.
Capacidade de entender o script de conteúdo
O script de conteúdo pode usar diretamente parte da API do Chrome, como:
i18n
armazenar
tempo de execução:
conectar
getManifest
getURL
eu ia
onConnect
na mensagem
enviar mensagem
Outros podem ser implementados enviando mensagens. O Script de conteúdo pode acessar os arquivos na extensão após declará-los como recursos acessíveis na Web. O Script de conteúdo é executado em um ambiente independente e pode modificar seu ambiente JavaScript sem entrar em conflito com páginas ou outros Scripts de conteúdo estendidos.
<html>
<button id="mybutton">click me</button>
<script>
var greeting = "hello, ";
var button = document.getElementById("mybutton");
button.person_name = "Bob";
button.addEventListener(
"click",
() => alert(greeting + button.person_name + "."),
false
);
</script>
</html>
Injeção de script de conteúdo
Existem três métodos de injeção de script de conteúdo, ou seja, declaração estática, declaração dinâmica e injeção de programação. A declaração estática é relativamente simples, basta content_scriptsconfigurar . Observe que matcheso campo para indicar quais páginas precisam executar o script do Script de conteúdo.
"content_scripts": [
{
"matches": ["https://*.google.com/*"],
"css": ["styles.css"],
"js": ["content-script.js"]
}
],O principal cenário de uso da declaração dinâmica é quando matchesnão está claro. A injeção de programação precisa ser usada em resposta a eventos ou em algumas ocasiões específicas.Nosso exemplo final usa declarações estáticas.
trabalhador de serviço
As extensões do Chrome são programas baseados em eventos que modificam ou aprimoram a experiência de navegação do navegador Chrome. Os eventos são acionados pelo navegador, como navegar para uma nova página, excluir um marcador ou fechar uma guia. A extensão escuta esses eventos por meio de scripts no Service Worker. Em seguida, execute instruções específicas. O Service Worker é carregado quando necessário e descarregado quando vai dormir. por exemplo:
A extensão é instalada pela primeira vez ou atualizada para uma nova versão
Um evento prolongado é disparado
Script de conteúdo ou outra extensão enviou uma mensagem
Depois que o Service Worker for carregado, ele permanecerá em execução enquanto houver eventos. Uma vez inativo por 30 segundos, o navegador o interrompe. O Service Worker permanece inativo até que um evento que ele escuta ocorra, momento em que ele executa o correspondente event listener, então fica ocioso e descarrega.
Os logs do Service Worker podem ser visualizados aqui
Registrar Service Worker
"background": {
"service_worker": "background.js"
},Inicializar a extensão
chrome.runtime.onInstalled.addListener(function (details) {
console.log("onInstalled event has been triggered with details: ", details);
// 检查安装、更新或卸载的原因
if (details.reason == "install") {
// 在安装扩展时执行的代码
} else if (details.reason == "update") {
// 在更新扩展时执行的代码
} else if (details.reason == "uninstall") {
// 在卸载扩展时执行的代码
}
});
definir monitor
/**
* 注意需要声明权限
*/
chrome.bookmarks.onCreated.addListener(function (id, bookmark) {
console.log(
"Bookmark created with title: " +
bookmark.title +
" and url: " +
bookmark.url
);
});
filtrar eventos
/**
* 注意需要声明 webNavigation 权限
*/
chrome.webNavigation.onCompleted.addListener(() => {
console.info("The user has loaded my favorite website!");
});
Todos os eventos são impressos quando não filtrados. Diferentes eventos correspondem a diferentes funções e você precisa selecionar o evento apropriado para monitorar.
O Service Worker se comunica com o Script de conteúdo
Podemos passar o evento de clicar na aba estendida chrome.tabs.sendMessagee cadastrá-la no Script de Conteúdo chrome.runtime.onMessage.addListenerpara recebê-la .
Desenvolvimento de extensão de extração de cor
Com base nos pontos de conhecimento acima, precisamos implementar as seguintes funções: 1. Clique no botão de extensão na barra de navegação para abrir um painel exibindo detalhes 2. Clique com o mouse no elemento da página na página atual para exibir o plano de fundo correspondente cor no painel pop-up 3. Clique para copiar O botão pode copiar a cor de fundo do elemento atual
Aqui, listamos apenas o código principal da seguinte forma:
configuração do manifesto
{
"manifest_version": 3,
"name": "EasyColor",
"description": "Chrome extension for obtaining color in an easy way",
"version": "0.0.1",
"action": {
"default_icon": "images/icon-48.png"
},
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["css/styles.css"],
"js": ["scripts/content.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["/pages/panel.html"],
"matches": ["http://*/*", "https://*/*"]
}
]
}Clique no botão de extensão na barra de navegação para abrir um painel de exibição
Primeiro, service_workerem , definimos um background.js para ouvir o evento click da extensão e enviá-lo para content_scripts.
chrome.action.onClicked.addListener(function (tab) {
//open pages
chrome.tabs.sendMessage(tab.id, {
action: "EVENT_PANEL_OPEN",
});
});Ouça EVENT_PANEL_OPENo evento e adicione um iframe à página atual para exibir o painel.
chrome.runtime.onMessage.addListener((req, sender, sendResp) => {
const data = req;
if (data.action === "EVENT_PANEL_OPEN") {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
easyPanel = document.createElement("iframe");
easyPanel.id = easyPanelId;
easyPanel.src = chrome.runtime.getURL("../pages/panel.html");
easyPanel.style.width = "100%";
easyPanel.style.height = "100%";
easyPanel.style.borderRadius = "20px";
easyPanel.style.border = "none";
const container = document.createElement("div");
container.id = easyContainerId;
container.style.width = "200px";
container.style.height = "250px";
container.style.position = "fixed";
container.style.top = "10px";
container.style.right = "10px";
container.style.zIndex = "10000";
container.style.boxShadow = "3px 2px 22px 1px rgba(0, 0, 0, 0.24)";
container.style.borderRadius = "20px";
container.appendChild(easyPanel);
document.body.appendChild(container);
}
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener(
"click",
function (e) {
e.stopPropagation();
e.preventDefault();
return false;
},
true
);
}
});Clique para exibir a cor correspondente
Adicione um evento click a content_scripts para obter a cor de fundo do elemento atual e, em seguida, passe-o para o iframe para exibição.
document.addEventListener("mousedown", function (e) {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
return;
}
const cpStyle = window.getComputedStyle(e.target);
easyPanel.contentWindow.postMessage(
{
type: "computedStyle",
data: JSON.stringify({
color: cpStyle.color,
backgroundColor: cpStyle.backgroundColor,
}),
},
"*"
);
});O código acima é o código principal do plug-in de seleção de cor de elemento que implementamos. Para mais detalhes, consulte: https://github.com/yangpeng7/ChromeExtensionBestPractice
recursos de referência
https://developer.chrome.com/docs/extensions/mv3/
- FIM -
Sobre Qi Wu Troupe
Qi Wu Troupe é a maior equipe de front-end do 360 Group e participa do trabalho dos membros do W3C e ECMA (TC39) em nome do grupo. Qi Wu Troupe atribui grande importância ao treinamento de talentos. Existem várias direções de desenvolvimento, como engenheiros, palestrantes, tradutores, pessoas de interface de negócios e líderes de equipe para os funcionários escolherem e complementados pelo fornecimento de treinamento técnico, profissional, geral e de liderança correspondente .claro. Qi Dance Troupe dá as boas-vindas a todos os tipos de talentos excepcionais para prestar atenção e se juntar ao Qi Dance Troupe com uma atitude aberta e em busca de talentos.
