Gestisci schede

Crea il tuo primo gestore di schede.

Panoramica

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

Popup dell'estensione Gestione schede
. Estensione Gestione schede

In questa guida, spiegheremo come fare:

  • Crea un popup dell'estensione utilizzando l'API Action.
  • Query su schede specifiche utilizzando l'API Tabs.
  • Tutela la privacy degli utenti attraverso autorizzazioni dell'host ristrette.
  • Modifica 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 di sviluppo web. Ti consigliamo di procedere con il pagamento 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 puoi scaricare il codice sorgente completo su GitHub.

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

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

{
  "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 saperne di più su queste chiavi manifest, consulta il tutorial Tempo di lettura che spiega in modo più dettagliato i metadati e le icone dell'estensione.

Crea una cartella images, quindi scarica le icone al suo interno.

Passaggio 2: crea e personalizza il popup

L'API Action controlla l'azione dell'estensione (icona della barra degli strumenti). Quando l'utente fa clic su l'azione dell'estensione, verrà eseguito del codice o verrà aperto un popup, come in questo caso. Inizia con con la dichiarazione del popup in manifest.json:

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

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

<!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, apporta uno stile al popup. Crea un file popup.css e aggiungi il codice seguente:

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, interrogare, modificare e ridisporre le schede nella del browser.

Richiedi autorizzazione

Molti metodi dell'API Tabs possono essere utilizzati senza richiedere alcuna autorizzazione. Tuttavia, dobbiamo accedere alla title e alla URL delle schede; queste proprietà sensibili richiedono l'autorizzazione. Potremmo richiedere l'autorizzazione "tabs", ma questo consentirebbe l'accesso alle proprietà sensibili di tutte le schede. Poiché gestiamo solo schede di un sito specifico, richiederemo autorizzazioni host limitate.

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

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

💡 Quali sono le principali differenze tra l'autorizzazione per le schede e le autorizzazioni dell'host?

Sia l'autorizzazione "tabs" sia le autorizzazioni dell'host presentano degli 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. Pertanto, se richiedi questa autorizzazione, Chrome mostrerà il seguente messaggio di avviso al momento dell'installazione:

Finestra di dialogo di avviso di autorizzazione per le 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. Al momento dell'installazione, gli utenti vedranno il seguente messaggio di avviso:

Finestra di dialogo di avviso relativa all&#39;autorizzazione dell&#39;host

Questo avviso può creare allarme 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 popup.js e aggiungi il codice seguente:

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

💡 Posso usare le API di Chrome direttamente dal popup?

Un popup e altre pagine di estensioni possono chiamare qualsiasi API di Chrome perché sono pubblicate dalla lo 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. Quindi, quando un utente fa clic su un elemento dell'elenco, imposta lo stato attivo su quella scheda utilizzando tabs.update() e porta la finestra in primo piano utilizzando 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 Collator utilizzato per ordinare l'array di schede in base alla lingua preferita dell'utente.
  • Il tag modello utilizzato per definiscono un elemento HTML che può essere clonato anziché utilizzare document.createElement() per creare ciascun elemento.
  • Il costruttore di 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 scegliere uno sfondo colore. Aggiungi l'autorizzazione "tabGroups" al file manifest aggiungendo il codice evidenziato:

{
  "permissions": [
    "tabGroups"
  ]
}

In popup.js, aggiungi il seguente codice per creare un pulsante che raggruppa tutte le schede utilizzando tabs.group() e spostarle 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 gestione schede: manifest.json, popup.js, popup.css, popup.html e cartella images.

Caricare 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 finestre diverse:

Fai clic sul popup. Dovrebbe avere il seguente aspetto:

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

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

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

🎯 Potenziali miglioramenti

In base a quanto hai appreso oggi, prova a implementare una delle seguenti opzioni:

  • Personalizza il foglio di stile del 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!

Complimenti per aver completato questo tutorial 🎉. Continua a sviluppare le tue competenze completando tutorial su questa serie:

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

Continua a esplorare

Ci auguriamo che la creazione di questa estensione di Chrome sia stata di tuo gradimento e che non vediamo l'ora di continuare a utilizzare Chrome percorso di apprendimento per lo sviluppo. Ti consigliamo il seguente percorso di apprendimento: