Programma e crea estensioni per Chrome

Questo tutorial sarà diviso in 3 sezioni: Una prima sezione in cui spiegheremo vari concetti riguardanti le estensioni in Chrome, la loro struttura e la creazione di base di un'estensione. Nella seconda sezione, ci concentreremo sulla creazione di estensioni per questo ottimo browser come Google Chrome, facendo diversi esempi pratici. Infine, nella terza sezione spiegheremo le opzioni avanzate durante la creazione di estensioni e come pubblicarle nel webstore di Google Chrome in modo che sia disponibile al pubblico.

Cosa sono le estensioni in Google Chrome?Le estensioni sono piccoli programmi in grado di modificare e migliorare le funzionalità del browser, in questo caso Chrome. Questi sono sviluppati utilizzando tecnologie web come HTML, Javascript e CSS.

Le estensioni hanno poca o nessuna interfaccia utente. Ad esempio, l'immagine qui sotto mostra l'icona di un lucchetto che quando viene cliccato apre una piccola interfaccia.

Questa particolare estensione viene utilizzata per crittografare e decrittografare le tue e-mail con una chiave PGP. Le estensioni sono file impacchettati in uno, che l'utente scarica e installa. Questa confezione, a differenza delle normali applicazioni web, non ha bisogno di dipendere dal contenuto web.

Come discusso sopra, le estensioni ti consentono di aggiungere funzionalità a Chrome senza immergerti in profondità nel codice nativo. È possibile creare nuove estensioni con le tecnologie di base con cui lavora la maggior parte dei programmatori di sviluppo web: HTML, CSS e Javascript.

1. Come creare e programmare l'estensione di Chrome

Per iniziare, creeremo una semplice estensione che recupera un'immagine da Google utilizzando l'URL della pagina corrente come termine di ricerca. Lo faremo implementando un elemento dell'interfaccia utente che chiamiamo chrome.browserAction, che ci consente di posizionare un'icona proprio accanto al menu Chrome, su cui puoi fare clic per un accesso rapido. Cliccando su quell'icona si aprirà una finestra pop-up contenente un'immagine ottenuta dalla pagina corrente, che avrà questo aspetto:

Per iniziare la nostra pratica, creeremo una directory chiamata Visualizzatore di immagini, all'interno di questo includeremo tutti i file con cui lavoreremo. Come editor di sviluppo puoi utilizzare quello che preferisci, nel mio caso utilizzerò Chrome Dev Editor, che puoi scaricare al seguente indirizzo:

Editor di sviluppo di Chrome

La prima cosa di cui avremo bisogno è creare un file manifest chiamato manifest.json. Questo manifest non è altro che un file di metadati in formato JSON che contiene proprietà come nome, descrizione, numero di versione della sua estensione e così via. A un livello avanzato, lo useremo per dichiarare a Chrome cosa farà l'estensione e le autorizzazioni necessarie per fare determinate cose.

Il formato del file manifest è il seguente:

 {// Richiesto "manifest_version": 2, "name": "My Extension", "version": "versionString", // Consigliato "default_locale": "es", "description": "Una descrizione in testo semplice", " icone ": {…}, // Seleziona una (o nessuna)" browser_action ": {…}," page_action ": {…}, // Opzionale" autore ":…," automazione ":…," sfondo ": {// Consigliato "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," comandi ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convertito_from_user_script ":…," compresenza ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // percorso / a / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spanning o split "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " piattaforme ":…," plugin ": […]," requisiti ": {…}," sandbox ": […]," short_name ":" Short Name "," firma ":…," controllo ortografico ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //percorso/a/updateInfo.xml", "nome_versione ":" aString "," web_accessible_resources ": […]} 

Successivamente descriverò la funzione che soddisfa le etichette più importanti:

A richiesta:

• manifest_version: È la versione manifest, è rappresentata da un numero intero che specifica la versione del formato del file. A partire da Chrome 18, gli sviluppatori devono specificare il numero 2.

• patata dolce: È il nome che avrà la tua estensione. Deve essere composto da un massimo di 45 caratteri, il nome è l'elemento di definizione principale dell'estensione ed è un campo obbligatorio. Viene visualizzato nei seguenti luoghi:

a) Nella scatola di installazione.
b) Nell'interfaccia utente in cui è amministrato l'interno.
c) Nel negozio virtuale di Chrome.

• versione: Deve essere composto da uno a quattro numeri interi separati da punti che identificano la versione dell'estensione. Ecco alcuni esempi di versioni valide:

"Versione 1"
"Versione": "1.0"
"Versione": "2.10.2"
"Versione": "3.1.2.4567"

Consigliato:

• default_locale: Specifica la sottodirectory di _locales (lingue) che contiene le stringhe predefinite per questa estensione. Devi inserire tutte le stringhe visibili all'utente all'interno di un file chiamato message.json. Ogni volta che includi una nuova lingua, devi aggiungere un nuovo file messaggi.json nella directory _locales / localecode dove localecode è il codice della lingua, così come en è l'inglese e sta per la lingua spagnola.

Un esempio di estensione internazionalizzata con supporto per inglese (en), spagnolo (es) e coreano (ko), sarebbe il seguente:

• descrizione: Comprende una stringa in testo normale (senza HTML o altro formato) con un massimo di 132 caratteri che descrive la funzionalità dell'estensione.

• Icone: Consente di aggiungere una o più icone che rappresentano l'estensione. Dovrebbe essere sempre fornita un'icona di 128x128px. Questo verrà utilizzato durante l'installazione e nel Chrome Web Store. Le estensioni devono anche fornire un'icona 48 x 48, che viene utilizzata nella pagina di gestione delle estensioni di Chrome (chrome: // extensions). Puoi anche specificare un'icona 16 x 16 da utilizzare come favicon per le pagine di un'estensione.

Le icone dovrebbero essere generalmente in formato PNG, perché ha il miglior supporto per la trasparenza. Tuttavia, possono essere in qualsiasi formato supportato da WebKit, inclusi BMP.webp, GIF.webp, ICO e JPEG.webp. Ecco un esempio della specifica delle icone:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Esempio

Selezionane uno (o nessuno):

• browser_azione: Usa browser_action per inserire le icone nella barra degli strumenti principale nella parte superiore del browser Google Chrome, a destra della barra degli indirizzi. Inoltre puoi aggiungere tooltip (messaggio mobile), badge (testo mobile sull'icona) e popup (finestra mobile).

Esempio di utilizzo browser_action:

 {"name": "La mia estensione",… "browser_action": {"default_icon": {// opzionale "19": "images / icon19.png.webp", // opzionale "38": "images / icon38.png.webp" // facoltativo}, "default_title": "Google Mail", // facoltativo; mostra un tooltip "default_popup": "popup.html" // opzionale}, …}

• pagina_azione: Usa questa API per posizionare la tua icona nella barra degli indirizzi.

Esempio di utilizzo:

 {"name": "La mia estensione",… "page_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // facoltativo}, "default_title": "Google mail", // facoltativo; mostra nella descrizione "default_popup": "popup.html" // opzionale},…} 

Ex

Opzionale:

• Sfondo: Un'esigenza comune nelle estensioni è quella di avere un'unica pagina per l'esecuzione di lunghe sequenze per gestire alcune attività o stati. Questa è una pagina HTML che viene eseguita insieme all'estensione. Si avvia quando l'estensione inizia a essere eseguita e ne attiva solo un'istanza alla volta. Invece di utilizzare Sfondo, si consiglia di utilizzare una pagina evento.

In un'estensione tipica con una pagina in background, l'interfaccia utente, ad esempio, browser_action o page_action e alcune opzioni di pagina fungono da vista dell'estensione. Quando la vista necessita di conoscere uno stato (chiusa la finestra, aggiornata la pagina…), fa la richiesta dello stato alla pagina che si trova come Sfondo. Quando la pagina Sfondo notifica che c'è stato un cambiamento nello stato, informa la vista di essere aggiornata o di intraprendere un'azione.

Il suo formato è il seguente:

 {"name": "La mia estensione",… "background": {"scripts": ["background.js"]},…} 

Formato

• Pagine degli eventi: Prima di definire il seguente attributo, è necessario spiegare di cosa trattano le Pagine Evento. Un'esigenza comune per le applicazioni e le estensioni è quella di disporre di un singolo script di lunga durata per gestire alcune attività o stati. Questo è l'obiettivo delle pagine degli eventi. Le pagine degli eventi vengono caricate solo quando necessario. Quando non sta facendo qualcosa attivamente, viene scaricato dalla cache, liberando memoria e altre risorse di sistema.

I vantaggi in termini di prestazioni sono significativi, soprattutto sui dispositivi a bassa potenza. Questo è il motivo per cui si consiglia di utilizzare più pagine di eventi rispetto a Sfondo.

La dichiarazione di una pagina evento nel file manifest sarebbe la seguente:

 {"name": "La mia estensione", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Come puoi vedere, la differenza che ha con Background è l'attributo persistente, che avrà lo stato falso.

• chrome_settings_overrides: Viene utilizzato per sovrascrivere alcune configurazioni selezionate in Chrome. Questa API è disponibile solo per Windows.

Alcune di queste configurazioni possono essere la Homepage (home page del browser, Search Provider (il provider di ricerca), ecc.

Esempio di configurazione:

 {"name": "La mia estensione",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword " : "parola chiave .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/favicon. ico" , "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {searchTerms} "," search_url_post_params ":" search_lang = __ MSG_url_domain__ "," suggerire_url_post_params ":" suggerire_lang = __ MSG_url_lang = __ ": MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__","MSG_url_domain_domain} .noo.__MSG_url_url_ ? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …} 

• chrome_ui_overrides: Questa proprietà dell'estensione viene utilizzata per sovrascrivere alcune impostazioni nell'interfaccia utente di Chrome. Come ad esempio i marcatori. La sua configurazione è la seguente:

 {"name": "La mia estensione",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…} 

In questo caso, viene eliminata la stella che il browser ha per i preferiti.

• chrome_url_overrides: Questo è un modo per sostituire il file HTML dall'estensione per una pagina fornita normalmente dal browser Google Chrome. Inoltre, puoi anche sovrascrivere il suo codice CSS e JavaScript.

Un'estensione con questa configurazione può sostituire una delle seguenti pagine di Chrome:

• Gestore segnalibri: È la pagina che compare quando l'utente sceglie l'opzione dal menu Gestione segnalibri nel menu Chrome o per Mac, la voce Gestione segnalibri nel menu Segnalibri.

INGRANDIRE

• Storia (storia): È la pagina che compare quando l'utente sceglie la cronologia dal menu Chrome oppure, su Mac, la voce mostra la cronologia completa dal menu che si trova nell'opzione cronologia.

INGRANDIRE

• Nuova scheda (nuova scheda): È la pagina che appare quando l'utente crea una nuova scheda o finestra dal browser. Puoi anche accedere a questa pagina inserendo il seguente indirizzo nella barra degli indirizzi: chrome: // newtab

INGRANDIRE

NotaUna singola estensione può sovrascrivere solo una pagina. Ad esempio, un'estensione non può sovrascrivere i segnalibri e, di conseguenza, la pagina della cronologia.

 {"name": "My extension",… "chrome_url_overrides": {"newtab": "mypage.html" // le opzioni sono newtab, history, bookmarks},…}

• comandi: Questa API di comando viene utilizzata per aggiungere le scorciatoie da tastiera che attivano un'azione nella tua estensione. Ad esempio, un'azione per aprire l'azione del browser o inviare un comando all'estensione.

 {"name": "La mia estensione",… "commands": {"toggle-feature-foo": {"suggerted_key": {"default": "Ctrl + Maiusc + Y", "mac": "Comando + Maiusc + Y "}," descrizione ":" Attiva/disattiva funzione foo "}," _execute_browser_action ": {" suggerito_tasto ": {" windows ":" Ctrl + Maiusc + Y "," mac ":" Comando + Maiusc + Y ", "chromeos": "Ctrl + Maiusc + U", "linux": "Ctrl + Maiusc + J"}}, "_execute_page_action": {"suggered_key": {"default": "Ctrl + Maiusc + E", "windows ":" Alt + Maiusc + P "," mac ":" Alt + Maiusc + P "}}},…} 

Nella tua pagina Sfondo, puoi associare un controller per ciascuno dei comandi definiti in manifest.js (ad eccezione di '_execute_browser_action'S'_execute_page_action') attraverso onCommand.addListener.

Ad esempio:

 chrome.commands.onCommand.addListener (funzione (comando) {console.log ('Comando premuto:', comando);}); 

• content_script: Sono file javascript che vengono eseguiti nel contesto delle pagine web. Utilizzando il Document Object Model (DOM) standard, possono leggere i dettagli delle pagine Web delle visite del browser o apportarvi modifiche.

 {"name": "La mia estensione",… "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…} 

• content_script: Per rendere le nostre estensioni più sicure ed evitare potenziali problemi di scripting tra siti, il sistema di estensioni di Chrome ha incorporato il concetto generale di Politica di sicurezza dei contenuti (CSP). Questo introduce criteri molto rigidi che renderanno le estensioni più sicure per impostazione predefinita. In generale, CSP funziona come un meccanismo di lista bianca e nera per le risorse caricate o eseguite dalle sue estensioni.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

Questi erano alcuni degli attributi più importanti. Per la nostra pratica iniziale definiremo il nostro file manifest.json come segue:

 {"manifest_version": 2, "name": "Esempio di avvio", "description": "Questa estensione mostra un'immagine da Google Images della pagina corrente", "version": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permessi ": [" activeTab "," https://www.googleapis.com/ "]}

Come puoi vedere nel nostro manifest di esempio, abbiamo dichiarato un browser_action, l'autorizzazione activeTab per vedere l'URL della scheda corrente e l'host è stato autorizzato, in questo modo è possibile accedere all'API di Google per eseguire la ricerca di immagini esterne.

A loro volta, vengono trovati 2 file di risorse quando si definisce browser_action: icon.png.webp e popup.html. Entrambe le risorse devono esistere all'interno del pacchetto di estensione, quindi creiamole ora:

• icona.png.webp Verrà visualizzato accanto al riquadro multifunzione, in attesa dell'interazione dell'utente. È solo un file PNG 19px x 19px.

• popup.html verrà visualizzato nella finestra pop-up creata in risposta al clic dell'utente sull'icona. È un file HTML standard e il suo contenuto è il seguente:

 Per iniziare Popup dell'estensioneINGRANDIRE
2. Assicurati che la casella di controllo della modalità sviluppatore nell'angolo in alto a destra sia selezionata.

3. Fare clic su Carica estensione decompressa (decompressa) per visualizzare una finestra di dialogo per la selezione dei file.
INGRANDIRE
4. Passa alla directory in cui si trovano i file di estensione e selezionala.
In alternativa puoi trascinare la directory che contiene il tuo progetto e rilasciarla nella finestra delle estensioni di Chrome. Questo caricherà l'estensione nel tuo browser.

In questo modo avremo realizzato una semplice estensione per google Chrome. Nella nostra prossima puntata approfondiremo la costruzione di estensioni in combinazione con framework di sviluppo come jquery e Bootstrap, che ci consentiranno di semplificare il nostro sviluppo.

2. Esempio di estensioni per Chrome

In questa sezione faremo diversi esempi che ci permetteranno di comprendere appieno molte delle funzionalità che esistono quando si costruisce un'estensione per Google Chrome.

Pratica 1 - Sfondo blu
In questo esempio creeremo una semplice estensione in cui impareremo come modificare il contenuto delle pagine che carichiamo nel nostro browser. In questo caso, modificheremo il colore di sfondo della pagina caricata e lo cambieremo in blu.
Come ho spiegato nella prima parte di questo tutorial puoi utilizzare qualsiasi IDE di sviluppo, nel mio caso utilizzerò Chrome Dev Editor.
INGRANDIRE
Per iniziare, creeremo una nuova directory con il nome Sfondo blu e creeremo un progetto con lo stesso nome.
INGRANDIRE
INGRANDIRE
Dentro creeremo il nostro primo file manifest.json che conterrà le definizioni della nostra estensione.
INGRANDIRE
Il nostro archivio manifest.json deve contenere il seguente codice:
 {"manifest_version": 2, "name": "Blue Background", "description": "Questa estensione ha cambiato il colore di sfondo della pagina corrente", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Rendi questa pagina Blu"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }} 
Poiché la nostra estensione è semplice, conterrà solo un'icona che, se premuta, eseguirà un'azione. Come puoi vedere nel file manifest.json definiamo un nome e la sua descrizione, nel browser_action Definiamo l'icona che verrà visualizzata nella barra del nostro browser Google Chrome e un titolo che verrà visualizzato quando il puntatore del mouse verrà posizionato su detta icona. Per quanto riguarda i permessi definiremo che verrà fatto solo nella scheda attiva. Il file che verrà eseguito in background sarà il nostro file background.js che non sarà persistente, poiché verrà eseguito solo quando faremo clic sull'estensione.

Creiamo la nostra icona e la salviamo all'interno della directory del progetto come definito in manifest.json. In questo caso nella radice del progetto.
Quindi creiamo un file JavaScript chiamato background.js all'interno della stessa directory con il seguente codice:
 // chiamato quando l'utente fa clic sull'estensione chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: ' document.body.style.backgroundColor = "blu"'});}); 
Lasciando l'intero progetto come segue:

INGRANDIRE
Per eseguire la nostra estensione, tutto ciò che devi fare è premere il pulsante di riproduzione che si trova nella barra in alto del Chrome Dev Editor.
INGRANDIRE
Premendolo l'estensione verrà caricata automaticamente nel browser Google Chrome.

Vediamo la nostra estensione in azione, cliccando sull'icona che ho creato (sfondo blu con la lettera A in bianco), la pagina che ho caricato nella scheda corrente, nel mio caso il mio account utente in Solvetic (http: // www .solvetic… .berth-ramncgev /) cambierà il suo sfondo in blu. Va notato che cambierà solo il colore dell'elemento BODY, e non i DIV che contiene, poiché è così che l'ho definito nel mio background.js.
INGRANDIRE
Esercitazione 2 - Colore multiplo
Per questo esempio mostrerò come semplificare il nostro lavoro dall'IDE di sviluppo e dal codice. Nel Editor di sviluppo di Chrome, facciamo clic sul pulsante +, per creare un nuovo progetto, questa volta cambieremo il tipo di progetto, selezionando l'opzione JavaScript Chrome App.
INGRANDIRE
Come puoi vedere, genera automaticamente l'intera struttura del nostro progetto. Con il nostro file manifest.json con le definizioni più comuni.
INGRANDIRE
A questo file aggiungeremo una breve descrizione sull'etichetta descrizione inserendo il testo che desideri, nel mio caso "Estensione che consente di cambiare il colore di sfondo". Per questo progetto creeremo 2 icone, una di 16x16 pixel e l'altra di 128x128 pixel, come puoi vedere nella struttura, queste verranno salvate all'interno della directory risorse.
Aggiungeremo il seguente codice sotto il tag versione_chrome_minima:
 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Cambia la pagina in più colori.", " default_popup ":" popup.html "}, 
Come puoi vedere, stiamo definendo un popup o una vista che conterrà tutto l'html che l'utente vedrà quando farà clic sulla nostra estensione. Quindi aggiungeremo il seguente codice:
 "content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}] 
content_scripts- Contiene i file JavaScript (js) e fogli di stile (css) che verranno eseguiti nel contesto della pagina web. Può contenere le seguenti proprietà:


partite: Obbligatorio. Specifico in quale pagina verrà iniettato lo script.


escludere_corrispondenze: Opzionale. Pagine che verranno escluse in modo che lo script non venga iniettato.


match_about_blank: Opzionale. Questo valore è booleano e indica se lo script verrà inserito nella pagina vuota (about: blank e about: srcdoc).


css: Opzionale. È una disposizione che indica l'elenco dei file css che verranno inseriti nella pagina richiesta nel browser.


js: Opzionale. È un accordo con l'elenco dei file JavaScript che verranno inseriti nella pagina richiesta nel browser.


corri a: Opzionale. È una stringa di testo che controlla quando verranno caricati i file js. Il suo valore può essere:
document_start: i file vengono iniettati dopo qualsiasi file css, ma prima che venga creato qualsiasi DOM o venga eseguito qualsiasi altro script.


document_end: i file vengono iniettati immediatamente dopo il completamento del DOM, ma prima che vengano caricate risorse come immagini e frame.


document_idle: Il browser sceglie il momento in cui iniettare gli script tra document_end e subito dopo che window.onload attiva l'evento.Questa opzione è quella configurata di default.

Alla fine del nostro file manifest.json Dovrebbe essere il seguente:
INGRANDIRE
Come puoi vedere, abbiamo aggiunto un paio di cose nuove, nella proprietà css Abbiamo definito il framework Bootstrap che non faciliterà lo sviluppo a livello di stile. Seguito sulla proprietà js Definiamo la libreria JavaScript JQUERY, che non ci permetterà di lavorare in modo più semplice e veloce tutto ciò che ha a che fare con JavaScript. Il nostro file index.html dovrebbe essere simile a questo:
 Colore multiplo popuprossoBluVerdeGiallo
Nel file index.html facciamo semplicemente i riferimenti ai nostri file Bootstrap, Jquery e main.js. Nel corpo definiamo un contenitore bootstrap con i suoi div che serviranno da pulsanti per le diverse opzioni di colore.

Per il file main.js utilizzeremo l'evento click che verrà eseguito alla pressione del tasto del mouse su ogni classe "col-md-12", prendendo il colore di sfondo dell'elemento che è stato selezionato e assegnandolo al corpo del pagina è stata aperta. Quindi verrà eseguito l'evento window.close(); che chiudono la finestra della nostra estensione. Il codice definito per main.js è il seguente:
 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); 
Il risultato durante l'esecuzione della nostra estensione saremo in grado di visualizzare l'icona che abbiamo creato per essa nella barra superiore.


Facendo clic sulla nostra estensione verrà visualizzato il seguente popup:

E quando si seleziona una delle opzioni il risultato sarà il seguente:
INGRANDIRE
Esercizio 3 - Storia principale
In questo esempio applicheremo tutto quanto visto sopra, creeremo un'estensione che quando cliccheremo su di essa, ci mostrerà un popup con l'elenco delle pagine più visitate dal nostro browser, dando accesso diretto a quelle pagine. L'unica cosa diversa in questo esempio è che chiederemo l'autorizzazione a una delle API di Chrome per accedere alle pagine più visualizzate da Chrome. Il nome di questa API è chrome.topSites.
Per iniziare stiamo per Editor di sviluppo di Chrome e abbiamo creato il nostro progetto con il nome InizioStorico e nel tipo di progetto selezioniamo l'opzione JavaScript Chrome App.

Allora il nostro file manifest.json Dovrebbe essere il seguente:
 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Mostra l'elenco delle pagine più visualizzate nel nostro browser", "version": "0.0.1", " minimi_chrome_version ":" 38 "," permessi ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" corrisponde a ": [" "]," css ": [" asset / bootstrap / css / bootstrap.min.css "]," js ": [" asset / jquery.min.js "," main.js "], "run_at": "document_start"}]} 
Come puoi vedere, aggiungiamo un nuovo attributo al manifest per poter ottenere l'autorizzazione sull'API di Chrome: Dichiarare i permessi, è utilizzato nella maggior parte delle API di Chrome nella tua estensione, devi prima dichiararlo inserendo il campo permessi nel tuo manifesto. Ogni permesso può essere una stringa di testo appartenente al seguente elenco (diviso in 3 immagini):




Per quanto riguarda il nostro file popup.html Dovrebbe essere il seguente:
 Colore multiplo popup
Il nostro archivio main.js che conterrà la query API e la gestione dell'evento click, sarà rappresentato come segue:
 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Append ('
'+ URL più visitati [i] .title +'
'); } $ (". links"). bind ("click", openpage); } chrome.topSites.get (buildPopupDom); }); 
A livello strutturale, il nostro progetto avrebbe dovuto essere il seguente:


Quando eseguiamo la nostra estensione saremo in grado di vedere un'icona nella parte superiore del browser, che nel mio caso lo disegna in blu, quando si fa clic su di esso, si apre un popup con l'elenco delle pagine a cui ho avuto accesso di più dal mio browser ordinato in base al numero di visite che ho effettuato.
INGRANDIRE
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo