Come creare un'estensione del browser. Come creare un'estensione per Chrome. Creazione della tua estensione per Google Chrome

• Esercitazione

Ci sono già diversi articoli su Habré sulla creazione di estensioni per Chrome; condividerò la mia esperienza, toccando le cose e i luoghi principali in cui ho avuto difficoltà.
Cosa ti serve per creare un'estensione in poche parole:
1) Conoscenza base di Javascript
2) Conoscenza base dell'HTML
3) 5$

Ti mostrerò come creare un'estensione per Chrome utilizzando l'esempio tutto mio, creato per calcolare il “tempo perso” su Internet. Cioè, questa estensione conta il tempo trascorso sui siti con la possibilità di determinare i siti visitati per categoria: tempo utile o tempo perso.

Quindi inizio a creare l'estensione creando una cartella per l'estensione stessa, nella quale inseriremo tutti i file che creeremo. Lo chiamerò "tempo perduto". Successivamente, creo un file manifest.json, assomiglia a questo:

manifest.json
( "manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": ( "128": ""), "content_scripts": [ ( "matches": [ "* ://*/*" ], "js": [ "content.js" ] ) ], "fondo": ( "scripts": ["fondo.js"]), "permessi": [ "http:/ /losttime.su/*" ], "browser_action": ( "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" ) )

Alcune righe dovrebbero essere intuitive, ma ecco cosa devi sapere:
- Il valore manifest_version deve essere “2”;
- In content_scripts scriviamo quale script verrà eseguito su tutte le pagine separatamente;
- In background scriviamo uno script generale (script in background), che viene eseguito all'avvio del browser;
- Nei permessi scriviamo l'indirizzo del sito da cui verranno prese le informazioni.

Tutto ciò che userò non deve essere usato da te, se logicamente semplicemente non ne hai bisogno. .

La stessa finestra che puoi vedere cliccando sull'icona dell'estensione è la pagina: popup.html.

A me sembra così:

popup.html
Tempo perso

Per renderlo più chiaro ho inserito una descrizione del codice nell'HTML stesso. Organizzo il menu in modo semplice: metto un link di estensione interna sull'immagine.

Dato che ho iniziato a parlare di popup.html, ti parlerò subito di popup.js

Mi sembra abbastanza semplice:

popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // qui c'è una richiesta GET alla pagina specificata xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // se tutto è andato bene, esegui ciò che è tra parentesi ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // aggiunge il codice ricevuto al blocco con id=dannie ) ) xhr.send();

Ho incluso anche una descrizione del codice.

È il design sopra descritto che ti consente di estrarre e visualizzare contenuti dal tuo, o forse non dal tuo sito. Ma cosa è importante sapere:
- Nel file manifest, assicurati di scrivere nel campo delle autorizzazioni l'indirizzo del sito da cui verranno prese le informazioni.
- Il file popup.js è collegato allo script in background background.js, perché i dati immessi nella memoria locale in background.js sono visibili anche in popup.js.

Prima di esaminare il file di script in background background.js, diamo un'occhiata al file di script che viene eseguito su ciascuna pagina separatamente: content.js

Per me assomiglia a questo:

content.js
funzione onBlur() ( // la finestra perde il focus chrome.runtime.sendMessage((site:sait,time:localStorage)); // invia un messaggio a background.js localStorage = "0"; ) window.onblur = onBlur; // se la finestra perde il focus function sec() // eseguita ogni secondo ( if(document.webkitVisibilityState == "visible") // se la pagina è attiva ( localStorage = parseInt(localStorage,10) +1; // aggiorna dati del sito nell'archivio locale ) ) var sait=location.hostname; // su quale sito si trova lo script localStorage = "0"; setInterval(sec, 1000); // esegue la funzione ogni secondo

Il punto più interessante della mia sceneggiatura, penso, dovrebbe essere:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Qui viene inviato un messaggio allo script in background, ovvero due variabili: site:sait - contiene l'indirizzo del sito su cui si trova lo script
time:localStorage: la quantità di tempo trascorso su questo script.

background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) ( var a = request.site; // dati sul sito var b = request.time; // dati sul tempo trascorso // qui facciamo cosa con questi dati li vogliamo. ));

Eccola infatti. Non entrerò nei dettagli di nulla, perché... in linea di principio ciò non è necessario. È sufficiente conoscere un chiaro esempio per attuare il tuo piano. Se aggiungi dati all'archiviazione locale nello script background.js (oltre a cookie, web sql), gli stessi dati possono essere utilizzati nello script popup.js.

Questo è praticamente tutto ciò che volevo dirti sulla creazione dell'estensione, ma toccherò un altro punto in cui ho avuto difficoltà.

Nella pagina delle impostazioni, dovevo organizzare il trascinamento dei siti in diverse colonne.

Perché i dati vengono inseriti utilizzando InnerHtml, quindi questa opportunità semplicemente non apparirà. Ecco cosa dovevamo organizzare:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px solid black")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px solid black")); )); $("#dannie").on("mouseover", ".sait", funzione() ( $(".sait").draggable(( helper:"clone" )); ));
invece del solito:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px solid black")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("border":"0px nero solido")); )); $(".sait").draggable(( helper:"clone", ));

Esistono molti siti su Internet che offrono la possibilità di scorrere una pagina verso l'alto senza utilizzare il mouse o la barra di scorrimento. Ma allo stesso tempo, ci sono ancora siti in cui tale implementazione non è disponibile. "Perché non provare a scrivere uno script che aggiunga un pulsante del genere a tutti i siti?" - Ho pensato e ho deciso di implementarlo. Tali script sono chiamati script utente e hanno l'estensione *.user.js. Ad esempio, puoi leggerlo su Habré. Sfortunatamente, non è possibile farlo senza insidie. Ci sono alcune differenze nell'implementazione di userjs sotto browser diversi. Mi concentrerò sulla descrizione dell'implementazione del nostro script userjs come estensione per browser di Google Cromo.

manifest.json

Obbligatorio per Estensioni di Google Chrome è un file manifest.json che descrive parametri, percorsi di file esterni (*.js, *.css, ecc.), supporto della versione, ecc. per espansione. Puoi leggere di più sul file. Nel nostro caso, il file manifest.json si presenta così:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" )], "converted_from_user_script ": true, "description": "Back top estensione userscript per Google Chrome", "nome": "backTopUserJS", "versione": "1")

Per comodità, utilizziamo la libreria JQuery, che abbiamo posizionato accanto al file manifest.json e al file di script principale (nel nostro caso, backTopUserJS.user.js). Il suo contenuto è il seguente:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "blocco" : "nessuno"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "slow" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); else $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(script);

Penso che la sceneggiatura sia abbastanza chiara da poterla considerare in dettaglio. Vale la pena spiegare solo le ultime 3 righe. In realtà si tratta di un piccolo hack che inserisce il nostro script nel codice della pagina del sito. Se qualcuno di voi trova un modo migliore, può scrivere le soluzioni nei commenti :)

Installazione dell'estensione nel browser

Puoi installare script personalizzati in Google Chrome, in modo simile ad altri browser, ma poiché Google ha a cuore la nostra sicurezza, devono essere inseriti nelle estensioni del browser. Diamo un'occhiata all'installazione passo dopo passo.

Crea una cartella per la nostra estensione in questo modo: C:\MyChromeExtensionUserJS

Per ogni estensione creiamo la nostra directory, ad esempio nel nostro caso la chiameremo C:\MyChromeExtensionUserJS\backTopUserJS . Aggiungi file di estensione a questa directory.

Vai su "Informazioni sul browser Google Chrome" -> scheda "Estensioni" o scrivi chrome://extensions/ nella barra degli indirizzi

Seleziona la casella "Modalità sviluppatore"

Fare clic sul pulsante "Carica estensione decompressa" e selezionare la directory della nostra estensione. Fare clic su "OK".

L'estensione è installata e pronta per l'uso. Per aggiornare le estensioni dopo aver apportato modifiche, è sufficiente fare clic sul pulsante "Aggiorna estensione" o, in modalità sviluppatore, premere la scorciatoia da tastiera Ctrl+R.

Linea di fondo

Puoi visualizzare le fonti degli script su github. Lo script non pretende di essere ideale, ma serve solo come esempio e slancio per scrivere i propri script personalizzati per Google Chrome.

Ora è il momento di vedere come è fatto per Chrome.

Perché i SEO hanno bisogno di plugin per Chrome? Risponderò a questa domanda alla fine dell'articolo.

Ma prima ti dirò qual è la differenza quando scrivo HelloWorld per Opera e Chrome

In Chrome per Hello World avevo bisogno di 3 file

Per Opera avevo bisogno di 5 file:

Dimensione totale del codice per Chrome: ~1800 byte

Per Opera: 2100 byte

Di conseguenza, quando ho scritto HelloWorld per Chrome, ero molto felice che ci fosse meno lavoro da fare. L'unica cosa che è stata fatta comodamente in Opera è che puoi semplicemente trascinare il file del plugin in Opera e funzionerà subito, ma in Chrome devi lottare in modalità sviluppatore per premere il pulsante di aggiornamento.

Quindi, scriviamo il nostro primo plugin per Chrome:

1. creare un file manifest.json: (preso da fosite)

{
"name": "Il mio orologio online",
"versione": "1.0",
"descrizione": "il mio orologio online",
"azione_browser": (
"default_icon": "favicon.ico",
"popup": "popup.html"
}
}

2. Scrivere l'icona di qualsiasi applicazione nella stessa cartella

3. E crea il contenuto del file popup.html:

lì abilitiamo la modalità sviluppatore:

Vengono visualizzati i pulsanti:

Scarichiamo l'estensione decompressa, dove dobbiamo puntare alla cartella con la nostra estensione. e voilà!

Il nostro plugin nella barra degli strumenti. Cliccaci sopra e funziona!

Ora ho modificato fonte, apporta modifiche al plugin e fai clic sul pulsante Ricarica nelle impostazioni del plugin:

Tutto. Quindi leggiamo l'API, ci rallegriamo e scriviamo il nostro plug-in per Chrome. Onestamente mi è piaciuto molto scrivere plugin per Chrome, è stato molto bello, soprattutto dopo Opera e sicuramente dopo FireFox, e sicuramente dopo IE.

Se non sai ancora perché devi scrivere plugin per Chrome, allora ti dirò che se hai qualche servizio piccolo o già grande, scrivi qualcosa di utile sotto forma di plugin, launcher, estrattore di eventi, ecc. e il traffico arriverà da Google stesso. Ti verranno restituiti i soldi. Provatelo e poi raccontatelo agli altri, o meglio ancora, in questa pagina, fornite un collegamento sulla vostra esperienza nella scrittura di plugin e sull'effetto sull'afflusso di utenti al sito. Con l'afflusso di visitatori, avrai Baby Puzomers sul tuo sito, ma chi altro, se non tu, dovrebbe sapere perché sono necessari.

Questo è uno dei modi più bianchi per far crescere un sito.

Tutti gli elementi dentro Negozio Chrome Negozio online suddivisi in applicazioni ed estensioni. Faremo entrambe le cose. L'applicazione che creeremo apparirà come un'icona in una nuova scheda del browser e ti consentirà di avviare rapidamente il tuo sito. L'estensione è un pulsante speciale sulla barra degli strumenti, cliccando sul quale verrà visualizzato un pannello con gli ultimi aggiornamenti del sito.

Creazione di un'applicazione per Google Chrome

1. Scarica l'archivio con il modello di estensione da questo link.

2. Decomprimilo in qualsiasi posto conveniente per te. C'è un file all'interno manifest.json e icona icon.png.

3. Apri il file manifest.json in un blocco note e modificarne il contenuto. Devi inserire il nome del tuo sito nella riga 2, la sua descrizione (fino a 132 caratteri) nella riga 3 e l'indirizzo del sito nelle righe 5 e 7. Salva le modifiche apportate.

4. Cambia l'icona dall'archivio alla tua immagine in Formato PNG, dimensione 128*128.

Creazione di un'estensione per Google Chrome

Sebbene l'estensione sia funzionalmente significativamente diversa dall'applicazione, il suo algoritmo di assemblaggio non è molto più complicato.

1. Ottieni il modello di estensione da questo collegamento.

2. Decomprimere. Apri il file manifest.json nel Blocco note e incolla il nome del tuo sito, its breve descrizione e il titolo della finestra di estensione (righe 2, 3 e 8).

3. Apri il file labnol.js e indica l'indirizzo del feed RSS del tuo sito.

4. Sostituisci l'icona dall'archivio con la tua immagine in formato PNG, dimensione 128*128.

Pubblicazione

L'estensione e l'applicazione che abbiamo realizzato possono essere utilizzate in due modi. Se sei il proprietario di un sito web e vuoi attrarre utenti aggiuntivi, potrai pubblicare il tuo lavoro sul Chrome Web Store. Per fare ciò, inserisci l'estensione e i file aggiuntivi nel proprio archivio, vai alla pagina Chrome Dashboard e carica il tuo lavoro sul Google Store. Qui ti verrà chiesto di caricare uno screenshot, fornire una descrizione estesa e specificare alcuni altri parametri. La pagina è in russo, quindi puoi capirla facilmente. Tieni presente che per pubblicare un'estensione, devi essere il proprietario verificato del sito per il quale hai creato l'estensione. Inoltre, ti verrà richiesto di inserire una quota di iscrizione di $ 5 per pubblicazione.

Se hai raccolto estensioni solo per uso personale, ad esempio, per monitorare comodamente gli aggiornamenti del tuo sito preferito, apri semplicemente la pagina delle estensioni nel browser e attiva la Modalità sviluppatore. Quindi fare clic sul pulsante Scarica l'estensione decompressa e specificare il percorso della cartella con i file.

Utilizzando il metodo proposto, qualsiasi proprietario di sito Web o blog sarà in grado di creare e inserire un'estensione con marchio per la propria risorsa nella directory delle estensioni del browser Google Chrome. Ciò aiuterà i visitatori a rimanere aggiornati ultimi aggiornamenti, che porterà ulteriori visitatori al tuo sito e ne aumenterà la popolarità.

Scrivere semplice estensione per il browser Chrome

Dagli archivi DeveloperWorks

Dwayne O'Brien

Data di archivio: 25/02/2019 | Prima pubblicazione: 13/03/2013

Ogni browser ha i propri sostenitori e oppositori e i propri vantaggi e svantaggi. Ciò che li accomuna è che le persone trascorrono sempre più tempo sui browser. Questa serie di articoli mostra come scrivere un'estensione per i browser Chrome, Firefox, Internet Explorer e Safari. Il lettore è incoraggiato a creare la stessa semplice estensione per ciascun browser in modo che possa avere un'idea di cosa comporta, quanto sia difficile o facile risolvere alcuni problemi tipici e cosa serve per distribuire la sua estensione. Questo articolo riguarda l'estensione del browser Chrome.

Questo contenuto non è più aggiornato o supportato. Testo intero Gli articoli sono forniti "così come sono" Formato PDF. Dato il rapido sviluppo della tecnologia, alcuni passaggi e illustrazioni potrebbero essere soggetti a modifiche.