Gestisci schede

Crea il tuo primo gestore di schede.

Panoramica

Questo tutorial crea un gestore di schede per organizzare la tua estensione di Chrome e le schede della documentazione del Chrome Web Store.

Popup dell'estensione Gestione schede
Estensione Tabs Manager

In questa guida, ti spiegheremo come:

  • Crea un popup di estensione utilizzando l'API Action.
  • Query su schede specifiche utilizzando l'API Tabs.
  • Tutelare la privacy degli utenti tramite autorizzazioni host limitate.
  • Cambia lo stato attivo della scheda.
  • Sposta le schede nella stessa finestra e raggruppale.
  • Rinominare i gruppi di schede utilizzando l'API TabGroups.

Prima di iniziare

Questa guida presuppone che tu abbia esperienza di base nello sviluppo web. Ti consigliamo di consultare Hello World per un'introduzione al flusso di lavoro per lo sviluppo delle estensioni.

Crea l'estensione

Per iniziare, crea una nuova directory denominata tabs-manager in cui inserire i file dell'estensione. Se preferisci, puoi scaricare il codice sorgente completo da GitHub.

Passaggio 1: aggiungi i dati e le icone dell'estensione

Crea un file denominato manifest.json e aggiungi il seguente codice:

{
  "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"
  }
}

Per ulteriori informazioni su queste chiavi manifest, consulta il tutorial relativo al tempo di lettura in cui vengono spiegati in maggiore dettaglio i metadati e le icone dell'estensione.

Crea una cartella images e scarica le icone al suo interno.

Passaggio 2: crea il popup e applica uno stile

L'API Action controlla l'azione dell'estensione (icona della barra degli strumenti). Quando l'utente fa clic sull'azione dell'estensione, esegue del codice o apre un popup, come in questo caso. Inizia dichiarando il popup nel manifest.json:

{
  "action": {
    "default_popup": "popup.html"
  }
}

Un popup è simile a una pagina web, con un'eccezione: non può eseguire JavaScript incorporato. Crea un file popup.html e aggiungi il seguente codice:

<!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>

A questo punto, devi definire lo stile del popup. Crea un file popup.css e aggiungi il seguente codice:

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;
}

Passaggio 3: gestisci le schede

L'API Tabs consente a un'estensione di creare, eseguire query, modificare e riordinare le schede nel browser.

Richiedi autorizzazione

Molti metodi nell'API Tabs possono essere utilizzati senza richiedere alcuna autorizzazione. Tuttavia, abbiamo bisogno di accedere ai title e alle URL delle schede; queste proprietà sensibili richiedono l'autorizzazione. Potremmo richiedere l'autorizzazione "tabs", che però consentirebbe l'accesso alle proprietà sensibili di tutte le schede. Poiché gestiamo solo le schede di un sito specifico, richiediamo autorizzazioni host limitate.

Le autorizzazioni host ristrette ci consentono di proteggere la privacy degli utenti concedendo autorizzazioni elevate a siti specifici. Verrà concesso l'accesso alle proprietà title e URL, oltre a funzionalità aggiuntive. Aggiungi il codice evidenziato al file manifest.json:

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

💡 Quali sono le principali differenze tra le autorizzazioni per le schede e le autorizzazioni host?

Sia l'autorizzazione "tabs" che le autorizzazioni host presentano svantaggi.

L'autorizzazione "tabs" concede a un'estensione la possibilità di leggere i dati sensibili in tutte le schede. Nel tempo, queste informazioni potrebbero essere utilizzate per raccogliere la cronologia di navigazione di un utente. Di conseguenza, se richiedi questa autorizzazione, Chrome mostrerà il seguente messaggio di avviso al momento dell'installazione:

Finestra di avviso per l&#39;autorizzazione delle schede

Le autorizzazioni host consentono a un'estensione di leggere ed eseguire query sulle proprietà sensibili di una scheda corrispondente, oltre a inserire script in queste schede. Gli utenti vedranno il seguente messaggio di avviso al momento dell'installazione:

Finestra di avviso per l&#39;autorizzazione dell&#39;host

Questi avvisi possono essere allarmanti per gli utenti. Per una migliore esperienza di onboarding, ti consigliamo di implementare le autorizzazioni facoltative.

Esegui query sulle schede

Puoi recuperare le schede da URL specifici utilizzando il metodo tabs.query(). Crea un file popup.js e aggiungi il seguente codice:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Posso utilizzare le API di Chrome direttamente nel popup?

Un popup e altre pagine di estensioni possono chiamare qualsiasi API di Chrome perché provengono dallo schema di Chrome. Ad esempio chrome-extension://EXTENSION_ID/popup.html.

Imposta lo stato attivo su una scheda

Innanzitutto, l'estensione ordina i nomi delle schede (i titoli delle pagine HTML contenute) in ordine alfabetico. Quando un elemento dell'elenco viene selezionato, lo stato attivo viene impostato sulla scheda in questione utilizzando tabs.update() e la finestra viene mostrata in primo piano usando windows.update(). Aggiungi il seguente codice al file 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 utilizzato in questo codice

  • Il raccoglitore utilizzato per ordinare l'array di schede in base alla lingua preferita dell'utente.
  • Il tag del modello utilizzato per definire un elemento HTML che può essere clonato anziché utilizzare document.createElement() per creare ogni elemento.
  • Il costruttore URL utilizzato per creare e analizzare gli URL.
  • La sintassi di diffusione utilizzata per convertire l'insieme di elementi in argomenti nella chiamata append().

Raggruppa le schede

L'API TabGroups consente all'estensione di assegnare un nome al gruppo e di scegliere un colore di sfondo. Aggiungi l'autorizzazione "tabGroups" al file manifest aggiungendo il codice evidenziato:

{
  "permissions": [
    "tabGroups"
  ]
}

In popup.js, aggiungi il codice seguente per creare un pulsante che raggruppi tutte le schede utilizzando tabs.group() e le sposti nella finestra corrente.

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" });
  }
});

Verifica che funzioni

Verifica che la struttura dei file del progetto corrisponda alla seguente struttura di directory:

I contenuti della cartella di tabs Manager: manifest.json, popup.js, popup.css, popup.html e cartella delle immagini.

Carica l'estensione localmente

Per caricare un'estensione non pacchettizzata in modalità sviluppatore, segui i passaggi descritti in Hello World.

Apri alcune pagine della documentazione

Apri i seguenti documenti in diverse finestre:

Fai clic sul popup. Dovrebbe avere il seguente aspetto:

Popup dell&#39;estensione Gestione schede
Popup dell'estensione Gestione schede

Fai clic sul pulsante "Raggruppa schede". Dovrebbe avere il seguente aspetto:

Schede raggruppate di Gestione schede
Schede raggruppate utilizzando l'estensione Gestione schede

🎯 Potenziali miglioramenti

Sulla base di quanto hai appreso oggi, prova a implementare una delle seguenti soluzioni:

  • Personalizza il foglio di stile popup.
  • Modifica il colore e il titolo del gruppo di schede.
  • Gestisci le schede di un altro sito di documentazione.
  • Aggiungi il supporto per separare le schede raggruppate.

Continua a costruire!

Congratulazioni per aver completato questo tutorial 🎉. Continua a sviluppare le tue competenze completando altri tutorial di questa serie:

Estensione Cosa imparerai a fare
Tempo di lettura Per inserire automaticamente un elemento in ogni pagina.
Modalità Niente distrazioni Per eseguire il codice nella pagina corrente dopo aver fatto clic sull'azione dell'estensione.

Continua a esplorare

Ci auguriamo che ti sia piaciuto creare questa estensione di Chrome e siamo felici di continuare il tuo percorso di apprendimento sullo sviluppo di Chrome. Ti consigliamo il seguente percorso di apprendimento: