Come realizzare un'estensione di Chrome

Se sei un utente Chrome, è probabile che utilizzerai una o più estensioni. Che si tratti di bloccare gli annunci o di aggiungere funzionalità, le estensioni aggiungono molta utilità al browser. Quindi non sarebbe bello se tu potessi costruire la tua estensione di Chrome? Questo è esattamente quello che ti mostrerò qui.

Vedi anche il nostro articolo I migliori Chromebook touchscreen

Man mano che gestisco i siti Web per i clienti, mi piace sapere come si comporta ogni sito per quanto riguarda il caricamento della pagina. Poiché ora Google utilizza i tempi di caricamento nei suoi calcoli SEO, sapere quanto velocemente o lentamente carica una pagina è una metrica importante quando si ottimizza un sito. Ciò è ancora più vero quando si ottimizza un sito Web per dispositivi mobili. Deve essere leggero, veloce e carico senza errori per ottenere un punteggio elevato all'interno di Google.

Aggiungete a ciò, il fatto che una persona intraprendente su SitePoint utilizzi anche lo stesso sito Web che faccio per controllare la velocità della pagina, GTmetrix e ha sviluppato un'estensione di Chrome per verificarlo, ho pensato che avrei fatto lo stesso e vi avrei guidato.

Estensioni di Chrome

Le estensioni di Chrome sono mini programmi che aggiungono funzionalità al browser principale. Possono essere semplici come quello che creeremo o complicati come i gestori di password sicure o gli emulatori di script. Scritti in lingue compatibili come HTML, CSS e JavaScript, sono file autonomi che si trovano accanto al browser.

Per necessità, la maggior parte delle estensioni sono semplici esecuzioni di icone che eseguono una determinata azione. Tale azione può letteralmente essere qualsiasi cosa tu voglia che Chrome faccia.

Crea la tua estensione Chrome

Con un po 'di ricerca, puoi modificare l'estensione per fare quello che vuoi, ma mi piace l'idea di un controllo di velocità a un pulsante, quindi ci sto andando.

Di solito, quando controlli la velocità del sito, incolli l'URL della pagina in cui ti trovi in ​​GTmetrix, Pingdom o ovunque e premi Analizza. Ci vogliono solo pochi secondi, ma non sarebbe bello se potessi semplicemente selezionare un'icona sul tuo browser e farlo fare per te? Dopo aver svolto questo tutorial, sarai in grado di fare proprio questo.

Dovrai creare una cartella sul tuo computer per conservare tutto. Crea tre file vuoti, manifest.json, popup.html e popup.js. Fai clic con il pulsante destro del mouse nella nuova cartella e seleziona Nuovo e file di testo. Apri ciascuno dei tuoi tre file nel tuo editor di testo preferito. Assicurati che popup.html sia salvato come file HTML e popup.js sia salvato come file JavaScript. Scarica questa icona di esempio anche da Google solo ai fini di questo tutorial.

Seleziona manifest.json e incolla quanto segue:

{"manifest_version": 2, "name": "Analizzatore della velocità della pagina GTmetrix", "descrizione": "Usa GTmetrix per analizzare la velocità di caricamento di una pagina del sito Web", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "autorizzazioni":}

Come puoi vedere, gli abbiamo dato un titolo e una descrizione di base. Abbiamo anche chiamato un'azione del browser che include l'icona che abbiamo scaricato da Google che verrà visualizzata nella barra del browser e popup.html. Popup.html è ciò che viene chiamato quando si seleziona l'icona dell'estensione nel browser.

Apri popup.html e incolla quanto segue.

http: //popup.js

Analizzatore di velocità di pagina usando GTMetrix

Controlla la velocità della pagina!

Popup.html è ciò che viene chiamato quando si seleziona l'icona dell'estensione nel browser. Gli abbiamo dato un nome, etichettato il popup e aggiunto un pulsante. Selezionando il pulsante si chiamerà popup.js che è il file che completeremo successivamente.

Apri popup.js e incolla quanto segue:

document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = documento; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);

Non pretendo di conoscere JavaScript, motivo per cui è stato utile che SitePoint avesse già installato il file. Tutto quello che so è che dice a GTmetrix di analizzare la pagina nella scheda Chrome corrente. Dove dice "chrome.tabs.getSelected" l'estensione prende l'URL dalla scheda attiva e lo inserisce nel modulo web. Questo è quanto posso.

Test dell'estensione di Chrome

Ora disponiamo del framework di base, dobbiamo testarlo per vedere come funziona.

1. Apri Chrome, seleziona Altri strumenti ed estensioni.
2. Seleziona la casella accanto a Modalità sviluppatore per abilitarla.
3. Seleziona Carica estensione decompressa e vai al file che hai creato per questa estensione.
4. Selezionare OK per caricare l'estensione e dovrebbe apparire nell'elenco Estensioni.
5. Seleziona la casella accanto a Abilitato nell'elenco e l'icona dovrebbe apparire nel tuo browser.
6. Seleziona l'icona nel browser in modo che appaia il popup.
7. Seleziona il pulsante, controlla subito questa pagina!

Dovresti vedere la pagina da controllare e un rapporto sulle prestazioni da GTmetrix. Come puoi vedere dal mio sito nell'immagine principale, ho un po 'di lavoro da fare per accelerare il mio nuovo design!

Portare avanti le estensioni

Creare la tua estensione di Chrome non è così difficile come potrebbe sembrare. Sebbene abbia sicuramente aiutato ad avere un vantaggio conoscendo un piccolo codice, ci sono centinaia di risorse online che te lo mostreranno. Inoltre, Google ha un enorme repository di informazioni, tutorial e procedure dettagliate che ti aiuteranno. Ho usato questa pagina dal sito degli sviluppatori di Google per aiutarmi con questa estensione. La pagina ti guida attraverso ogni parte della creazione dell'estensione e fornisce quell'icona che abbiamo usato in precedenza.

Con una ricerca sufficiente, puoi creare estensioni che fanno praticamente tutto ciò che il browser è in grado di fare. Alcune delle migliori estensioni nel Chrome Store provengono da privati ​​e non da aziende, dimostrando che puoi davvero crearne una tua.

Tutto il merito a John Sonmez su SitePoint per la guida originale. Ha fatto il duro lavoro, l'ho appena riorganizzato un po 'e l'ho leggermente aggiornato.

Hai creato la tua estensione di Chrome? Vuoi promuoverlo o condividerlo? Facci sapere di seguito se lo fai!