Share
Het is geen geheim dat mijn favoriete browser Google Chrome is. Ik vind het leuk omdat het snel, betrouwbaar is, het niet (vaak) crasht en het ziet er goed uit. Er is ook iets anders dat ik nog waardevoller vind. Het is het feit dat je er een extensie voor kunt bouwen met alleen HTML, CSS en JavaScript. Ik steun altijd dergelijke producten, producten die open staan voor de community en Chrome is een van deze producten. Als je iets nodig hebt en het is nog niet geïmplementeerd, ben je vrij om het zelf te ontwikkelen.
Aan het einde van dit artikel vindt u dus een werkende Chrome-extensie die de meeste van de hieronder toegelichte technieken gebruikt. U kunt het laatste voorbeeld downloaden met de knop Download source code bovenaan deze pagina.
Als u op zoek bent naar een snelle oplossing, kunt u ook de Chrome App Maker downloaden van Envato Market, waarmee u heel eenvoudig Chrome-apps en -extensies kunt maken.
Chrome App Maker op Envato Market Ik moedig mensen altijd aan om betere tools te gebruiken om hun workflow te versnellen. De software die we gebruiken, zou ons moeten helpen, we zouden er niet mee moeten vechten. Het ontwikkelen van uitbreidingen / plug-ins voor uw favoriete editor of browser helpt niet alleen u, maar ook andere programmeurs, die zich vroeger of later in dezelfde situatie bevinden. Als er iets ontbreekt, kunt u het zelf bouwen en met Chrome is dit heel eenvoudig. Het modelleren van uw omgeving rondom uw behoeften is de sleutel tot het productief zijn.
Gelukkig is er een manier om uw extensie te testen zonder deze naar de Chrome Web Store te hoeven uploaden. Typ in de adresbalk van uw browser:
chrome: // extensions
Zorg ervoor dat u controleert Ontwikkelaarsmodus en klik op de Onverpakte extensie laden ... knop. Selecteer vervolgens de map van uw harde schijf die de bestanden van de extensie bevat.
Hier is een diagram van de architectuur voor een Chrome-extensie:
En laten we nu eens elk element binnen de architectuur van naderbij bekijken.
Het toegangspunt van uw extensie is het manifest.json-bestand. Het moet een geldig JSON-object bevatten. Bijvoorbeeld:
"name": "BrowserActionExtension", "version": "0.0.1", "manifest_version": 2, "browser_action": "default_title": "That's the tool tip", "default_popup": "popup.html"
De vereiste eigenschappen zijn naam, versie, en manifest_version. De versie kan overal van één tot vier zijn, punt-gescheiden gehele getallen. Het is iets dat wordt gebruikt door het automatische updatesysteem van Google. Zo weet het wanneer je je extensie moet bijwerken. De waarde van de manifest_version moet het gehele getal zijn 2.
Het manifest kan andere eigenschappen bevatten, afhankelijk van wat voor soort extensie u nodig heeft, maar ik zal alleen die beschrijven die ik interessanter vind.
Elke extensie heeft een onzichtbare achtergrondpagina die wordt uitgevoerd door de browser. Er zijn twee typen - blijvende achtergrondpagina's en evenementpagina's. De eerste is altijd actief. De tweede is alleen actief als het nodig is. Google moedigt ontwikkelaars aan om evenementpagina's te gebruiken, omdat dit geheugen bespaart en de algehele prestaties van de browser verbetert. Het is echter goed om te weten dat dit ook is waar u uw hoofdlogica en initialisatie moet plaatsen. Normaal speelt de achtergrondpagina / het script de rol van een brug tussen de andere delen van de extensie.
Hier is hoe je het zou moeten beschrijven in het manifest:
"achtergrond": "scripts": ["background.js"], "persistent": false / true
Zoals je misschien al geraden hebt, als het aanhoudend eigendom is vals dan gebruik je evenementpagina's. Anders werkt u met een permanente achtergrondpagina.
Als u toegang tot de DOM van de huidige pagina nodig hebt, moet u een contentscript gebruiken. De code wordt uitgevoerd binnen de context van de huidige webpagina, wat betekent dat deze bij elke vernieuwing wordt uitgevoerd. Gebruik de volgende syntaxis om een dergelijk script toe te voegen.
"content_scripts": ["matches": ["http: // * / *", "https: // * / *"], "js": ["content.js"]]
Houd er rekening mee dat de waarde van wedstrijden bepaalt voor welke pagina's uw script zal worden gebruikt. Lees hier meer over overeenkomstenpatronen.
Er zijn verschillende manieren om de gebruikersinterface van uw extensie te bouwen. Hier zijn de vier meest populaire.
De meeste ontwikkelaars gebruiken de browser_action eigenschap om hun plug-ins te bouwen. Nadat u deze hebt ingesteld, wordt aan de rechterkant van de adresbalk een pictogram weergegeven dat uw extensie vertegenwoordigt. Gebruikers kunnen vervolgens op het pictogram klikken en een pop-up openen die in feite HTML-inhoud is die door u wordt beheerd.
De manifestbestanden moeten de volgende gegevens bevatten:
"browser_action": "default_icon": "19": "icons / 19x19.png", "38": "icons / 38x38.png", "default_title": "That's the tool tip", "default_popup": "popup.html"
De default_title is een kleine tooltip die wordt weergegeven wanneer de gebruiker over uw pictogram beweegt. default_popup is in feite het HTML-bestand dat in de pop-up is geladen. Er is ook een badge die u over uw pictogram kunt plaatsen. U kunt dat doen in uw achtergrondscript. Bijvoorbeeld:
chrome.browserAction.setBadgeText (text: "yeah");
Dit was de code die ik gebruikte om de afbeelding hierboven te produceren.
De page_action eigenschap is vergelijkbaar met de browseractie, maar het pictogram wordt weergegeven in de adresbalk:
Het interessante is dat uw pictogram aanvankelijk verborgen is, dus u moet beslissen wanneer u het wilt laten zien. In de bovenstaande afbeelding wordt het RSS-pictogram bijvoorbeeld alleen weergegeven als de huidige pagina een koppeling bevat naar de RSS-feed. Als u uw pictogram altijd wilt zien, is het goed om te gebruiken browser_action direct.
Als u de pagina-actie wilt toevoegen, typt u de volgende code in uw manifest:
"page_action": "default_icon": "19": "images / icon19.png", "38": "images / icon38.png", "default_title": "Google Mail", "default_popup": "popup .html "
In tegenstelling tot het pictogram van de browseractie, heeft het pictogram van de pagina-actie geen badges.
Ik gebruik DeveloperTools veel en het is goed dat Chrome een methode biedt voor het toevoegen van nieuwe tabbladen aan deze hulpmiddelen. Het eerste dat u moet doen, is een HTML-pagina toevoegen die wordt geladen wanneer het paneel wordt geopend:
"devtools_page": "devtools.html"
Het is niet nodig om HTML in de pagina te plaatsen, behalve om een JavaScript-bestand te linken, waardoor het tabblad wordt gemaakt:
;
En neem dan de volgende code op in de devtools.js het dossier:
Accentsconagua
chrome.devtools.panels.create ("TheNameOfYourExtension", "img / icon16.png", "index.html", function () ); Nu zal de bovenstaande code een nieuw tabblad toevoegen met de naam van TheNameOfYourExtension en zodra u erop klikt, wordt de browser geladen index.html in de DeveloperTools.
De omnibox is het sleutelwoord dat wordt weergegeven in de adresbalk van Chrome. Als u bijvoorbeeld de volgende eigenschap aan uw manifest toevoegt:
"omnibox": "keyword": "yeah"
En voeg dan de onderstaande code toe, in je achtergrondscript:
chrome.omnibox.onInputChanged.addListener (functie (tekst, suggestie) suggest ([content: text + "one", description: "the first one", content: text + "number two", description: "the tweede invoer "]);); chrome.omnibox.onInputEntered.addListener (functie (tekst) alert ('Je hebt zojuist getypt' '+ text +' "');); Je zou moeten kunnen typen Ja in de adresbalk. Dan zou je zoiets als dit moeten zien:
Door op het tabblad te drukken, verschijnt het volgende scherm:
Natuurlijk met behulp van de chrome.omnibox API, je zou de input van de gebruiker kunnen vangen en op die input kunnen reageren.
Er zijn een heleboel verschillende dingen die je kunt doen in je extensie. U kunt bijvoorbeeld toegang krijgen tot de bladwijzers of geschiedenis van de gebruiker. U kunt verplaatsen, tabbladen maken of zelfs het formaat van het hoofdvenster wijzigen. Ik raad ten zeerste aan om de documentatie te bekijken om een beter idee te krijgen van hoe deze taken kunnen worden uitgevoerd.
Wat u moet weten, is dat niet alle API's beschikbaar zijn in elk deel van uw extensie. Uw contentscript kan bijvoorbeeld geen toegang krijgen chrome.devtools.panels of het script in uw DeveloperTools-tabblad kan de DOM van de pagina niet lezen. Dus, als je je afvraagt waarom iets niet werkt, zou dit de reden kunnen zijn.
Zoals ik hierboven al zei, hebt u niet altijd toegang tot de API die u wilt gebruiken. Als dat het geval is, moet u het doorgeven van berichten gebruiken. Er zijn twee soorten berichtenverkeer: eenmalige verzoeken en langlevende verbindingen.
Dit type communicatie gebeurt maar één keer. D.w.z. je stuurt een bericht en wacht op een antwoord. U kunt bijvoorbeeld de volgende code in uw achtergrondscript plaatsen:
chrome.extension.onMessage.addListener (function (request, sender, sendResponse) switch (request.type) case "dom-loaded": alert (request.data.myProperty); break; return true;);
Gebruik vervolgens de code van onder in uw inhoudsscript:
window.addEventListener ("load", function () chrome.extension.sendMessage (type: "dom-loaded", data: myProperty: "value");, true); En zo kunt u informatie krijgen over de DOM van de huidige pagina en deze gebruiken in uw achtergrondscript, dat normaal gesproken geen toegang heeft tot deze gegevens.
Gebruik dit type berichten als u een permanent communicatiekanaal nodig hebt. Plaats in je contentscript de volgende code:
var port = chrome.runtime.connect (name: "my-channel"); port.postMessage (myProperty: "value"); port.onMessage.addListener (functie (msg) // doe wat dingen hier);
En gebruik in het achtergrondscript dit:
chrome.runtime.onConnect.addListener (function (port) if (port.name == "my-channel") port.onMessage.addListener (function (msg) // doe hier wat dingen);) ;
Het negeren van pagina's is een leuke manier om uw browser aan te passen. U kunt ook enkele van de standaardpagina's in Chrome vervangen. U kunt bijvoorbeeld uw eigen geschiedenispagina maken. Hiertoe voegt u het volgende codefragment toe:
"chrome_url_overrides": "; ":" custom.html "
De mogelijke waarden van bladwijzers, geschiedenis, en nieuw tabblad. Het is best gaaf om een frisse neus te halen nieuw tabblad pagina.
Om dit artikel af te ronden heb ik besloten om een eenvoudig voorbeeld toe te voegen, zodat je een beter begrip van het hele plaatje krijgt. Deze voorbeelduitbreiding gebruikt de meeste dingen die ik hierboven heb beschreven om gewoon een # F00 achtergrondkleur voor alle div's op de huidige pagina. Download de broncode met de knop bovenaan dit artikel.
Natuurlijk begon ik met het manifestbestand:
"name": "BrowserExtension", "version": "0.0.1", "manifest_version": 2, "description": "Description ...", "icons": "16": "icons / 16x16.png" , "48": "icons / 48x48.png", "128": "icons / 128x128.png", "omnibox": "keyword": "yeah", "browser_action": "default_icon": "19": "icons / 19x19.png", "38": "icons / 38x38.png", "default_title": "That's the tool tip", "default_popup": "browseraction / popup.html", " achtergrond ": " scripts ": [" background.js "]," persistent ": false," chrome_url_overrides ": " newtab ":" newtab / newtab.html "," content_scripts ": [" matches " : ["http: // * / *", "https: // * / *"], "js": ["content.js"], "devtools_page": "devtools / devtools.html"
Houd er rekening mee dat u uw bestanden in mappen kunt indelen. Let ook op de versie eigendom. U moet deze eigenschap bijwerken elke keer dat u uw extensie in de webwinkel wilt uploaden.
// omnibox chrome.omnibox.onInputChanged.addListener (functie (tekst, suggestie) suggest ([content: "color-divs", description: "Make everything red"]);); chrome.omnibox.onInputEntered.addListener (function (text) if (text == "color-divs") colorDivs ();); // luisteren naar een evenement / eenmalige verzoeken // afkomstig van de popup chrome.extension.onMessage.addListener (functie (request, sender, sendResponse) switch (request.type) case "color-divs": colorDivs ( ); pauze; return true;); // luisteren naar een gebeurtenis / langlevende verbindingen // afkomstig van devtools chrome.extension.onConnect.addListener (function (port) port.onMessage.addListener (function (message) switch (port.name) case "color -divs-port ": colorDivs (); break;);); // stuur een bericht naar het inhoudsscript var colorDivs = function () chrome.tabs.getSelected (null, function (tab) chrome.tabs.sendMessage (tab.id, type: "colors-div", kleur: "# F00"); // instellen van een badge chrome.browserAction.setBadgeText (text: "red!"););
De eerste paar regels krijgen de actie van de gebruiker vanuit de omnibox. Daarna heb ik een luisteraar voor eenmalig verzoek ingesteld, die het bericht van het actiepictogram voor de browser accepteert.
Het volgende fragment is een langlevende verbinding met het tabblad devtools (het is niet absoluut noodzakelijk om hiervoor een langlevende verbinding te gebruiken, ik deed het alleen voor educatieve doeleinden). Met behulp van deze luisteraars kan ik de invoer van de gebruiker ontvangen en deze naar het contentscript verzenden, dat toegang heeft tot de DOM-elementen. Het belangrijkste punt hier was om eerst het tabblad te selecteren dat ik wilde manipuleren en er vervolgens een bericht naartoe te sturen. Ten slotte leg ik een badge op het pictogram van de extensie.
We beginnen met onze popup.html het dossier:
// popup.html
Vervolgens maken we de popup.js het dossier:
// popup.js window.onload = function () document.getElementById ("knop"). onclick = function () chrome.extension.sendMessage (type: "color-divs"); De pop-up bevat een enkele knop en zodra de gebruiker erop klikt, stuurt deze een bericht naar het achtergrondscript.
window.onload = function () var port = chrome.extension.connect (name: "color-divs-port"); document.getElementById ("knop"). onclick = function () port.postMessage (type: "color-divs"); Voor de DeveloperTools doen we hier bijna hetzelfde als in de pop-up, het enige verschil is dat ik een langlevende verbinding heb gebruikt.
chrome.extension.onMessage.addListener (function (message, sender, sendResponse) switch (message.type) case "colors-div": var divs = document.querySelectorAll ("div"); if (divs.length == = 0) alert ("Er zijn geen divs op de pagina."); Else for (var i = 0; i Het contentscript luistert naar een bericht, selecteert alle div's op de huidige pagina en wijzigt de achtergrondkleur. Besteed aandacht aan het object waaraan ik de luisteraar heb bevestigd. In het inhoudsscript dat is chrome.extension.onMessage.
Het aanpassen van de Nieuw tabblad Pagina
Het laatste ding dat deze uitbreiding doet is het aanpassen van de nieuw tabblad pagina. We kunnen dat eenvoudig doen door simpelweg te wijzen op de nieuw tabblad eigendom van de newtab / newtab.html het dossier:
"chrome_url_overrides": "newtab": "newtab / newtab.html"
Houd er rekening mee dat u geen replica van de standaard kunt maken nieuw tabblad pagina. Het idee van deze functie is om een geheel andere functionaliteit toe te voegen. Dit is wat Google zegt:
Probeer de standaard nieuwe tabbladpagina niet te emuleren. De API's die nodig zijn om een enigszins aangepaste versie van de standaardpagina 'Nieuw tabblad' te maken - met toppagina's, recent gesloten pagina's, tips, een achtergrondafbeelding van een thema, enzovoort, bestaan nog niet. Totdat ze dat doen, kun je beter iets heel anders proberen te maken.
debugging
Het schrijven van een extensie voor Google Chrome is niet altijd een gemakkelijke taak en u zult waarschijnlijk een aantal problemen tegenkomen. Het goede ding is dat u de console nog steeds kunt gebruiken om uw variabelen uit te voeren om te helpen bij foutopsporing. Voel je vrij om toe te voegen console.log in je achtergrond- of contentscripts. Dit zal echter niet werken in scripts die worden uitgevoerd in de context van de ontwikkelaarstools, in dat geval zou u kunnen overwegen om de. Te gebruiken alarm methode, omdat het overal werkt.
Conclusie
Naar mijn mening is Chrome een van de beste browsers die beschikbaar is. De ontwikkelaars bij Google maken het maken van extensies relatief eenvoudig door ons de mogelijkheid te geven deze te maken in HTML, CSS en JavaScript.
Ja, er zijn enkele lastige onderdelen, maar over het algemeen zijn we in staat om waardevolle plug-ins te maken. Houd er rekening mee dat dit artikel niet alles behandelt met betrekking tot het ontwikkelen van Chrome-extensies. Er zijn nog andere handige dingen zoals contextmenu's, optiepagina's en meldingen. Voor de onderwerpen die ik niet behandelde, raadpleeg de documentatie voor meer gedetailleerde informatie.
