Wie man eine Chrome Extension Make
Wenn Sie sich fragen, wie Sie eine Chrome-Erweiterung zu machen, Chrome Erweiterung Dokumentation ist für grundlegende Implementierungen. Allerdings erfordert viel googeln und Stack-Überlauf erweiterte Funktionen zu verwenden. Lassen Sie sich eine Zwischen Chrome-Erweiterung machen, die mit der Seite interagiert: es wird den ersten externen Link auf der Seite finden und öffnen Sie sich in einem neuen Tab.
Die manifest.json Datei teilt Chrome wichtige Informationen über Ihre Erweiterung, wie der Name und welche Berechtigungen er braucht.
Die grundlegendste mögliche Erweiterung ist ein Verzeichnis mit einer manifest.json Datei. Lassen Sie uns ein Verzeichnis erstellen und die folgende JSON in manifest.json setzen:
Um Ihre Erweiterung in Chrome zu laden, öffnen chrome: // extensions / in Ihrem Browser und klicken Sie auf „Entwicklermodus“ oben rechts. Klicken Sie nun auf „Load Erweiterung ausgepackt ...“ und wählen Sie das Verzeichnis der Erweiterung. Sie sollten jetzt Ihre Erweiterung in der Liste sehen.
Wenn Sie Code in Ihrer Erweiterung ändern oder ergänzen, kommt gerade auf dieser Seite und die Seite neu laden. Chrome wird Ihre Erweiterung neu zu laden.
Lassen Sie uns ein Content-Skript namens content.js hinzufügen:
Um das Skript zu injizieren, müssen wir unsere manifest.json Datei davon erzählen.
Fügen Sie diese auf Ihre manifest.json Datei:
Dies sagt Chrome content.js in jede Seite wir die besondere besuchen zu injizieren mit
Laden Sie Ihre Chrome-Erweiterung. Jede einzelne Seite, die Sie besuchen erscheint nun eine Benachrichtigung auf. Lassen Sie uns die erste URL einloggen stattdessen auf der Seite.
jQuery ist nicht notwendig, aber es macht alles einfacher. Zuerst laden Sie eine Version von jQuery aus dem jQuery CDN und steckt es in Ordnern Ihrer Erweiterung der. Ich habe die neueste Version minified, jquery-2.1.3.min.js. So laden Sie es, fügen Sie es vor „content.js“ manifest.json. Ihre ganze manifest.json sollte wie folgt aussehen:
Nun, da wir jQuery haben, machen sie es verwendet, um die URL des ersten externen Link auf der Seite in content.js zu protokollieren:
Beachten Sie, dass wir nicht jQuery verwenden müssen, um zu prüfen, ob das Dokument geladen ist. Standardmäßig spritzt Chrome Inhalt Skripte nach dem DOM abgeschlossen ist.
Probieren Sie es aus - Sie die Ausgabe in der Konsole Sie auf jeder Seite besuchen sehen sollten.
Wenn eine Erweiterung ein kleines Icon-Leiste neben Ihrer Adresse hinzufügt, das ist ein Browser-Aktion. Ihre Erweiterung kann für Klicks auf diese Schaltfläche hören und dann etwas tun.
Legen Sie die icon.png aus dem Google-Erweiterung Tutorial in Ihrem Erweiterungsordner und fügen Sie diese manifest.json:
Um die Browser-Aktion zu verwenden, müssen wir Message Passing hinzuzufügen.
Ein Content-Skript hat Zugriff auf die aktuelle Seite, wird aber in den APIs beschränkt darauf zugreifen können. Zum Beispiel kann es nicht für Klicks auf der Browser-Aktion hören. Wir brauchen eine andere Art von Skript zu unserer Erweiterung hinzuzufügen, ein Hintergrund-Skript, das den Zugang zu jedem Chrome-API hat, kann aber nicht die aktuelle Seite zugreifen. Wie Google es ausdrückt:
Content-Skripte haben einige Einschränkungen. Sie können nicht-Chrom verwenden. * APIs, mit Ausnahme der Verlängerung. i18n. Laufzeit. und Lagerung.
So wird der Inhalt Skript in der Lage sein, eine URL aus der aktuellen Seite zu ziehen, aber diese URL über den Hintergrund Skript übergeben muß, etwas Nützliches damit zu tun. Um verwenden wir zu kommunizieren, was Google Message Passing nennt. der es ermöglicht Skripte für Nachrichten zu senden und zu hören. Es ist der einzige Weg für Content-Skripte und Hintergrund-Skripte zu interagieren.
Fügen Sie die folgende manifest.json über den Hintergrund Skript zu sagen:
Jetzt werden wir background.js hinzufügen:
Dieser sendet eine beliebige JSON Nutzlast auf die aktuellen Registerkarte. Die Tasten der JSON-Nutzlast kann alles sein, aber ich wählte „Botschaft“ der Einfachheit halber. Jetzt müssen wir für diese Nachricht in content.js hören:
Beachten Sie, dass alle unsere vorherigen Code in den Hörer bewegt worden ist, so dass es nur ausgeführt wird, wenn die Nutzlast empfangen wird. Jedes Mal, wenn Sie den Browser Aktionssymbol klicken, sollten Sie eine URL sehen auf der Konsole protokolliert werden. Wenn es nicht funktioniert, versuchen Sie die Erweiterung neu zu laden und dann die Seite neu zu laden.
Wir können die chrome.tabs API verwenden, um einen neuen Tab zu öffnen:
Aber chrome.tabs kann nur von background.js verwendet werden. so werden wir etwas mehr Message Passing seit background.js muss hinzufügen, können Sie die Registerkarte öffnen, aber die URL nicht greifen kann. Hier ist die Idee:
- Hören Sie für einen Klick auf den Browser Aktion in background.js. Wenn es angeklickt wird, ein clicked_browser_action Ereignis content.js senden.
- Wenn content.js das Ereignis empfängt, greift es die URL des ersten Link auf der Seite. Dann sendet sie open_new_tab zurück zu background.js mit der URL zu öffnen.
- background.js lauscht open_new_tab und öffnet einen neuen Tab mit der angegebenen URL, wenn er die Nachricht erhält.
Ein Klick auf den Browser Aktion wird background.js auslösen. das wird eine Nachricht an content.js senden. die eine URL zurück zu background.js senden. die eine neue Registerkarte mit dem angegebenen URL geöffnet wird.
Zuerst müssen wir content.js sagen, die URL zu background.js zu senden. Ändern content.js diesen Code zu verwenden:
Jetzt müssen wir einige Code hinzuzufügen background.js zu sagen, für dieses Ereignis zu hören:
Nun, wenn Sie auf dem Browser-Aktion-Symbol klicken, öffnet sie einen neuen Tab mit der ersten externen URL auf der Seite.
Die vollständigen content.js und background.js sind oben. Hier ist die vollständige manifest.json:
Und hier ist die vollständige Verzeichnis-Struktur: