Gerenciar guias

Crie seu primeiro gerenciador de guias.

Visão geral

Este tutorial cria um gerenciador de guias para organizar a extensão do Chrome e as guias da documentação da Chrome Web Store.

Pop-up da extensão do gerenciador de guias
Extensão do gerenciador de guias

Neste guia, vamos explicar como fazer o seguinte:

  • Crie um pop-up de extensão usando a API Action.
  • Consulte guias específicas usando a API Tabs.
  • Preserve a privacidade do usuário com permissões de host restritas.
  • Mude o foco da guia.
  • Mova as guias para a mesma janela e agrupe-as.
  • Renomear grupos de guias usando a API TabGroups.

Antes de começar

Este guia pressupõe que você tenha experiência básica em desenvolvimento da Web. Recomendamos consultar Hello World para ver 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 preferir, faça o download do código-fonte completo no GitHub (link em inglês).

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 "Tempo de leitura", que explica os metadados e ícones da extensão em mais detalhes.

Crie uma pasta images e faça o download dos ícones para dentro dela.

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 na ação da extensão, ela executa um código ou abre um pop-up, como nesse caso. Comece declarando 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 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, defina 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 Tabs 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 qualquer permissão. No entanto, precisamos de acesso ao title e ao URL das guias. Essas propriedades sensíveis exigem permissão. Poderíamos solicitar a permissão "tabs", mas isso daria acesso às propriedades confidenciais de todas as guias. Como só estamos gerenciando as guias de um site específico, solicitaremos permissões de host restritas.

As permissões de host restritas permitem proteger a privacidade do usuário concedendo permissão elevada a sites específicos. Isso concederá acesso às propriedades title e URL, bem como recursos adicionais. Adicione o código destacado ao arquivo manifest.json:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 Quais são as principais diferenças entre a permissão de guias e as permissões do host?

A permissão "tabs" e as permissões do 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 do usuário. Assim, se você solicitar essa permissão, o Google Chrome exibirá a seguinte mensagem de aviso no momento da instalação:

Caixa de diálogo de aviso da permissão de guias

As permissões do host permitem que uma extensão leia e consulte as propriedades sensíveis de uma guia correspondente, além de injetar scripts nessas guias. Os usuários verão a seguinte mensagem de aviso no momento da instalação:

Caixa de diálogo de aviso de permissão do host

Esse aviso pode ser um alarme para os usuários. Para uma melhor experiência de integração, recomendamos a implementação de permissões opcionais.

Consultar as guias

Você pode recuperar as guias de URLs específicos usando o método tabs.query(). Crie um arquivo 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 Chrome, porque elas são disponibilizadas pelo esquema do Chrome. Por exemplo, chrome-extension://EXTENSION_ID/popup.html.

Focar em uma guia

Primeiro, a extensão ordenará os nomes das guias (os títulos das páginas HTML contidas) em ordem alfabética. Em seguida, quando um item da lista receber um clique, ele vai se concentrar na guia usando tabs.update() e colocar a janela em primeiro plano 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 ordenar a matriz de guias pelo idioma preferido do usuário.
  • É a tag de modelo usada para definir 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 Spread usada para converter o conjunto de elementos em argumentos na chamada de append().

Agrupar as guias

A API TabGroups permite que a extensão nomeie o grupo e escolha uma cor de plano de fundo. Adicione a permissão "tabGroups" ao manifesto incluindo o código destacado:

{
  "permissions": [
    "tabGroups"
  ]
}

Em popup.js, adicione o código a seguir para criar um botão que agrupe todas as guias usando tabs.group() e as mova 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 ele funciona

Verifique se a estrutura de arquivos do seu projeto corresponde à seguinte árvore de diretórios:

O conteúdo da pasta do gerenciador de guias: manifest.json, popup.js, popup.css, popup.html e das imagens.

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:

Clique no pop-up. O código vai ficar assim:

Pop-up da extensão do gerenciador de guias
Pop-up da extensão do gerenciador de guias

Clique no botão "Agrupar guias". O código vai ficar assim:

Gerenciador de guias Guias agrupadas
Guias agrupadas usando a extensão do gerenciador de guias

🎯 Possíveis melhorias

Com base no que você aprendeu hoje, tente implementar uma das seguintes opções:

  • Personalize a folha de estilo pop-up.
  • Mude a cor e o título do grupo de guias.
  • Gerencie as guias de outro site de documentação.
  • Foi adicionado suporte para desagrupar as guias agrupadas.

Continue desenvolvendo!

Parabéns por concluir este tutorial 🎉. Continue desenvolvendo suas habilidades concluindo outros tutoriais desta série:

Extensão Conteúdo do laboratório
Tempo de leitura 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 de extensão.

Continue descobrindo

Esperamos que você tenha gostado de criar essa extensão do Chrome e esteja animado para continuar sua jornada de aprendizado de desenvolvimento do Chrome. Recomendamos o programa de aprendizado a seguir: