google-chrome-extension Tutorial
Erste Schritte mit der google-chrome-extension

Bemerkungen

Absolutes Minimumbeispiel

Jede Chrome-Erweiterung wird als entpackte Erweiterung gestartet : Ein Ordner, der die Dateien der Erweiterung enthält.

Eine Datei, die es enthalten muss, ist manifest.json , die die grundlegenden Eigenschaften der Erweiterung beschreibt. Viele der Eigenschaften in dieser Datei sind optional, aber hier ist ein absolutes Minimum der Datei manifest.json :

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

Erstellen myExtension irgendwo einen Ordner (z. B. myExtension ), und fügen Sie, wie oben aufgeführt, manifest.json hinzu.

Dann müssen Sie die Erweiterung in Chrome laden.

1. Öffnen Sie die chrome://extensions/ Seite, die über Menü> Weitere Tools> Erweiterungen aufgerufen werden kann .
2. Aktivieren Sie den Entwicklermodus mit einem Kontrollkästchen oben rechts, falls es noch nicht aktiviert ist.
3. Klicken Sie auf die Schaltfläche myExtension extension myExtension ... und wählen Sie den erstellten Ordner myExtension .

Das ist es! Ihre erste Erweiterung wird von Chrome geladen:

Natürlich tut es noch nichts, also ist es ein guter Moment, eine Übersicht über die Erweiterungsarchitektur zu lesen, um die benötigten Teile hinzuzufügen.

Wichtig: Wenn Sie Änderungen an Ihrer Erweiterung vornehmen, vergessen Sie nicht, zu chrome://extensions/ und klicken Sie auf den Reload- Link für Ihre Erweiterung, nachdem Sie Änderungen vorgenommen haben. Laden Sie bei Inhaltsskripten auch die Zielseite neu.

Hintergrundseite

Hintergrundseiten sind implizite Seiten, die Hintergrundskripte enthalten. Ein Hintergrundskript ist ein einzelnes, lang andauerndes Skript zum Verwalten einer Aufgabe oder eines Status. Es existiert für die Dauer Ihrer Erweiterung, und es ist jeweils nur eine Instanz davon aktiv.

Sie können es in Ihrem manifest.json so deklarieren:

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

Eine Hintergrundseite wird vom Erweiterungssystem erstellt, das alle in der Scripts-Eigenschaft aufgeführten Dateien enthält.

Sie haben Zugriff auf alle zulässigen chrome.* APIs.

Es gibt zwei Arten von Hintergrundseiten: permanente Hintergrundseiten, die immer geöffnet sind, und Ereignisseiten , die nach Bedarf geöffnet und geschlossen werden.

Wenn Sie möchten, dass Ihre Hintergrundseite nicht persistent ist, müssen Sie nur das persistent -flag auf false setzen:

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

Dieses Hintergrundskript ist nur aktiv, wenn ein Ereignis ausgelöst wird, für das Sie einen Listener registriert haben. In der Regel verwenden addListener zur Registrierung einen addListener .

Beispiel: Die App oder Erweiterung wird zuerst installiert.

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

Inhaltsskripte

Ein Inhaltsskript ist Erweiterungscode, der neben einer normalen Seite ausgeführt wird.

Sie haben vollen Zugriff auf das DOM der Webseite (und sind tatsächlich der einzige Teil der Erweiterung, der auf das DOM einer Seite zugreifen kann ). Der JavaScript-Code ist jedoch isoliert, ein Konzept, das als Isolated World bezeichnet wird . Jede Erweiterung hat einen eigenen Inhaltsskript-JavaScript-Kontext, der für andere Benutzer und die Seite nicht sichtbar ist, um Codekonflikte zu vermeiden.

Beispieldefinition in manifest.json :

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

Die Attribute haben folgende Bedeutung:

Inhaltsskripte können auch bei Bedarf mit chrome.tabs.executeScript ( Programmatic Injection) chrome.tabs.executeScript .

Siehe auch

• Offizielle Dokumentation: Inhaltsskripte
• Stack Overflow-Dokumentation: Inhaltsskripte

Optionen Seite

Optionsseiten werden verwendet, um dem Benutzer die Möglichkeit zu geben, Einstellungen für Ihre Nebenstelle beizubehalten.

Version 2

Seit Chrome 40 besteht die Möglichkeit, die Optionsseite als vordefinierten Dialog bei chrome: // extensions zu haben .

Die Möglichkeit, eine Optionsseite in manifest.json zu definieren, sieht folgendermaßen aus:

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

Diese Optionsseite verhält sich wie ein Dialog, sie wird als Popup geöffnet, in dem die Optionen.html angezeigt werden. chrome_style wendet aus Gründen der chrome_style ein Chrome-Stylesheet auf Ihre chrome_style an.

Die Optionen werden automatisch über das Kontextmenü der Erweiterungsschaltfläche oder die Erweiterungsseite von chrome: // angezeigt.

Sie können die Optionsseite auch programmgesteuert öffnen , z. B. über eine Popup-Benutzeroberfläche:

chrome.runtime.openOptionsPage();

Version 1 ( veraltet )

Beispieldefinition in manifest.json :

"options_page": "options.html"

Es wird empfohlen, Version 2 zu verwenden, da das Verhalten options_ui bald auf die options_ui von Version 1 angewendet wird.

Lager

Normalerweise müssen die Einstellungen chrome.storage werden. chrome.storage wird die Verwendung der chrome.storage API empfohlen. Die Berechtigungen können in der manifest.json folgendermaßen deklariert werden:

"permissions": [
   "storage"
]

Offizielle Dokumentation

• Optionsseite - Version 1
• Optionsseite - Version 2
• Speicher-API

Erstellen Sie eine neue Registerkarte

Im Erweiterungscode können Sie eine beliebige chrome.* API verwenden, wenn Sie die erforderlichen Berechtigungen dekaliert haben. Außerdem funktionieren einige APIs nur von Hintergrundseiten und einige APIs nur von Inhaltsskripts.

Sie können die meisten Methoden von chrome.tabs verwenden, um Berechtigungen zu deklarieren. Jetzt konzentrieren wir uns auf chrome.tabs.create

_{Hinweis: Die neue Registerkarte wird ohne popup Warnung geöffnet.}

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

Weitere Informationen zum Tab-Objekt finden Sie im offiziellen Chrome-Entwickler