Wenn Sie sich fragen, wie Sie eine Chrome-Erweiterung erstellen, ist die Extensiondocumentation von Chrome ideal für grundlegende Implementierungen. Um jedoch mehr advancedfeatures zu verwenden, ist viel Googeln und Stapelüberlauf erforderlich. Lassen Sie uns eine erstellenintermediate Chrome-Erweiterung, die mit der Seite interagiert: Sie findet denersten externen Link auf der Seite und öffnet ihn in einer neuen Registerkarte.

manifest.json

Das manifest.die JSON-Datei teilt Chrome wichtige Informationen zu yourextension mit, z. B. den Namen und die erforderlichen Berechtigungen.,

Die grundlegendste mögliche Erweiterung ist ein Verzeichnis mit einer Datei.Lassen Sie uns ein Verzeichnis erstellen und das folgende JSON einfügen: :

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

Das ist das grundlegendste möglich , mit allen erforderlichen Feldern ausgefülltin. manifest_version sollten immer 2, da version 1 isunsupported ab Januar 2014. Bisher macht unsere Erweiterung absolut nichts,aber laden wir sie trotzdem in Chrome.,

Laden Sie Ihre Erweiterung in Chrome

Um Ihre Erweiterung in Chrome zu laden, öffnen Sie chrome://extensions/ in Ihrem Browserund klicken Sie oben rechts auf „Entwicklermodus“. Klicken Sie nun auf „Load unpackedextension…“ und wählen Sie das Verzeichnis der Erweiterung aus. Sie sollten jetzt yourextension in der Liste sehen.

Wenn Sie Code in Ihrer Erweiterung ändern oder hinzufügen, kehren Sie einfach zu dieser Seite zurück und laden Sie die Seite neu. Chrome lädt Ihre Erweiterung neu.

Inhaltsskripte

Ein Inhaltsskript ist „eine JavaScript-Datei, die im Kontext von Webseiten ausgeführt wird.,“Dies bedeutet, dass ein Inhaltsskript mit Webseiten interagieren kann, die der Browservisits. Nicht jede JavaScript-Datei in einer Chrome-Erweiterung kann dies tun; wir werden seewhy später.

Fügen wir ein Inhaltsskript mit dem Namen content.js:

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

Um das Skript zu injizieren, müssen wir unsere – Datei darüber informieren.,

Fügen Sie dies zu Ihrer – Datei hinzu:

"content_scripts": , "js": } ]

Dies weist Chrome an, content.js in jede Seite einzufügen, die wir mit dem besuchenspezielle <all_urls> URL-Muster. Wenn wir das Skript nur auf einigen injizieren wollenseiten, können wir Übereinstimmungsmuster verwenden. Hier sind einige Beispiele für Werte für"matches":

Laden Sie Ihre Chrome-Erweiterung neu. Jede einzelne Seite, die Sie jetzt besuchen erscheint eine Warnung. Wählen wir stattdessen die erste URL auf der Seite aus.,

Protokollierung der URL

jQuery ist nicht notwendig, aber es macht alles einfacher. Laden Sie zuerst aversion of jQuery vom jQuery CDN herunter und legen Sie es in den Ordner Ihrer Erweiterung. Idownloaded die neueste minimierte Version, jquery-2.1.3.min.js. Um es zu laden, fügen Sie es zu vor "content.js"hinzu., Ihre gesamte sollte so aussehen:

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

Nachdem wir jQuery haben, verwenden wir es, um die URL des ersten externen Links auf der Seite in content.js:

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

Beachten Sie, dass wir jQuery nicht verwenden müssen, um zu überprüfen, ob das Dokument geladen wurde. Bydefault, Chrome injiziert Inhaltsskripte, nachdem das DOM abgeschlossen ist.

Probieren Sie es aus – Sie sollten die Ausgabe in Ihrer Konsole auf jeder Seite sehen, die Sie besuchen.,

Browseraktionen

Wenn eine Erweiterung ein kleines Symbol neben Ihrer Adressleiste hinzufügt, ist dies eine browseraction. Ihre Erweiterung kann auf Klicks auf diese Schaltfläche und dann auf dosomething warten.

Setzen Sie das Symbol.png aus Googles Erweiterungs-Tutorial in Ihrem Erweiterungsordner undfügen Sie dies an :

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

Um die Browseraktion zu verwenden, müssen wir die Nachrichtenübergabe hinzufügen.

Nachrichtenübergabe

Ein Inhaltsskript hat Zugriff auf die aktuelle Seite, ist jedoch in den APIs beschränkt, auf die es zugreifen kann., Beispielsweise kann es nicht auf Klicks auf die Browseraktion warten. Wir müssen unserer Erweiterung einen anderen Skripttyp hinzufügen,ein Hintergrundskript, das Zugriff auf jede Chrome-API hat, aber nicht auf die aktuelle Seite zugreifen kann. Wie es google ausdrückt:

Inhaltsskripte haben einige Einschränkungen. Sie können keine chrome.* APIs verwenden, mit Ausnahme von extension, i18n, runtime und storage.,

Damit das Inhaltsskript eine URL aus der aktuellen Seite ziehen kann, muss diese URL jedoch an das Hintergrundskript übergeben, um etwas Nützliches zu tunmit ihm. Um zu kommunizieren, verwenden wir das, was Google Message Passing nennt, mit dem Skripte Nachrichten senden und abhören können. Es ist die einzige Möglichkeit fürcontent-Skripte und Hintergrundskripte zu interagieren.,

Fügen Sie Folgendes hinzu, um über das Hintergrundskript zu informieren:

"background": { "scripts": }

Jetzt fügen wir background.js:

Dies sendet eine beliebige JSON-Nutzlast an die aktuelle Registerkarte. Die Schlüssel des jsonPayload können alles sein,aber ich habe der Einfachheit halber "message". Jetzt müssen wir für diese Nachricht in content.js:

Beachten Sie, dass unser gesamter vorheriger Code in den Listener verschoben wurde, so dassEs wird nur ausgeführt, wenn die Nutzlast empfangen wird., Jedes Mal, wenn Sie auf das Browseraction-Symbol klicken, sollte eine URL in der Konsole protokolliert werden. Wenn es nicht funktioniert, laden Sie die Erweiterung neu und laden Sie die Seite neu.

Öffnen einer neuen Registerkarte

Wir können die chrome.tabs API verwenden, um eine neue Registerkarte zu öffnen:

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

Aber chrome.tabs kann nur von background.js verwendet werden, also müssen wir message passing since background.js can open the tab, but can ‚ t grab theURL., Hier ist die Idee:

  1. Hören Sie auf einen Klick auf die Browseraktion in background.js. Wenn es angeklickt wird, senden Sie einclicked_browser_action Ereignis an content.js.
  2. Wenn content.js das Ereignis empfängt, wird die URL des ersten Links auf der Seite abgerufen. Dann sendet es open_new_tab zurück zu background.js mit der URL toopen.
  3. background.js hört auf open_new_tab und öffnet beim Empfang der Nachricht eine neue Registerkarte mit der angegebenen Url.,

Wenn Sie auf die Browseraktion klicken, wird background.js ausgelöst, wodurch amessage an content.js gesendet wird, wodurch eine URL an background.js zurückgesendet wird, wodurch eine neue Registerkarte mit der angegebenen URL geöffnet wird.

Zuerst müssen wir content.js anweisen, die URL an background.jszu senden., Ändern Siecontent.js, um diesen Code zu verwenden:

Jetzt müssen wir einen Code hinzufügen, um background.js mitzuteilen, um dieses Ereignis abzuhören:

Wenn Sie nun auf das Browseraktionssymbol klicken, wird eine neue Registerkarte mit der erstenexterne URL auf der Seite.

Wrapping it up

Die vollständige content.js und background.js sind oben., Hier ist die vollständige :

Und hier ist die vollständige Verzeichnisstruktur:

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

Mehr zum Erstellen einer Chrome-Erweiterung

Weitere Informationen finden Sie in der offiziellen Chrome-Erweiterungsdokumentation.