google-chrome-extension Zelfstudie
Aan de slag met Google-Chrome-extensie

Opmerkingen

Absoluut minimum voorbeeld

Elke Chrome-extensie begint als een uitgepakte extensie : een map met de bestanden van de extensie.

Eén bestand dat het moet bevatten is manifest.json , dat de basiseigenschappen van de extensie beschrijft. Veel van de eigenschappen in dat bestand zijn optioneel, maar hier is een absoluut minimum manifest.json bestand:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Maak ergens een map (bijvoorbeeld myExtension ), voeg manifest.json zoals hierboven vermeld.

Vervolgens moet u de extensie in Chrome laden.

1. Open de chrome://extensions/ pagina, toegankelijk via Menu> Meer tools> Extensies .
2. Schakel de ontwikkelaarsmodus in met een selectievakje in de rechterbovenhoek, als deze nog niet is ingeschakeld.
3. Klik op de knop myExtension extensie laden ... en selecteer de gemaakte map myExtension .

Dat is het! Uw eerste extensie wordt geladen door Chrome:

Natuurlijk doet het nog niets, dus het is een goed moment om een overzicht van de extensiearchitectuur te lezen om te beginnen met het toevoegen van onderdelen die u nodig hebt.

Belangrijk: vergeet niet terug te keren naar chrome://extensions/ wanneer u wijzigingen in uw extensie aanbrengt en druk op de link Reload voor uw extensie nadat u wijzigingen hebt aangebracht. In het geval van inhoudsscripts, laadt u ook de doelpagina opnieuw.

Achtergrondpagina

Achtergrondpagina's zijn impliciete pagina's die achtergrondscripts bevatten. Een achtergrondscript is een langlopend script om een bepaalde taak of status te beheren. Het bestaat voor de levensduur van uw extensie en er is slechts één exemplaar tegelijk actief.

Je kunt het zo verklaren in je manifest.json :

"background": {
    "scripts": ["background.js"]
}

Er wordt een achtergrondpagina gegenereerd door het extensiesysteem dat elk van de bestanden in de eigenschap scripts bevat.

U hebt toegang tot alle toegestane chrome.* API's.

Er zijn twee soorten achtergrondpagina's: persistente achtergrondpagina's die altijd open zijn en gebeurtenispagina's die naar behoefte worden geopend en gesloten.

Als u wilt dat uw achtergrondpagina niet-persistent is, moet u gewoon de persistent -flag op false instellen:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

Dit achtergrondscript is alleen actief als een gebeurtenis wordt geactiveerd waarop u een luisteraar hebt geregistreerd. Over het algemeen gebruikt u een addListener voor registratie.

Voorbeeld: de app of extensie wordt eerst geïnstalleerd.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Content Scripts

Een inhoudsscript is een extensiecode die naast een normale pagina wordt uitgevoerd.

Ze hebben volledige toegang tot de DOM van de webpagina (en zijn in feite het enige deel van de extensie dat toegang heeft tot de DOM van een pagina ), maar de JavaScript-code is geïsoleerd, een concept dat Geïsoleerde Wereld wordt genoemd . Elke extensie heeft zijn eigen inhoudscript JavaScript-context onzichtbaar voor anderen en de pagina, waardoor codeconflicten worden voorkomen.

Voorbeelddefinitie in manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

De attributen hebben de volgende betekenis:

chrome.tabs.executeScript kunnen ook op aanvraag worden geïnjecteerd met chrome.tabs.executeScript , wat Programmatic Injection wordt genoemd.

Zie ook

• Officiële documentatie: Content Scripts
• Stack Overflow-documentatie: Content Scripts

Opties pagina

Optiepagina's worden gebruikt om de gebruiker de mogelijkheid te geven instellingen voor uw extensie te behouden.

Versie 2

Sinds Chrome 40 is er de mogelijkheid om de optiepagina te gebruiken als een vooraf gedefinieerd dialoogvenster bij chrome: // extensions .

De manier om een optiepagina in het manifest.json te definiëren is als volgt:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Deze optiepagina gedraagt zich als een dialoog, deze wordt geopend als een pop-up waarin de options.html wordt weergegeven. chrome_style past een Chrome-stylesheet toe om redenen van stijlconsistentie op uw chrome_style .

De opties worden automatisch weergegeven via het contextmenu van de extensieknop of de pagina chrome: // extensions .

U kunt de optiepagina ook programmatisch openen , bijvoorbeeld vanuit een pop-upinterface:

chrome.runtime.openOptionsPage();

Versie 1 ( verouderd )

Voorbeelddefinitie in manifest.json :

"options_page": "options.html"

Het wordt aanbevolen om versie 2 te gebruiken, omdat het gedrag van options_ui binnenkort wordt toegepast op optiepagina's van versie 1.

opslagruimte

Normaal moeten de instellingen behouden blijven, dus het gebruik van chrome.storage API wordt aanbevolen. De machtigingen kunnen als volgt worden gedeclareerd in het manifest.json :

"permissions": [
   "storage"
]

Officiële documentatie

• Optiepagina - versie 1
• Optiepagina - versie 2
• Opslag-API

Maak een nieuw tabblad aan

In de extensiecode kunt u elke chrome.* API gebruiken als u de vereiste machtigingen hebt opgegeven. Bovendien werken sommige API's alleen van achtergrondpagina's en sommige API's werken alleen van inhoudsscripts.

U kunt de meeste chrome.tabs methoden gebruiken om eventuele machtigingen aan te geven. Nu richten we ons op chrome.tabs.create

_{Opmerking: het nieuwe tabblad wordt geopend zonder popup .}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

U kunt meer informatie over tabobjecten vinden in de officiële Chrome-ontwikkelaar