google-chrome-extension Tutorial
Iniziare con google-chrome-extension

Osservazioni

Esempio minimo assoluto

Qualsiasi estensione di Chrome inizia come un'estensione decompressa : una cartella contenente i file dell'estensione.

Un file che deve contenere è manifest.json , che descrive le proprietà di base dell'estensione. Molte delle proprietà in quel file sono facoltative, ma qui è un file manifest.json minimo assoluto:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Crea una cartella (per esempio, myExtension ) da qualche parte, aggiungi manifest.json come elencato sopra ad essa.

Quindi, devi caricare l'estensione in Chrome.

1. Apri chrome://extensions/ pagina, accessibile tramite Menu> Altri strumenti> Estensioni .
2. Abilita la Modalità Sviluppatore con una casella di controllo in alto a destra, se non è già abilitata.
3. Fai clic sul pulsante Carica estensione scompattata ... e seleziona la cartella myExtension creata.

Questo è tutto! La tua prima estensione è caricata da Chrome:

Certo, non fa ancora niente, quindi è un buon momento per leggere una panoramica dell'architettura di estensione per iniziare ad aggiungere le parti di cui hai bisogno.

Importante: quando si apportano modifiche all'estensione, non dimenticare di tornare a chrome://extensions/ e premere il link Ricarica per l'interno dopo aver apportato le modifiche. In caso di script di contenuto, ricaricare anche la pagina di destinazione.

Pagina di sfondo

Le pagine di sfondo sono pagine implicite che contengono script in background. Uno script in background è un singolo script a esecuzione prolungata per gestire alcune attività o stati. Esiste per tutta la durata della tua estensione e solo una sua istanza alla volta è attiva.

Puoi dichiararlo così nel tuo manifest.json :

"background": {
    "scripts": ["background.js"]
}

Una pagina di sfondo verrà generata dal sistema di estensione che include ciascuno dei file elencati nella proprietà degli script.

Hai accesso a tutte chrome.* API chrome.* consentite.

Esistono due tipi di pagine in background: pagine di sfondo persistenti sempre aperte e pagine di eventi aperte e chiuse secondo necessità.

Se vuoi che la tua pagina di sfondo non sia persistente, devi semplicemente impostare persistent -flag su false:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

Questo script in background è attivo solo se viene attivato un evento su cui è registrato un listener. In generale si utilizza un addListener per la registrazione.

Esempio: l'app o l'estensione viene prima installata.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Script di contenuti

Uno script di contenuto è un codice di estensione che viene eseguito insieme a una pagina normale.

Hanno accesso completo al DOM della pagina Web (e sono, di fatto, l'unica parte dell'estensione che può accedere al DOM di una pagina ), ma il codice JavaScript è isolato, un concetto chiamato Mondo isolato . Ogni estensione ha il proprio contesto JavaScript script di script invisibile agli altri e alla pagina, evitando conflitti di codice.

Definizione di esempio in manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

Gli attributi hanno il seguente significato:

Gli script di contenuto possono anche essere iniettati su richiesta usando chrome.tabs.executeScript , che si chiama Iniezione programmatica .

Guarda anche

• Documentazione ufficiale: contenuti script
• Documentazione Overflow dello stack: script di contenuto

Pagina delle opzioni

Le pagine delle opzioni vengono utilizzate per dare all'utente la possibilità di mantenere le impostazioni per il proprio interno.

Versione 2

Da Chrome 40 c'è la possibilità di avere la pagina delle opzioni come un dialogo predefinito su chrome: // extensions .

Il modo per definire una pagina di opzioni in manifest.json è come il seguente:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Questa pagina delle opzioni si comporterà come un dialogo, si aprirà come un popup, dove verrà visualizzato il file options.html . chrome_style applicherà un foglio di stile Chrome per motivi di coerenza dello stile alla pagina delle opzioni.

Le opzioni verranno automaticamente esposte tramite il menu di scelta rapida del pulsante di estensione o la pagina chrome: // extensions .

Puoi anche aprire la pagina delle opzioni a livello di programmazione , ad esempio da un'interfaccia utente popup:

chrome.runtime.openOptionsPage();

Versione 1 ( deprecata )

Definizione di esempio in manifest.json :

"options_page": "options.html"

Si consiglia di utilizzare la Versione 2 poiché il comportamento options_ui verrà presto applicato alle pagine delle opzioni della Versione 1.

Conservazione

Normalmente le impostazioni devono persistere, quindi si consiglia l'uso dell'API chrome.storage . Le autorizzazioni possono essere dichiarate in questo modo in manifest.json :

"permissions": [
   "storage"
]

Documentazione ufficiale

• Pagina Opzioni - Versione 1
• Pagina Opzioni - Versione 2
• API di archiviazione

Crea una nuova scheda

Nel codice dell'estensione puoi utilizzare qualsiasi chrome.* API se hai decalcificato le autorizzazioni richieste. Inoltre, alcune API funzionano solo da pagine in background e alcune API funzionano solo da script di contenuto.

Puoi utilizzare la maggior parte dei metodi chrome.tabs dichiarando qualsiasi autorizzazione. Ora ci concentriamo su chrome.tabs.create

_{Nota: la nuova scheda verrà aperta senza alcun avviso popup .}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

Puoi saperne di più su tab object, nello sviluppatore ufficiale di Chrome