Chrome-Erweiterungen programmieren und erstellen

Dieses Tutorial ist in 3 Abschnitte unterteilt: Ein erster Abschnitt, in dem wir verschiedene Konzepte zu Erweiterungen in Chrome, deren Struktur und die grundlegende Erstellung einer Erweiterung erläutern. Im zweiten Abschnitt konzentrieren wir uns auf die Erstellung von Erweiterungen für diesen großartigen Browser wie Google Chrome und führen mehrere praktische Beispiele durch. Schließlich erläutern wir im dritten Abschnitt erweiterte Optionen beim Erstellen von Erweiterungen und wie Sie diese im Google Chrome-Webstore veröffentlichen, damit er der Öffentlichkeit zur Verfügung steht.

Was sind Erweiterungen in Google Chrome?Erweiterungen sind kleine Programme, die die Funktionalität des Browsers, in diesem Fall Chrome, ändern und verbessern können. Diese werden mit Webtechnologien wie HTML, Javascript und CSS entwickelt.

Die Erweiterungen haben wenig bis keine Benutzeroberfläche. Das Bild unten zeigt beispielsweise ein Symbol eines Vorhängeschlosses, das beim Anklicken eine kleine Schnittstelle öffnet.

Diese spezielle Erweiterung wird verwendet, um Ihre E-Mails mit einem PGP-Schlüssel zu verschlüsseln und zu entschlüsseln. Erweiterungen sind Dateien, die in einer verpackt sind, die der Benutzer herunterlädt und installiert. Diese Paketierung muss im Gegensatz zu normalen Webanwendungen nicht von Webinhalten abhängig sein.

Wie oben beschrieben, können Sie mit Erweiterungen Chrome Funktionen hinzufügen, ohne tief in nativen Code einzutauchen. Neue Erweiterungen können mit grundlegenden Technologien erstellt werden, mit denen die meisten Webentwicklungsprogrammierer arbeiten: HTML, CSS und Javascript.

1. So erstellen und programmieren Sie eine Chrome-Erweiterung

Zunächst erstellen wir eine einfache Erweiterung, die ein Bild von Google abruft, wobei die URL der aktuellen Seite als Suchbegriff verwendet wird. Wir werden dies tun, indem wir ein Benutzeroberflächenelement implementieren, das wir aufrufen chrome.browserAction, wodurch wir ein Symbol direkt neben dem Chrome-Menü platzieren können, auf das Sie für den Schnellzugriff klicken können. Wenn Sie auf dieses Symbol klicken, wird ein Popup-Fenster geöffnet, das ein von der aktuellen Seite erhaltenes Bild enthält, das wie folgt aussieht:

Um unsere Praxis zu beginnen, erstellen wir ein Verzeichnis namens Bildbetrachter, darin werden wir alle Dateien aufnehmen, mit denen wir arbeiten werden. Als Entwicklungseditor können Sie Ihren bevorzugten Editor verwenden, in meinem Fall verwende ich den Chrome Dev Editor, den Sie unter der folgenden Adresse herunterladen können:

Chrome-Entwicklereditor

Als erstes müssen wir eine Manifestdatei namens . erstellen manifest.json. Dieses Manifest ist nichts anderes als eine Metadatendatei im JSON-Format, die Eigenschaften wie Name, Beschreibung, Versionsnummer seiner Erweiterung usw. enthält. Auf fortgeschrittener Ebene werden wir Chrome verwenden, um Chrome zu erklären, was die Erweiterung tun wird und welche Berechtigungen erforderlich sind, um bestimmte Dinge zu tun.

Das Manifest-Dateiformat ist wie folgt:

 {// Erforderlich "manifest_version": 2, "name": "My Extension", "version": "versionString", // Empfohlen "default_locale": "es", "description": "Eine reine Textbeschreibung", " icons ": {…}, // Wähle eine (oder keine)" browser_action ": {…}," page_action ": {…}, // Optional" author ":…," automation ":…," background ": {// Empfohlenes "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," commands ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," inkognito ":" überspannend oder aufteilen "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " Plattformen ":…," Plugins ": […]," Anforderungen ": {…}," Sandbox ": […]," short_name ":" Kurzname "," Signatur ":…," Rechtschreibprüfung ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources": […]} 

Als nächstes beschreibe ich die Funktion, die die wichtigsten Labels erfüllt:

Im Erforderlichen:

• manifest_version: Es ist die Manifestversion, sie wird durch eine ganze Zahl dargestellt, die die Version des Dateiformats angibt. Ab Chrome 18 müssen Entwickler die Zahl 2 angeben.

• Süßkartoffel: Dies ist der Name, den Ihre Nebenstelle haben wird. Dieser darf maximal 45 Zeichen lang sein, Name ist das Hauptdefinitionselement der Erweiterung und ein Pflichtfeld. Es wird an folgenden Stellen angezeigt:

a) Im Installationskasten.
b) In der Benutzeroberfläche, in der die Nebenstelle verwaltet wird.
c) Im virtuellen Chrome-Store.

• Ausführung: Sie muss aus einer bis vier ganzen Zahlen bestehen, die durch Punkte getrennt sind, die die Version der Erweiterung kennzeichnen. Hier sind einige Beispiele für gültige Versionen:

"Version 1"
"Version": "1.0"
"Version": "2.10.2"
"Version": "3.1.2.4567"

Empfohlen:

• default_locale: Gibt das Unterverzeichnis von _locales (Sprachen) an, das die Standardzeichenfolgen für diese Erweiterung enthält. Sie müssen alle für den Benutzer sichtbaren Zeichenfolgen in einer Datei namens "messages.json" ablegen. Jedes Mal, wenn Sie eine neue Sprache hinzufügen, müssen Sie eine neue Datei hinzufügen Nachrichten.json im Verzeichnis _locales / localecode, wobei localecode der Sprachcode ist, genauso wie en Englisch ist und für die spanische Sprache steht.

Ein Beispiel für eine internationalisierte Erweiterung mit Unterstützung für Englisch (en), Spanisch (es) und Koreanisch (ko) wäre wie folgt:

• Bezeichnung: Es besteht aus einem String im Klartext (ohne HTML oder sonstiges Format) mit maximal 132 Zeichen, der die Funktionalität der Erweiterung beschreibt.

• Symbole: Ermöglicht Ihnen, ein oder mehrere Symbole hinzuzufügen, die die Erweiterung darstellen. Ein 128x128px-Symbol sollte immer bereitgestellt werden. Diese wird während der Installation und im Chrome Web Store verwendet. Erweiterungen müssen auch ein 48 x 48-Symbol bereitstellen, das auf der Verwaltungsseite für Chrome-Erweiterungen verwendet wird (chrome: // extensions). Sie können auch ein 16 x 16-Symbol angeben, das als Favicon für die Seiten einer Erweiterung verwendet werden soll.

Icons sollten generell im PNG-Format vorliegen, da es Transparenz am besten unterstützt. Sie können jedoch in jedem von WebKit unterstützten Format vorliegen, einschließlich BMP.webp, GIF.webp, ICO und JPEG.webp. Hier ist ein Beispiel für die Symbolspezifikation:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Beispiel

Wählen Sie eine (oder keine) aus:

• browser_action: Verwenden Sie browser_action, um Symbole in die Hauptsymbolleiste oben im Google Chrome-Browser rechts neben der Adressleiste einzufügen. Zusätzlich können Sie Tooltip (schwebende Nachricht), Abzeichen (schwebender Text auf dem Symbol) und Popup (schwebendes Fenster) hinzufügen.

Anwendungsbeispiel browser_action:

 {"name": "Meine Erweiterung",… "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // optional}, "default_title": "Google Mail", // optional; zeigt einen "default_popup" Tooltip: "popup.html" // optional}, …}

• page_action: Verwenden Sie diese API, um Ihr Symbol in der Adressleiste zu platzieren.

Anwendungsbeispiel:

 {"name": "Meine Erweiterung",… "page_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38. png" // optional}, "default_title": "Google Mail", // optional; in Beschreibung anzeigen "default_popup": "popup.html" // optional},…} 

Ex

Optional:

• Hintergrund: Ein häufiges Bedürfnis bei Erweiterungen besteht darin, eine einzige Seite für die Ausführung langer Sequenzen zu haben, um bestimmte Aufgaben oder Status zu verwalten. Dies ist eine HTML-Seite, die in Verbindung mit der Erweiterung ausgeführt wird. Es wird gestartet, wenn die Erweiterung gestartet wird, und aktiviert jeweils nur eine Instanz davon. Anstatt den Hintergrund zu verwenden, wird empfohlen, eine Ereignisseite zu verwenden.

In einer typischen Erweiterung mit einer Seite im Hintergrund fungieren die Benutzeroberfläche, beispielsweise browser_action oder page_action, und einige Seitenoptionen als Ansicht der Erweiterung. Wenn die Ansicht einen Status kennen muss (Fenster geschlossen, Seite aktualisiert …), stellt sie die Anforderung des Status an die Seite, die als Hintergrund gefunden wird. Wenn die Hintergrundseite benachrichtigt, dass sich der Status geändert hat, informiert sie die Ansicht, dass sie aktualisiert oder eine Aktion ausgeführt wird.

Sein Format ist wie folgt:

 {"name": "Meine Erweiterung",… "background": {"scripts": ["background.js"]},…} 

Format

• Veranstaltungsseiten: Bevor Sie das folgende Attribut definieren, müssen Sie erklären, worum es bei den Ereignisseiten geht. Anwendungen und Erweiterungen benötigen häufig ein einzelnes Skript mit langer Ausführungszeit, um bestimmte Aufgaben oder Zustände zu verarbeiten. Dies ist das Ziel von Veranstaltungsseiten. Ereignisseiten werden nur bei Bedarf geladen. Wenn es nicht aktiv etwas tut, wird es aus dem Cache entladen, wodurch Speicher und andere Systemressourcen freigegeben werden.

Die Leistungsvorteile sind erheblich, insbesondere bei Geräten mit geringem Stromverbrauch. Aus diesem Grund wird empfohlen, mehr Ereignisseiten als Hintergrund zu verwenden.

Die Deklaration einer Ereignisseite in der Manifestdatei wäre wie folgt:

 {"name": "Meine Erweiterung", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Wie Sie sehen können, ist der Unterschied zu Background das persistente Attribut, das den Status false hat.

• chrome_settings_overrides: Es wird verwendet, um einige ausgewählte Konfigurationen in Chrome zu überschreiben. Diese API ist nur für Windows verfügbar.

Einige dieser Konfigurationen können die Homepage (Browser-Startseite, Suchanbieter (der Suchanbieter) usw. sein.

Konfigurationsbeispiel:

 {"name": "Meine Erweiterung",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword " : "Schlüsselwort .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/favicon. ico", "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {searchTerms} "," search_url_post_params ":" search_lang = __ MSG_url_domain__ "," suggest_url_post_params ":" vorschlagen_lang = __ "MSG__url_ = Domäne MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternative_urls ": [" http: //www.moo.__MSG_url_ =__/s? .noo.__MSG_url_url_ ?q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …} 

• chrome_ui_overrides: Diese Eigenschaft der Erweiterung wird verwendet, um einige Einstellungen in der Chrome-Benutzeroberfläche zu überschreiben. Wie zum Beispiel die Markierungen. Seine Konfiguration ist wie folgt:

 {"name": "Meine Erweiterung",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…} 

In diesem Fall entfällt der Stern, den der Browser für Favoriten hat.

• chrome_url_overrides: Dies ist eine Möglichkeit, die HTML-Datei aus der Erweiterung für eine Seite zu ersetzen, die der Google Chrome-Browser normalerweise bereitstellt. Darüber hinaus können Sie auch den CSS- und JavaScript-Code überschreiben.

Eine Erweiterung mit dieser Konfiguration kann eine der folgenden Chrome-Seiten ersetzen:

• Lesezeichen-Manager: Es ist die Seite, die angezeigt wird, wenn der Benutzer die Option aus dem Lesezeichen-Manager-Menü im Chrome-Menü oder für Mac das Lesezeichen-Manager-Element im Lesezeichen-Menü auswählt.

VERGRÖSSERN

• Geschichte (Geschichte): Dies ist die Seite, die angezeigt wird, wenn der Benutzer den Verlauf aus dem Chrome-Menü auswählt oder auf dem Mac das Element zeigt den vollständigen Verlauf aus dem Menü in der Verlaufsoption.

VERGRÖSSERN

• Neuer Tab (newtab): Dies ist die Seite, die angezeigt wird, wenn der Benutzer eine neue Registerkarte oder ein neues Fenster im Browser erstellt. Sie können diese Seite auch aufrufen, indem Sie die folgende Adresse in die Adressleiste eingeben: chrome: // newtab

VERGRÖSSERN

NotizEine einzelne Erweiterung kann nur eine Seite überschreiben. Eine Erweiterung kann beispielsweise die Lesezeichen und damit die Verlaufsseite nicht überschreiben.

 {"name": "Meine Erweiterung",… "chrome_url_overrides": {"newtab": "mypage.html" // die Optionen sind newtab, history, bookmarks},…}

• Befehle: Diese Befehls-API wird verwendet, um die Tastenkombinationen hinzuzufügen, die eine Aktion in Ihrer Erweiterung auslösen. Beispielsweise eine Aktion zum Öffnen der Browseraktion oder zum Senden eines Befehls an die Erweiterung.

 {"name": "Meine Erweiterung",… "commands": {"toggle-feature-foo": {"suggested_key": {"default": "Strg + Umschalt + Y", "mac": "Befehl + Umschalt + Y "}," description ":" Funktion umschalten foo "}," _execute_browser_action ": {" Recommended_key ": {" windows ":" Strg + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Strg + Umschalt + U", "linux": "Strg + Umschalt + J"}}, "_execute_page_action": {"suggested_key": {"default": "Strg + Umschalt + E", "windows ":" Alt + Umschalt + P "," mac ":" Alt + Umschalt + P "}}},…} 

Auf Ihrer Hintergrundseite können Sie einen Controller für jeden der in manifest.js definierten Befehle binden (außer für '_execute_browser_action'J'_execute_page_action') über onCommand.addListener.

Zum Beispiel:

 chrome.commands.onCommand.addListener (Funktion (Befehl) {console.log ('Befehl gedrückt:', Befehl);}); 

• content_scripts: Es handelt sich um Javascript-Dateien, die im Kontext von Webseiten ausgeführt werden. Durch die Verwendung des standardmäßigen Document Object Model (DOM) können sie die Details der Webseiten der Browserbesuche lesen oder Änderungen daran vornehmen.

 {"name": "Meine Erweiterung",… "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…} 

• content_scripts: Um unsere Erweiterungen sicherer zu machen und potenzielle Cross-Site-Scripting-Probleme zu vermeiden, hat das Chrome-Erweiterungssystem das allgemeine Konzept von Inhaltssicherheitsrichtlinie (CSP). Dadurch werden sehr strenge Richtlinien eingeführt, die Erweiterungen standardmäßig sicherer machen. Im Allgemeinen funktioniert CSP als Black- und Whitelist-Mechanismus für die Ressourcen, die von seinen Erweiterungen geladen oder ausgeführt werden.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

Dies waren einige der wichtigsten Attribute. Für unsere erste Praxis werden wir unsere Datei manifest.json wie folgt definieren:

 {"manifest_version": 2, "name": "Startup example", "description": "Diese Erweiterung zeigt ein Bild von Google-Bildern der aktuellen Seite", "version": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," Berechtigungen ": [" activeTab "," https://www.googleapis.com/ "]}

Wie Sie in unserem Beispielmanifest sehen können, haben wir eine browser_action deklariert, die activeTab-Berechtigung zum Anzeigen der URL des aktuellen Tabs und dem Host wurde die Berechtigung erteilt. Auf diese Weise kann auf die Google-API zugegriffen werden, um die Suche nach externen Bildern durchzuführen.

Beim Definieren von browser_action werden wiederum 2 Ressourcendateien gefunden: icon.png.webp und popup.html. Beide Ressourcen müssen im Erweiterungspaket vorhanden sein, also erstellen wir sie jetzt:

• icon.png.webp Es wird neben der Multifunktionsbox angezeigt und wartet auf eine Benutzerinteraktion. Es ist nur eine 19px x 19px PNG-Datei.

• popup.html wird im Popup-Fenster angezeigt, das als Reaktion auf den Klick des Benutzers auf das Symbol erstellt wird. Es handelt sich um eine Standard-HTML-Datei mit folgendem Inhalt:

 Popup der Erweiterung "Erste Schritte"VERGRÖSSERN
2. Stellen Sie sicher, dass das Kontrollkästchen Entwicklermodus in der oberen rechten Ecke aktiviert ist.

3. Klicken Sie auf Entpackte (entpackte) Erweiterung hochladen, um einen Dateiauswahldialog aufzurufen.
VERGRÖSSERN
4. Navigieren Sie zu dem Verzeichnis, in dem sich Ihre Erweiterungsdateien befinden, und wählen Sie es aus.
Alternativ können Sie das Verzeichnis, das Ihr Projekt enthält, ziehen und im Chrome-Erweiterungsfenster ablegen. Dadurch wird die Erweiterung in Ihrem Browser geladen.

Auf diese Weise haben wir eine einfache Erweiterung für Google Chrome erstellt. In unserer nächsten Ausgabe werden wir uns mit der Konstruktion von Erweiterungen in Verbindung mit Entwicklungs-Frameworks wie jquery und Bootstrap befassen, die es uns ermöglichen, unsere Entwicklung zu rationalisieren.

2. Beispiel für Erweiterungen für Chrome

In diesem Abschnitt werden wir mehrere Beispiele ausführen, die es uns ermöglichen, viele der Funktionen, die beim Erstellen einer Erweiterung für Google Chrome vorhanden sind, vollständig zu verstehen.

Übung 1 - Blauer Hintergrund
In diesem Beispiel werden wir eine einfache Erweiterung erstellen, in der wir erfahren, wie wir den Inhalt der Seiten, die wir in unserem Browser laden, ändern können. In diesem Fall ändern wir die Hintergrundfarbe der geladenen Seite und ändern sie in Blau.
Wie ich im ersten Teil dieses Tutorials erklärt habe, können Sie jede Entwicklungs-IDE verwenden, in meinem Fall werde ich den Chrome Dev Editor verwenden.
VERGRÖSSERN
Zu Beginn erstellen wir ein neues Verzeichnis mit dem Namen Blauer Hintergrund und wir werden ein Projekt mit demselben Namen erstellen.
VERGRÖSSERN
VERGRÖSSERN
Darin werden wir unsere erste Datei erstellen manifest.json die die Definitionen unserer Erweiterung enthalten wird.
VERGRÖSSERN
Unser Archiv manifest.json muss folgenden Code enthalten:
 {"manifest_version": 2, "name": "Blue Background", "description": "Diese Erweiterung hat die Hintergrundfarbe der aktuellen Seite geändert", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Make this page Blue"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }} 
Da unsere Erweiterung einfach ist, enthält sie nur ein Symbol, das beim Drücken eine Aktion ausführt. Wie Sie in der Datei sehen können manifest.json Wir definieren einen Namen und seine Beschreibung in der browser_action Wir definieren das Symbol, das in der Leiste unseres Google Chrome-Browsers angezeigt wird, und einen Titel, der angezeigt wird, wenn der Mauszeiger über diesem Symbol positioniert wird. In Bezug auf die Berechtigungen werden wir festlegen, dass dies nur in der aktiven Registerkarte erfolgt. Die Datei, die im Hintergrund ausgeführt wird, ist unsere Datei background.js die nicht dauerhaft ist, da sie nur ausgeführt wird, wenn wir auf die Erweiterung klicken.

Wir erstellen unser Icon und speichern es im Projektverzeichnis wie in definiert manifest.json. In diesem Fall in der Wurzel des Projekts.
Dann erstellen wir eine JavaScript-Datei namens background.js im selben Verzeichnis mit folgendem Code:
 // Wird aufgerufen, wenn der Benutzer auf die Erweiterung chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: ' document.body.style.backgroundColor = "blue"'});}); 
Verlassen Sie das gesamte Projekt wie folgt:

VERGRÖSSERN
Um unsere Erweiterung auszuführen, müssen Sie nur die Wiedergabetaste in der oberen Leiste des Chrome Dev Editors drücken.
VERGRÖSSERN
Durch Drücken wird die Erweiterung automatisch in den Google Chrome-Browser geladen.

Lassen Sie uns unsere Erweiterung in Aktion sehen, indem Sie auf das von mir erstellte Symbol (blauer Hintergrund mit dem weißen Buchstaben A) klicken, die Seite, die ich im aktuellen Tab geladen habe, in meinem Fall mein Benutzerkonto in Solvetic (http: // www .solvetic… .berth-ramncgev /) ändert seinen Hintergrund in Blau. Es ist zu beachten, dass sich nur die Farbe des BODY-Elements ändert und nicht die darin enthaltenen DIVs, da ich es in meinem . so definiert habe background.js.
VERGRÖSSERN
Übung 2 - MultipleColor
In diesem Beispiel zeige ich, wie wir unsere Arbeit aus der Entwicklungs-IDE und aus dem Code heraus optimieren können. Im Chrome-Entwicklereditor, klicken wir auf die Schaltfläche +, um ein neues Projekt zu erstellen. Diesmal ändern wir den Projekttyp und wählen die Option JavaScript Chrome-App.
VERGRÖSSERN
Wie Sie sehen, generiert es automatisch die gesamte Struktur unseres Projekts. Mit unserer Datei manifest.json mit den gängigsten Definitionen.
VERGRÖSSERN
Zu dieser Datei werden wir eine kurze Beschreibung auf dem Etikett hinzufügen Bezeichnung Platzieren Sie den gewünschten Text, in meinem Fall "Erweiterung, die das Ändern der Hintergrundfarbe ermöglicht". Für dieses Projekt werden wir 2 Icons erstellen, eines von 16x16 Pixel und das andere von 128x128 Pixel, wie Sie in der Struktur sehen können, diese werden im Verzeichnis gespeichert Vermögenswerte.
Wir werden den folgenden Code unter dem Tag hinzufügen minimum_chrome_version:
 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Ändere die Seite in mehrere Farben.", " default_popup ":" popup.html "}, 
Wie Sie sehen, definieren wir ein Popup oder eine Ansicht, die den gesamten HTML-Code enthält, den der Benutzer sieht, wenn er auf unsere Erweiterung klickt. Dann fügen wir den folgenden Code hinzu:
 "content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}] 
content_scripts- Enthält die JavaScript (js) und Stylesheet (css) Dateien, die im Kontext der Webseite ausgeführt werden. Es kann die folgenden Eigenschaften enthalten:


Streichhölzer: Verpflichtend. Spezifisch, auf welche Seite das Skript eingefügt wird.


Ausschluss_Übereinstimmungen: Optional. Seiten, die ausgeschlossen werden, damit das Skript nicht eingefügt wird.


match_about_blank: Optional. Dieser Wert ist boolesch und gibt an, ob das Skript in die leere Seite eingefügt wird (about: blank und about: srcdoc).


CSS: Optional. Es ist eine Anordnung, die die Liste der CSS-Dateien angibt, die in die im Browser angeforderte Seite eingefügt werden.


js: Optional. Es handelt sich um eine Anordnung mit der Liste der JavaScript-Dateien, die in die im Browser angeforderte Seite eingefügt werden.


run_at: Optional. Es ist eine Textzeichenfolge, die steuert, wann die js-Dateien geladen werden. Sein Wert kann sein:
document_start: Dateien werden nach jeder CSS-Datei eingefügt, aber bevor ein DOM erstellt oder ein anderes Skript ausgeführt wird.


document_end: Dateien werden unmittelbar nach Abschluss des DOM eingefügt, jedoch bevor Ressourcen wie Bilder und Frames geladen werden.


document_idle: Der Browser wählt die Zeit zum Einfügen von Skripten zwischen document_end und unmittelbar nach dem Auslösen des Ereignisses window.onload Diese Option ist die standardmäßig konfigurierte.

Am Ende unserer Datei manifest.json Es sollte wie folgt sein:
VERGRÖSSERN
Wie Sie sehen können, haben wir in der Unterkunft ein paar neue Dinge hinzugefügt CSS Wir haben das Bootstrap-Framework definiert, das die Entwicklung auf Stilebene nicht einfacher macht. Gefolgt auf Eigenschaft js Wir definieren die JQUERY-JavaScript-Bibliothek, die es uns nicht ermöglicht, alles, was mit JavaScript zu tun hat, schneller und einfacher zu bearbeiten. Unsere Datei index.html sollte so aussehen:
 Popup MultipleColorrotBlauGrünGelb
In der Datei index.html machen wir einfach die Verweise auf unsere Bootstrap-, Jquery- und main.js-Dateien. Im Body definieren wir einen Bootstrap-Container mit seinen Divs, die als Schaltflächen für die verschiedenen Farboptionen dienen.

Für die Datei main.js verwenden wir das Click-Ereignis, das beim Drücken der Maustaste auf jeder Klasse "col-md-12" ausgeführt wird, indem wir die Hintergrundfarbe des ausgewählten Elements nehmen und dem Körper des zuweisen Seite wurde geöffnet. Dann wird das Ereignis window.close() ausgeführt; die das Fenster unserer Erweiterung schließen. Der für main.js definierte Code lautet wie folgt:
 $ (document) .ready (function () {$ (".col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); 
Das Ergebnis, wenn wir unsere Erweiterung ausführen, können wir das Symbol, das wir dafür erstellt haben, in der oberen Leiste visualisieren.


Wenn Sie auf unsere Erweiterung klicken, wird das folgende Popup angezeigt:

Und wenn Sie eine der Optionen auswählen, sieht das Ergebnis wie folgt aus:
VERGRÖSSERN
Übung 3 - Top-Geschichte
In diesem Beispiel werden wir alles oben Gesehene anwenden und eine Erweiterung erstellen, die uns beim Anklicken ein Popup mit der Liste der am häufigsten besuchten Seiten unseres Browsers anzeigt und direkten Zugriff auf diese Seiten ermöglicht. Der einzige Unterschied in diesem Beispiel besteht darin, dass wir von einer der Chrome-APIs die Erlaubnis anfordern, auf die am häufigsten aufgerufenen Seiten von Chrome zuzugreifen. Der Name dieser API ist chrome.topSites.
Zu Beginn gehen wir Chrome-Entwicklereditor und wir haben unser Projekt mit dem Namen erstellt TopHistorie und als Projekttyp wählen wir die Option JavaScript Chrome App.

Dann unsere Datei manifest.json Es sollte wie folgt sein:
 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Liste der am häufigsten aufgerufenen Seiten in unserem Browser anzeigen", "version": "0.0.1", " minimum_chrome_version ":" 38 "," Berechtigungen ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" entspricht ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]} 
Wie Sie sehen, fügen wir dem Manifest ein neues Attribut hinzu, um die Berechtigung für die Chrome-API zu erhalten: Berechtigungen deklarieren, in den meisten Chrome-APIs in Ihrer Erweiterung verwendet wird, müssen Sie es zuerst deklarieren, indem Sie das Feld platzieren Berechtigungen in deinem Manifest. Jede Berechtigung kann eine Textzeichenfolge sein, die zu der folgenden Liste gehört (aufgeteilt in 3 Bilder):




Zu unserer Datei popup.html Es sollte wie folgt sein:
 Popup MultipleColor
Unser Archiv main.js die die API-Abfrage und die Verarbeitung des Click-Ereignisses enthält, wird wie folgt dargestellt:
 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Append ('
'+ MostVisitedURLs [i] .title +'
'); } $ (".links").bind ("click", openpage); } chrome.topSites.get (buildPopupDom); }); 
Auf struktureller Ebene hätte unser Projekt wie folgt aussehen sollen:


Wenn wir unsere Erweiterung ausführen, sehen wir oben im Browser ein Symbol, das es in meinem Fall blau gestaltet. Wenn Sie darauf klicken, öffnet sich ein Popup mit der Liste der Seiten, auf die ich am häufigsten von meinem aus zugegriffen habe Browser sortiert nach der Anzahl meiner Besuche.
VERGRÖSSERN
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben