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.
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:
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:
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:
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:
- Progettare l'interfaccia utente
- Scoperta sul Chrome Web Store
- Panoramica dello sviluppo delle estensioni
- Formato file manifest
- Pubblicare nel Chrome Web Store
Fai clic sul popup. Dovrebbe avere il seguente aspetto:
Fai clic sul pulsante "Raggruppa schede". Dovrebbe avere il seguente aspetto:
🎯 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:
- La guida per gli sviluppatori contiene decine di link aggiuntivi a documenti pertinenti alla creazione di estensioni avanzate.
- Le estensioni hanno accesso ad API potenti oltre a quelle disponibili sul web aperto. La documentazione sulle API di Chrome illustra ogni singola API.