Crie seu primeiro gerenciador de guias.
Visão geral
Este tutorial cria um gerenciador de guias para organizar as guias da extensão do Chrome e da documentação da Chrome Web Store.
![Pop-up da extensão do Gerenciador de guias](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=19&hl=pt)
Neste guia, explicaremos como:
- Crie um pop-up de extensão usando a API Action.
- Consulte guias específicas usando a API Tabs.
- Preservar a privacidade do usuário com permissões de host restritas.
- Mude o foco da guia.
- Mover guias para a mesma janela e agrupá-las.
- Renomeie os grupos de guias usando a API TabGroups.
Antes de começar
Este guia pressupõe que você tenha experiência básica em desenvolvimento na Web. Recomendamos conferir Hello World para uma introdução ao fluxo de trabalho de desenvolvimento de extensões.
Criar a extensão
Para começar, crie um novo diretório chamado tabs-manager
para armazenar os arquivos da extensão. Se você
Se preferir, faça o download do código-fonte completo no GitHub.
Etapa 1: adicionar os dados e ícones da extensão
Crie um arquivo chamado manifest.json
e adicione o seguinte código:
{
"manifest_version": 3,
"name": "Tab Manager for Chrome Dev Docs",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Para saber mais sobre essas chaves de manifesto, confira o tutorial do Tempo de leitura, que explica os metadados e os ícones da extensão.
Crie uma pasta images
e faça o download dos ícones nela.
Etapa 2: criar e estilizar o pop-up
A API Action controla a ação da extensão (ícone da barra de ferramentas). Quando o usuário clica
a ação da extensão, ela executará um código ou abrirá um pop-up, como nesse caso. Comece
Declare o pop-up no manifest.json
:
{
"action": {
"default_popup": "popup.html"
}
}
Um pop-up é semelhante a uma página da Web, com uma exceção: ele não pode executar o JavaScript inline. Crie um arquivo popup.html
e adicione o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
Em seguida, você criará o estilo do pop-up. Crie um arquivo popup.css
e adicione o seguinte código:
body {
width: 20rem;
}
ul {
list-style-type: none;
padding-inline-start: 0;
margin: 1rem 0;
}
li {
padding: 0.25rem;
}
li:nth-child(odd) {
background: #80808030;
}
li:nth-child(even) {
background: #ffffff;
}
h3,
p {
margin: 0;
}
Etapa 3: gerenciar as guias
A API de guias permite que uma extensão crie, consulte, modifique e reorganize guias no navegador.
Solicitar permissão
Muitos métodos na API Tabs podem ser usados sem solicitar nenhuma permissão. No entanto, precisamos de acesso às guias title
e URL
. essas propriedades sensíveis precisam de permissão. Poderíamos solicitar a permissão "tabs"
, mas isso daria acesso às propriedades sensíveis de todas as guias. Como estamos gerenciando apenas as guias de um site específico, solicitaremos permissões de host restritas.
As permissões restritas do host nos permitem proteger a privacidade do usuário concedendo permissões elevadas a sites específicos. Isso concederá acesso às propriedades title
e URL
, além de outros recursos. Adicione o código destacado ao arquivo manifest.json
:
{
"host_permissions": [
"https://developer.chrome.com/*"
]
}
💡 Quais são as principais diferenças entre as permissões de guias e de host?
Tanto a permissão "tabs"
quanto as permissões de host têm desvantagens.
A permissão "tabs"
concede a uma extensão a capacidade de ler dados sensíveis em todas as guias. Com o tempo, essas informações podem ser usadas para coletar o histórico de navegação de um usuário. Dessa forma, se você solicitar essa permissão, o Google Chrome exibirá a seguinte mensagem de aviso no momento da instalação:
As permissões do host permitem que uma extensão leia e consulte as propriedades sensíveis de uma guia correspondente e injete scripts nessas guias. Os usuários verão a seguinte mensagem de aviso no momento da instalação:
Esse aviso pode ser alarmante para os usuários. Para uma melhor experiência de integração, recomendamos a implementação de permissões opcionais.
Consultar as guias
É possível recuperar as guias de URLs específicos usando o método tabs.query()
. Criar um popup.js
e adicione o seguinte código:
const tabs = await chrome.tabs.query({
url: [
"https://developer.chrome.com/docs/webstore/*",
"https://developer.chrome.com/docs/extensions/*",
]
});
💡 Posso usar as APIs do Chrome diretamente no pop-up?
Um pop-up e outras páginas de extensão podem chamar qualquer API do Google Chrome porque são exibidos da
esquema do Chrome. Por exemplo, chrome-extension://EXTENSION_ID/popup.html
.
Focar em uma guia
Primeiro, a extensão classificará os nomes das guias (os títulos das páginas HTML contidas) em ordem alfabética. Então, quando um item da lista for clicado,
foque nessa guia usando tabs.update()
e leve a janela para a frente usando windows.update()
.
Adicione o código abaixo ao arquivo popup.js
:
...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split("-")[0].trim();
const pathname = new URL(tab.url).pathname.slice("/docs".length);
element.querySelector(".title").textContent = title;
element.querySelector(".pathname").textContent = pathname;
element.querySelector("a").addEventListener("click", async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
...
💡 JavaScript interessante usado neste código
- O Collator usado para classificar a matriz de guias pelo idioma preferido do usuário.
- A tag de modelo usada para
defina um elemento HTML que pode ser clonado em vez de usar
document.createElement()
para criar cada item. - O construtor de URL usado para criar e analisar URLs.
- A sintaxe de propagação usada para converter o conjunto de elementos em argumentos na chamada
append()
.
Agrupar as guias
A API TabGroups permite que a extensão nomeie o grupo e escolha um plano de fundo
cor Adicione a permissão "tabGroups"
ao manifesto adicionando o código destacado:
{
"permissions": [
"tabGroups"
]
}
No arquivo popup.js
, adicione o código abaixo para criar um botão que vai agrupar todas as guias usando tabs.group()
e
movê-las para a janela atual.
const button = document.querySelector("button");
button.addEventListener("click", async () => {
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: "DOCS" });
}
});
Testar se funciona
Verifique se a estrutura de arquivos do seu projeto corresponde à seguinte árvore de diretórios:
Carregar sua extensão localmente
Para carregar uma extensão descompactada no modo de desenvolvedor, siga as etapas em Hello World.
Abrir algumas páginas de documentação
Abra os seguintes documentos em diferentes janelas:
- Projetar a interface do usuário
- Descoberta na Chrome Web Store
- Visão geral do desenvolvimento de extensões
- Formato do arquivo de manifesto
- Publicar na Chrome Web Store
Clique no pop-up. Ele será parecido com o seguinte:
![Pop-up da extensão do Gerenciador de guias](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=19&hl=pt)
Clique em "Agrupar guias" . Ele será parecido com o seguinte:
![Gerenciador de guias Guias agrupadas](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=19&hl=pt)
🎯 Possíveis melhorias
Com base no que você aprendeu hoje, tente implementar uma das seguintes opções:
- Personalize a folha de estilo do pop-up.
- Mude a cor e o título do grupo de guias.
- Gerenciar as guias de outro site de documentação.
- Foi adicionado suporte para desagrupar as guias agrupadas.
Continue criando!
Parabéns por concluir este tutorial 🎉. Continue desenvolvendo suas habilidades realizando outros tutoriais desta série:
Extensão | O que você vai aprender |
---|---|
Tempo de leitura | Para inserir um elemento em cada página automaticamente. |
Modo sem distrações | Para executar o código na página atual depois de clicar na ação da extensão. |
Continue descobrindo
Esperamos que você tenha gostado de criar esta extensão do Google Chrome e estamos animados para continuar usando o Chrome e desenvolvimento de software. Recomendamos o seguinte programa de aprendizado:
- O Guia para desenvolvedores tem dezenas de links adicionais para documentações relevantes para a criação avançada de extensões.
- As extensões têm acesso a APIs poderosas além daquelas disponíveis na Web aberta. A documentação das APIs do Chrome explica cada API.