Looking for google-chrome-extension Answers? Try Ask4KnowledgeBase
Looking for google-chrome-extension Keywords? Try Ask4Keywords

google-chrome-extensionErste Schritte mit der google-chrome-extension


Bemerkungen

TODO: Kurze Beschreibung der Chrome-Erweiterungen

Offizielle Dokumentation

Lesen Sie weiter

TODO: Füllen Sie Links zu wichtigen Übersichtsthemen

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 . Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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:

Attribut Beschreibung
Streichhölzer Gibt an, auf welchen Seiten dieses Inhaltsskript eingefügt wird. Folgt dem Match-Pattern- Format.
css Liste der CSS-Dateien, die in übereinstimmende Seiten eingefügt werden sollen.
js Liste der JS-Dateien, die in übereinstimmende Seiten eingefügt werden sollen. In der angegebenen Reihenfolge ausgeführt.

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

Siehe auch

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

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.

Erweiterungstaste

Chrome: // Erweiterungen

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