Erste Schritte Aufbau einer Chrome-Erweiterung - Google Chrome
Wir tun dies, indem ein UI-Element implementieren wir einen Browser Aktion nennen. die uns erlaubt, eine anklickbare Symbol zu platzieren rechts neben Chrome Omnibox für einfachen Zugang. das Symbol klicken, wird ein Popup-Fenster mit einer von der aktuellen Seite abgeleitet Bild gefüllt öffnen, die so etwas wie folgt aussehen:
Wenn Sie möchten, zu Hause folgen (und soll!), Ein glänzendes neues Verzeichnis auf Ihrem Computer erstellen und Pop Ihren bevorzugten Texteditor öffnen. Lasst uns anfangen!
Gehen Sie weiter und speichern diese Daten in eine Datei namens manifest.json im Verzeichnis, das Sie erstellt haben, oder laden Sie eine Kopie von manifest.json aus unserem Beispiel-Repository.
Sie haben wahrscheinlich bemerkt, dass manifest.json auf zwei Ressourcendateien darauf, wenn die Browser-Aktion definieren: icon.png und popup.html. Beide Ressourcen müssen innerhalb des Erweiterungspaket vorhanden ist, also lassen Sie uns schaffen sie jetzt:
popup.html wird innerhalb der Popup-Fenster wiedergegeben werden, die in Reaktion auf einen Benutzer klicken Sie auf dem Browser Aktion erstellt wird. Es ist eine Standard-HTML-Datei, wie sie von Web-Entwicklung gewohnt sind, können Sie mehr oder weniger freie Herrschaft über das, was die Pop-up-Displays geben. Laden Sie ein Exemplar popup.html aus unserem Beispiel-Repository. und speichern Sie es in das Verzeichnis, in dem Sie arbeiten.
Sie sollten nun vier Dateien in Ihrem Arbeitsverzeichnis haben: icon.png. manifest.json. popup.html. popup.js. Der nächste Schritt ist, diese Dateien in Chrome zu laden.
Laden Sie die Erweiterung
Erweiterungen, die Sie aus dem Chrome Web Store herunterladen werden als CRX Dateien verpackt auf, die für die Verteilung ist groß, aber nicht so groß für die Entwicklung. In dieser Erkenntnis Chrome gibt Ihnen eine schnelle Möglichkeit, Laden Sie Ihr Arbeitsverzeichnis für die Prüfung. Lassen Sie uns nun das tun.
Stellen Sie sicher, dass der Entwicklermodus Checkbox in der oberen rechten Ecke markiert ist.
Klicken Sie ausgepackt Erweiterung laden ... einen Datei-Auswahldialog eingeblendet.
Navigieren Sie zu dem Verzeichnis, in dem Sie Ihre Erweiterungsdateien leben, und wählen Sie es.
Alternativ können Sie das Verzeichnis ziehen, wo Ihre Erweiterungsdateien auf Chrom leben: // extensions in Ihrem Browser zu laden.
Wenn die Erweiterung gültig ist, wird es sofort geladen und aktiv werden! Wenn es ungültig ist, wird eine Fehlermeldung am oberen Rand der Seite angezeigt werden. Korrigieren Sie den Fehler, und versuchen Sie es erneut.
Fiddle, Code
Jetzt, wo Sie Ihre erste Erweiterung und läuft haben, lassen Sie uns mit den Dingen Geige, so dass Sie eine Idee, was den Entwicklungsprozess aussehen könnte. Zum Beispiel, lassen Sie sich auf der Browser-Aktionstaste ein Tooltip gesetzt.
Nach Angaben der browserAction Dokumentation können Tooltips durch Angabe des default_title Schlüssels in der Manifest-Datei festgelegt werden. Öffnen manifest.json. und fügen Sie den default_title Schlüssel zum browser_action. Stellen Sie sicher, dass die JSON gültig ist, so geben Sie die Schlüssel und fügen Sie ein Komma, wo nötig.
Die Manifestdatei wird nur analysiert, wenn die Erweiterung geladen wird. Wenn Sie die vorherigen Änderungen in Aktion sehen wollen, muss die Erweiterung neu geladen werden. Besuchen Sie die Erweiterungen Seite (gehen Sie zu chrome: // extensions oder Extras> Erweiterungen unter dem Chrome-Menü.), Und klicken Sie auf Aktualisieren unter Ihrer Erweiterung. Alle Erweiterungen werden neu geladen auch wenn die Erweiterungen Seite neu geladen wird, z.B. nach der Kollision mit F5 oder Strg - R.
Was als nächstes?
Die Chrome-Erweiterung Übersicht sichert ein wenig, und füllt eine Menge Details über Erweiterungen Architektur im Allgemeinen und einige spezifischen Konzepte, die Sie mit für die Zukunft zu kennen wollen werden. Es ist der beste nächste Schritt auf dem Weg zur Erweiterung Meisterschaft.
Niemand schreibt perfekten Code auf dem ersten Versuch, was bedeutet, dass Sie für das Debuggen Ihrer Kreationen zur Verfügung über die Möglichkeiten erfahren müssen werden. Unser Debug-Tutorial ist perfekt für das, und lohnt sich sorgfältig zu lesen.
Chrome-Erweiterungen haben Zugriff auf leistungsstarke APIs darüber hinaus, was auf dem offenen Web verfügbar ist: Browser Aktionen nur die Spitze des Eisbergs sind. Unsere Chrom. * APIs Dokumentation führt Sie durch jede API wiederum.
Schließlich haben die Entwickler-Führer Dutzende von zusätzlichen Links zu den Stücken von Dokumentation, die Sie von Interesse sein könnten.
Inhalt unter der CC-BY 3.0 Lizenz