Se ti stai chiedendo come creare un’estensione Chrome, extensiondocumentation di Chrome è ottimo per le implementazioni di base. Tuttavia, per utilizzare più advancedfeatures richiede un sacco di Googling e Stack Overflow. Facciamo un’estensione intermedia di Chrome che interagisce con la pagina: troverà il primo link esterno sulla pagina e lo aprirà in una nuova scheda.

manifesto.json

Il manifesto.il file json dice a Chrome informazioni importanti su yourextension, come il suo nome e le autorizzazioni di cui ha bisogno.,

L’estensione più semplice possibile è una directory con un file manifest.json.Creiamo una directory e mettiamo il seguente JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

Questo è il più semplice possibile manifest.json, con tutti i campi obbligatori compilatiin. manifest_version dovrebbe essere sempre 2, perché la versione 1 non è supportata da gennaio 2014. Finora la nostra estensione non fa assolutamente nulla, ma lo carichiamo comunque in Chrome.,

Carica la tua estensione in Chrome

Per caricare la tua estensione in Chrome, aprichrome://extensions/ nel tuo browserand fai clic su “Modalità sviluppatore” in alto a destra. Ora fai clic su “Carica unpackedextension…” e seleziona la directory dell’estensione. Ora dovresti vedere yourextension nella lista.

Quando cambi o aggiungi il codice nella tua estensione, torna a questa pagina e scarica la pagina. Chrome ricaricherà l’estensione.

Script di contenuto

Uno script di contenuto è “un file JavaScript che viene eseguito nel contesto di pagine web.,”Ciò significa che uno script di contenuto può interagire con le pagine web che il browservisits. Non tutti i file JavaScript in un’estensione Chrome possono farlo; vedremo più tardi.

Aggiungiamo uno script di contenuto chiamatocontent.js: 

// content.js alert("Hello from your Chrome extension!")

Per iniettare lo script, dobbiamo dire al nostro filemanifest.json.,

Aggiungi questo al tuomanifest.json file: 

"content_scripts": , "js": } ]

Questo dice a Chrome di iniettarecontent.js in ogni pagina che visitiamo usando lo speciale<all_urls> Modello URL. Se vogliamo iniettare lo script solo su alcunipagine, possiamo usare i modelli di corrispondenza. Ecco alcuni esempi di valori per"matches":

Ricarica l’estensione Chrome. Ogni singola pagina che visiti ora apre un avviso. Let’slog il primo URL sulla pagina, invece.,

La registrazione dell’URL

jQuery non è necessaria, ma rende tutto più semplice. Innanzitutto, scarica l’avversione di jQuery dal CDN di jQuery e inseriscilo nella cartella dell’estensione. Ho scaricato l’ultima versione minificata, jquery-2.1.3.min.js. Per caricarlo, aggiungere a manifest.jsonprima di"content.js"., Il vostro intero manifest.json dovrebbe looklike questo:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

Ora che abbiamo jQuery, lo si può usare per registrare l’URL della prima esterna linkon la pagina content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

si noti che non abbiamo bisogno di utilizzare jQuery per verificare se il documento è stato caricato. Bydefault, Chrome inietta script di contenuto dopo il DOM è completo.

Provalo-dovresti vedere l’output nella tua console in ogni pagina che visiti.,

Azioni del browser

Quando un’estensione aggiunge una piccola icona accanto alla barra degli indirizzi, questa è un’azione browseraction. La tua estensione può ascoltare i clic su quel pulsante e poi dosomething.

Metti l’icona.png dal tutorial di estensione di Google nella tua cartella di estensione eaggiungi questo a manifest.json:

"browser_action": { "default_icon": "icon.png" }

Per utilizzare l’azione del browser, dobbiamo aggiungere il passaggio del messaggio.

Messaggio che passa

Uno script di contenuto ha accesso alla pagina corrente, ma è limitato nelle API a cui può accedere., Ad esempio, non può ascoltare i clic sull’azione del browser. Abbiamo bisogno di aggiungere un diverso tipo di script alla nostra estensione, uno script in background,che ha accesso a tutte le API di Chrome ma non può accedere alla pagina corrente. AsGoogle lo mette:

Gli script di contenuto hanno alcune limitazioni. Non possono utilizzare chrome.* API, ad eccezione di extension, i18n, runtime e storage.,

Quindi lo script di contenuto sarà in grado di estrarre un URL dalla pagina corrente, ma dovrà consegnare quell’URL allo script di sfondo per fare qualcosa di utile con esso. Per comunicare, useremo ciò che Google chiama message passing, che consente agli script di inviare e ascoltare i messaggi. È l’unico modo per gli script di contenuto e gli script di sfondo per interagire.,

Aggiungi quanto segue per dire amanifest.jsonsullo script di sfondo:

"background": { "scripts": }

Ora aggiungeremobackground.js:

Questo invia un payload JSON arbitrario alla scheda corrente. Le chiavi di JSONpayload possono essere qualsiasi cosa, ma ho scelto "message" per semplicità. Ora abbiamo bisogno di ascoltare quel messaggio in content.js:

Si noti che tutto il nostro codice precedente è stato spostato nel listener, quindi viene eseguito solo quando viene ricevuto il payload., Ogni volta che si fa clic sull’icona browseraction, si dovrebbe vedere un URL ottenere registrato alla console. Se non funziona, prova a ricaricare l’estensione e quindi a ricaricare la pagina.

l’Apertura di una nuova scheda

E ‘ possibile utilizzare il chrome.tabs API per aprire una nuova scheda:

chrome.tabs.create({"url": "http://google.com"});

Ma chrome.tabs può essere utilizzato solo con background.js dovremo quindi aggiungere un po’di più il messaggio che passa dal background.js possibile aprire la scheda, ma non può afferrare theURL., Ecco l’idea:

  1. Ascoltare un clic sull’azione del browser in background.js. Quando è selezionato, invia un eventoclicked_browser_action acontent.js.
  2. Quandocontent.js riceve l’evento, afferra l’URL del primo link sulla pagina. Quindi inviaopen_new_tab abackground.js con l’URL toopen.
  3. background.js ascoltaopen_new_tab e apre una nuova scheda con il givenURL quando riceve il messaggio.,

Facendo clic sull’azione del browser si attiveràbackground.js, che invierà un messaggio acontent.js, che invierà un URL abackground.js, che aprirà una nuova scheda con l’URL specificato.

Per prima cosa, dobbiamo dire a content.js di inviare l’URL a background.js., Changecontent.js per usare questo codice:

Ora abbiamo bisogno di aggiungere un po ‘ di codice per dire background.js per ascoltare quell’evento:

Ora quando si fa clic sull’icona dell’azione del browser, si apre una nuova scheda con il primo URL esterno sulla pagina.

Avvolgendolo

L’interocontent.js ebackground.js sono sopra., Ecco il completomanifest.json:

Ed ecco la struttura completa della directory: 

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

Ulteriori informazioni su come creare un’estensione Chrome

Per ulteriori informazioni, prova la documentazione ufficiale dell’estensione Chrome.