Si sou un usuari de Chrome, és probable que utilitzeu una o més extensions. Ja sigui per bloquejar anuncis o per afegir funcions, les extensions aporten molta utilitat al navegador. Així, no estaria fantàstic si poguessis crear la teva extensió Chrome? Això és exactament el que us ensenyaré aquí.
Consulteu també el nostre article Els millors Chromebooks amb pantalla tàctil
Quant mantinc llocs web per a clients, m’agrada saber com funciona cada lloc pel que fa a la càrrega de pàgines. Com que Google ara utilitza els temps de càrrega en els seus càlculs de SEO, conèixer la velocitat o la lentitud de les càrregues d’una pàgina és una mètrica important a l’hora d’optimitzar un lloc. Això és encara més cert quan s’optimitza un lloc web per a mòbils. Ha de ser lleuger, ràpid i carregat sense cap tipus de error per puntuar altament a Google.
A això, el fet que una persona emprenedora a SitePoint també utilitzi el mateix lloc web que faig per comprovar la velocitat de la pàgina, GTmetrix i ha desenvolupat una extensió Chrome per comprovar-la, vaig pensar que faria el mateix i us passaria per ella.
Extensions de Chrome
Les extensions de Chrome són mini programes que afegeixen funcions al navegador principal. Poden ser tan senzilles com les que crearem o tan complicades com administradors de contrasenyes segures o emuladors de scripts. Escrits en idiomes compatibles, com HTML, CSS i JavaScript, són fitxers autònoms que es troben al costat del navegador.
Per necessitat, la majoria d’extensions són execucions de clics simples que fan una acció determinada. Aquesta acció pot literalment ser qualsevol cosa que vulgueu fer.
Creeu la vostra pròpia extensió Chrome
Amb una mica de recerca, podeu ajustar l’extensió per fer tot el que vulgueu, però m’agrada la idea d’un control de velocitat d’un botó, així que vaig a això.
Normalment, quan comproveu la velocitat del lloc, enganxeu l'URL de la pàgina on aneu a GTmetrix, a Pingdom o a qualsevol lloc i feu clic a Analitza. Només triguen uns segons, però no estaria bé si només poguessis seleccionar una icona al navegador i fer-ho? Després de treballar aquest tutorial, podreu fer-ho.
Haureu de crear una carpeta al vostre ordinador per mantenir-ho tot. Creeu tres fitxers buits, manifest.json, popup.html i popup.js. Feu clic amb el botó dret a la carpeta nova i seleccioneu Fitxer nou i de text. Obriu cadascun dels vostres tres fitxers a l’editor de text que trieu. Assegureu-vos que popup.html es desi com a fitxer HTML i que popup.js es desi com a fitxer JavaScript. Baixeu aquesta icona de mostra de Google també per als propòsits d'aquest tutorial.
Seleccioneu manifest.json i enganxeu el següent:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Utilitzeu GTmetrix per analitzar la velocitat de càrrega de pàgines del lloc web", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permisos":}
Com podeu veure, li hem donat un títol i una descripció bàsica. També hem anomenat una acció del navegador que inclou la icona que hem descarregat de Google que apareixerà a la barra del navegador i al popup.html. Popup.html és el que s’anomena quan seleccioneu la icona d’extensió al navegador.
Obriu popup.html i enganxeu el següent a ell.
http: //popup.js
Analitzador de velocitats de pàgines mitjançant GTMetrix
Popup.html és el que s’anomena quan seleccioneu la icona d’extensió al navegador. Li hem donat un nom, hem etiquetat la finestra emergent i hem afegit un botó. Si seleccioneu el botó s'anomenarà popup.js que serà el fitxer que completarem a continuació.
Obriu popup.js i enganxeu el següent:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab)) = document; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'entrada'); i.type = 'oculta'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, fals);}, fals);
No pretenc conèixer JavaScript, per la qual cosa era útil que SitePoint ja tingués el fitxer al seu lloc. Tot el que sé és que diu a GTmetrix que analitzi la pàgina a la pestanya Chrome actual. Quan diu "chrome.tabs.getSelected", l'extensió pren l'URL de la pestanya activa i s'introdueix al formulari web. És fins on puc anar.
Prova de l’extensió Chrome
Ara tenim el marc bàsic al seu lloc, hem de provar per veure com funciona.
- Obre Chrome, selecciona Més eines i extensions.
- Marqueu la casella del costat del mode desenvolupador per activar-la.
- Seleccioneu Carrega una extensió desempaquetada i navegueu al fitxer que heu creat per a aquesta extensió.
- Seleccioneu D'acord per carregar l'extensió i ha de aparèixer a la vostra llista d'extensions.
- Marqueu la casella al costat de Activa a la llista i la icona apareixerà al navegador.
- Seleccioneu la icona al navegador perquè aparegui la finestra emergent.
- Seleccioneu el botó, comproveu ara aquesta pàgina.
Hauríeu de veure que s’està comprovant la pàgina i un informe de rendiment de GTmetrix. Com veieu des del meu propi lloc a la imatge principal, tinc una mica de treball per fer per agilitzar el meu nou disseny.
S'estan executant les extensions
Crear la vostra pròpia extensió Chrome no és tan difícil com pugui semblar. Tot i que sens dubte ha ajudat a començar per conèixer una mica de codi, hi ha centenars de recursos en línia que us ho demostren. A més, Google disposa d’un enorme dipòsit d’informació, tutorials i guies útils. He utilitzat aquesta pàgina del lloc de Google Developer per ajudar-me amb aquesta extensió. La pàgina us recorre totes les parts de la creació de l’extensió i proporciona la icona que havíem utilitzat anteriorment.
Amb prou investigació, podeu crear extensions que facin gairebé tot el que sigui capaç el navegador. Algunes de les millors extensions de la botiga Chrome provenen de particulars i no de companyies, cosa que demostra que realment podeu crear-ne la vostra.
Tots els crèdits a John Sonmez a SitePoint per obtenir la guia original. Va fer el treball dur, només la vaig reorganitzar una mica i la vaig actualitzar lleugerament.
Heu creat la vostra extensió Chrome? Voleu promocionar-lo o compartir-lo? Feu-nos-ho saber a continuació si ho feu!
