als je je afvraagt hoe je een Chrome-extensie maakt, is de uitbreidingsdocumentatie van Chrome geweldig voor basisimplementaties. Echter, om meer geavanceerde functies te gebruiken vereist veel Googlen en Stack Overflow. Laten we eenintermediate Chrome-extensie die samenwerkt met de pagina: het zal de eerste Externe link op de pagina te vinden en open het in een nieuw tabblad.

manifest.json

het manifest.json-bestand vertelt Chrome belangrijke informatie over yourextension, zoals de naam en welke machtigingen het nodig heeft.,

de meest basale extensie is een map met een manifest.json bestand.Laten we een map maken en de volgende JSON in manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

dat is de meest basale manifest.json, met alle vereiste velden filledin. De manifest_version moet altijd 2 zijn, omdat versie 1 Vanaf januari 2014 niet wordt ondersteund. Tot nu toe onze extensie doet absoluut niets, maar laten we het laden in Chrome toch.,

Laad uw extensie in Chrome

om uw extensie in Chrome te laden, opent u chrome://extensions/ in uw browser en klikt u op “Developer mode” in de rechterbovenhoek. Klik nu op “Load unpackedextension …” en selecteer de map van de extensie. Je moet nu zien yourextension in de lijst.

wanneer u code wijzigt of toevoegt aan uw extensie, komt u terug naar deze pagina en laadt u de pagina. Chrome zal uw extensie herladen.

Content scripts

een content script is “een JavaScript-bestand dat draait in de context van webpagina’ s.,”Dit betekent dat een content script kan communiceren met webpagina’ s die de browservisits. Niet elk JavaScript-bestand in een Chrome-extensie kan dit doen; we zullen later zien waarom.

laten we een contentscript toevoegen met de naam content.js:

// content.js alert("Hello from your Chrome extension!")

om het script te injecteren, moeten we ons manifest.json hierover vertellen.,

voeg dit toe aan uw manifest.json bestand:

"content_scripts": , "js": } ]

Dit vertelt Chrome om content.js op elke pagina die we bezoeken te injecteren met behulp van de speciale <all_urls> URL-patroon. Als we het script op slechts enkele pagina ‘ s willen injecteren, kunnen we matchpatronen gebruiken. Hier zijn een paar voorbeelden van waarden voor"matches":

herlaad uw Chrome-extensie. Elke pagina die u bezoekt verschijnt nu een waarschuwing. Laten we de eerste URL op de pagina in plaats daarvan loggen.,

het loggen van de URL

jQuery is niet nodig, maar het maakt alles makkelijker. Eerste, download aversie van jQuery van de jquery CDN en zet het in de map van uw extensie. Idownloaded the latest minified version, jquery-2.1.3.min.js. Om het te laden, voeg toe aan manifest.json voordat "content.js"., Uw hele manifest.json zou er als volgt uit moeten zien:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

nu we jQuery hebben, gebruiken we het om de URL van de eerste Externe link op de pagina in content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

merk op dat we geen jQuery hoeven te gebruiken om te controleren of het document geladen is. Bydefault, Chrome injecteert inhoud scripts nadat de DOM is voltooid.

probeer het uit – u zou de uitvoer in uw console moeten zien op elke pagina die u bezoekt.,

Browseracties

wanneer een extensie een pictogram naast uw adresbalk toevoegt, is dat een browseractie. Uw extensie kan luisteren voor klikken op die knop en dan dosomething.

plaats het pictogram.png uit Google ’s extension tutorial in uw extensie map en voeg dit toe aan manifest.json:

"browser_action": { "default_icon": "icon.png" }

om de browser actie te gebruiken, moeten we bericht doorgeven toevoegen.

bericht doorgeven

een content script heeft toegang tot de huidige pagina, maar is beperkt in de API ‘ s die het kan openen., Bijvoorbeeld, het kan niet luisteren naar klikken op de browser actie. We moeten een ander type script toe te voegen aan onze extensie, een achtergrond script,die toegang heeft tot elke Chrome API, maar kan geen toegang tot de huidige pagina. AsGoogle zegt het:

Content scripts hebben een aantal beperkingen. Ze kunnen geen gebruik maken vanchrome.* API ‘ s, met uitzondering van extension, i18n, runtime, en storage.,

dus het contentscript kan een URL uit de huidige pagina halen, maar moet die URL aan het achtergrondscript overdragen om er iets nuttigs mee te doen. Om te communiceren, gebruiken we wat Google message passing noemt, waarmee scripts berichten kunnen verzenden en luisteren. Het is de enige manier voor inhoud scripts en achtergrond scripts om te communiceren.,

voeg het volgende toe om manifest.json over het achtergrondscript te vertellen:

"background": { "scripts": }

nu zullen we background.js:

Dit stuurt een willekeurige JSON payload naar het huidige tabblad. De toetsen van de JSONpayload kunnen van alles zijn, maar ik koos "message" voor eenvoud. Nu hebben we tolisten nodig voor dat bericht in content.js:

merk op dat al onze vorige code is verplaatst naar de luisteraar, zodat het alleen wordt uitgevoerd wanneer de payload is ontvangen., Elke keer dat u op het pictogram browseractie klikt, ziet u dat een URL wordt ingelogd op de console. Als het niet werkt, probeer de extensie opnieuw te laden en vervolgens de pagina opnieuw te laden.

een nieuw tabblad Openen

We kunnen de chrome.tabs API gebruiken om een nieuw tabblad te openen:

chrome.tabs.create({"url": "http://google.com"});

maar chrome.tabs kan alleen worden gebruikt door background.js, dus we moeten iets meer bericht doorgeven omdat background.js het tabblad kan openen, maar de URL niet kan grijpen., Hier is het idee:

  1. Luister naar een klik op de browser actie in background.js. Wanneer het is aangekoppeld, stuur dan eenclicked_browser_action gebeurtenis naarcontent.js.
  2. wanneer content.js de gebeurtenis ontvangt, pakt het de URL van de eerste link op de pagina. Daarna stuurt het open_new_tab terug naar background.js met de URL toopen.
  3. background.js luistert naar open_new_tab en opent een nieuw tabblad met de givenURL wanneer deze het bericht ontvangt.,

door op de browser actie te klikken zal background.js worden geactiveerd, wat een bericht zal sturen naar content.js, wat een URL terug zal sturen naar background.js, die een nieuw tabblad met de opgegeven URL zal openen.

eerst moeten we content.js vertellen om de URL naar background.jste sturen., Changecontent.js om deze code te gebruiken:

nu moeten we wat code toevoegen om background.js te vertellen om naar die gebeurtenis te luisteren:

wanneer u nu op het pictogram browseractie klikt, wordt een nieuw tabblad geopend met de eerste externe URL op de pagina.

de volledige content.jsen background.js staan hierboven., Hier is de volledige manifest.json:

en hier is de volledige mapstructuur:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

meer informatie over het maken van een Chrome-extensie

probeer de officiële documentatie over de Chrome-extensie.