Inserisci script nella scheda attiva

Per semplificare lo stile della pagina corrente, fai clic sull'icona dell'estensione nella barra degli strumenti.

Panoramica

Questo tutorial crea un'estensione che semplifica lo stile dell'estensione di Chrome e pagine della documentazione del Chrome Web Store per facilitarne la lettura.

In questa guida, spiegheremo come fare:

  • Utilizza il service worker dell'estensione come coordinatore dell'evento.
  • Tutelare la privacy degli utenti con l'autorizzazione "activeTab".
  • Esegui il codice quando l'utente fa clic sull'icona della barra degli strumenti dell'estensione.
  • Inserisci e rimuovi un foglio di stile utilizzando l'API Scripting.
  • Usa una scorciatoia da tastiera per eseguire il codice.

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 focus-mode in cui saranno memorizzati i file dell'estensione. Se 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 includi il codice seguente.

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "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 la sezione "Eseguire script in ogni scheda" 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: inizializza l'estensione

Le estensioni possono monitorare gli eventi del browser in background utilizzando il servizio dell'estensione worker. I service worker sono ambienti JavaScript speciali che gestiscono e terminano quando non sono necessari.

Per prima cosa, registra il service worker nel file manifest.json:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

Crea un file denominato background.js e aggiungi il codice seguente:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Il primo evento che il nostro service worker attenderà è runtime.onInstalled() Questo metodo consente all'estensione di impostare un o completare alcune attività al momento dell'installazione. Le estensioni possono utilizzare l'API Storage e IndexedDB per archiviare lo stato dell'applicazione. In questo caso, tuttavia, poiché gestiamo solo due stati, utilizzeremo il testo del badge dell'azione stesso per monitorare se l'estensione è "ON" o su "OFF".

Passaggio 3: attiva l'azione di estensione

L'azione dell'estensione controlla l'icona dell'estensione nella barra degli strumenti. Ogni volta che l'utente fa clic sull'icona dell'estensione, verrà eseguito del codice (come in questo esempio) o verrà visualizzato un popup. Aggiungi il parametro seguente codice per dichiarare l'azione di estensione nel file manifest.json:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

Usare l'autorizzazione ActiveTab per proteggere la privacy degli utenti

L'autorizzazione activeTab concede all'estensione la capacità temporanea di eseguire il codice sulla scheda attiva. Consente inoltre di accedere alle proprietà sensibili di la scheda corrente.

Questa autorizzazione viene attivata quando l'utente richiama l'estensione. In questo caso, l'utente richiama la dell'estensione facendo clic sull'azione corrispondente.

💡 Quali altre interazioni degli utenti attivano l'autorizzazione Scheda attiva nella mia estensione?

  • Premi una combinazione di scorciatoie da tastiera.
  • Selezione di una voce del menu contestuale.
  • Accettazione suggerimento dalla omnibox.
  • Apro un popup dell'estensione.

L'autorizzazione "activeTab" consente agli utenti di scegliere volutamente di eseguire l'estensione sulla con lo stato attivo; in questo modo protegge la privacy dell'utente. Un altro vantaggio è che attivare un avviso di autorizzazione.

Per utilizzare l'autorizzazione "activeTab", aggiungila all'array di autorizzazioni del manifest:

{
  ...
  "permissions": ["activeTab"],
  ...
}

Passaggio 4: monitora lo stato della scheda corrente

Dopo che l'utente fa clic sull'azione dell'estensione, l'estensione verifica se l'URL corrisponde a una della documentazione. In seguito, controllerà lo stato della scheda corrente e imposterà lo stato successivo. Aggiungi il parametro il seguente codice per background.js:

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

Passaggio 5: aggiungi o rimuovi il foglio di stile

Ora è il momento di cambiare il layout della pagina. Crea un file denominato focus-mode.css e includi il codice seguente:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Inserisci o rimuovi il foglio di stile utilizzando l'API Scripting. Inizia con che dichiara l'autorizzazione "scripting" nel file manifest:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

Infine, in background.js aggiungi il seguente codice per modificare il layout della pagina:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 Posso utilizzare l'API Scripting per inserire il codice anziché un foglio di stile?

Sì. Puoi utilizzare scripting.executeScript() per inserire JavaScript.

(Facoltativo) Assegna una scorciatoia da tastiera

Per divertirti, aggiungi una scorciatoia per attivare o disattivare più facilmente la modalità Niente distrazioni. Aggiungi il parametro "commands" al file manifest.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

La chiave "_execute_action" esegue lo stesso codice dell'evento action.onClicked(), quindi nessun codice aggiuntivo è necessario un codice sorgente.

Verifica che funzioni

Verifica che la struttura dei file del tuo progetto abbia il seguente aspetto:

I contenuti della cartella della modalità focus: manifest.json, background.js, focus-mode.css e images.

Caricare l'estensione localmente

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

Testa l'estensione su una pagina della documentazione

Innanzitutto, apri una delle seguenti pagine:

Poi fai clic sull'azione di estensione. Se hai impostato una scorciatoia da tastiera, puoi provarla premendo Ctrl + B o Cmd + B.

Dovrebbe andare da questo:

Estensione modalità Niente distrazioni disattivata
. Estensione Modalità Niente distrazioni disattivata

In:

Estensione modalità Niente distrazioni ON
. Estensione Modalità Niente distrazioni attivata

🎯 Potenziali miglioramenti

In base a quanto appreso oggi, prova a eseguire una delle seguenti azioni:

  • Migliorare il foglio di stile CSS.
  • Assegna una scorciatoia da tastiera diversa.
  • Modifica il layout del tuo blog o sito di documentazione preferito.

e continua a costruire.

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

Estensione Cosa imparerai a fare
Tempo di lettura Per inserire automaticamente un elemento in un insieme specifico di pagine.
Gestione schede Per creare un popup per la gestione delle schede del browser.

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 farlo percorso di apprendimento per lo sviluppo. Ti consigliamo i seguenti percorsi di apprendimento: