Grundwissen
1. Plug-in-Dateistruktur
1.1. Manifest.json
Jede Erweiterung, installierbare WebApp und Skin verfügt über eine JSON-Format-Manifestdatei, in der wichtige Plug-in-bezogene Informationen gespeichert werden.
Ein grundlegendes Konfigurationsbeispiel:
{ "name": "browser action demo", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "Switch light", "default_icon": "icon.png", "default_popup": "popup.html"}, "Hintergrund": {"Seite": "Hintergrund.html"}, "Manifest_version": 2}1.2. Popup
Das Popup-Fenster des Plug-Ins, das default_popup in browser_action in der obigen Konfiguration ist diese Seite.
1.3. Hintergrundseite
Die meisten Anwendungen enthalten eine Hintergrundseite, um die Hauptfunktionen der Anwendung auszuführen.
1.4. Inhaltskripte
Das Inhaltskript kann die Interaktion zwischen der Anwendung und der Webseite aktivieren, die sich auf JavaScript -Skripte bezieht, die in den vom Browser geladenen Seiten ausgeführt werden können. Sie können sich das Content -Skript als Teil einer Webseite vorstellen, nicht Teil der Anwendung, in der sie sich befindet.
2. Interaktion zwischen Dateien
Die Funktion auf der Hintergrundseite kann direkt im Popup -Fenster aufgerufen werden.
Das Inhaltskript kann die DOM -Baum der aktuellen Webseite lesen und ändern. Sie kann jedoch nicht die DOM -Baum auf der Hintergrundseite (Hintergrund) der lokalisierten Anwendung ändern.
Interaktion zwischen Inhaltskript und Anwendung: Sie können Nachrichten aneinander senden
3. Inject JS (Inhaltskripte) Datei in die Webseite injizieren:
Methode 1: Konfigurieren Sie in der Manifest.json -Datei:
"content_scripts": [{"Matches": ["http://www.google.com/*"], "CSS": ["mystyles.css"], "js": ["jQuery.js", MyScript.js "]}]Methode 2, über executeScript ():
Injizieren Sie JavaScript -Skripte in die Seite, um auszuführen.
chrome.tabs.executescript (Integer tabid, Objektdetails, Funktionsrückruf) Chrome.tabs.executescript (Tabid, {Datei: "func.js", AllFrames: true});UI Aussehen
1. Browseraktion:
Fügen Sie ein Symbol rechts neben der Adressleiste der Haupt -Chrom -Symbolleiste hinzu.
Hinweis: Verpackte Apps können Browser -Aktionen nicht verwenden
1.1. Konfiguration in Manifest.json
Registrieren Sie Browseraktion:
{"Name": "Meine Erweiterung", ... "browser_action": {"default_icon": "Bilder/icon19.png", // optional "default_title": "Google Mail", // optional; In Tooltip "default_popup" gezeigt: "popup.html" // optional}, ...}1.2. Konfigurationselement Beschreibung
(1) default_icon
Icon 19 * 19px
Ändern Sie das Feld default_icon im Manifest von Browser_Action oder rufen Sie die Methode seticon () auf.
chrome.browseraction.seticon (Objektdetails)
Setzen Sie das Browser -Aktions -Symbol. Das Symbol kann ein Pfad zu einem Bild- oder Pixel -Informationen sein, das aus einem Leinwandelement extrahiert wird. Unabhängig davon, ob es sich um den Icon -Pfad oder die Imagedata von Leinwand handelt, muss diese Eigenschaft angegeben werden.
(2) default_title
Ändern Sie das Feld default_title im Manifest von Browser_Action oder rufen Sie die Methode settitle () auf. Sie können eine lokalisierte Zeichenfolge für das Feld default_title angeben. Klicken Sie auf Internationalisierung, um Details anzuzeigen.
chrome.browseraction.settitle (Objektdetails)
Legen Sie den Titel der Browser -Aktion fest. Dies wird in Tooltip angezeigt.
(3) Abzeichen
Browser -Aktionen können optional ein Abzeichen anzeigen - Zeigen Sie einen Text im Symbol an. Abzeichen können einfach einige kleine Erweiterungsstatus -Eingabeaufforderungsinformationen für die Browseraktion aktualisieren.
Da der Abzeichenraum begrenzt ist, unterstützt er nur weniger als 4 Zeichen.
Um Abzeichen Text und Farbe festzulegen, können Sie SetBadGetText () bzw. SetBadUbackgroundColor () verwenden.
Chrome.Browseraction.setBadGetText (Objektdetails)
Legen Sie den Abzeichen Text der Browser -Aktion ein und das Abzeichen wird auf dem Symbol angezeigt.
setBadgeBackgroundcolorchrome.Browseraction.setbadgeBackgroundColor (Objektdetails)
Stellen Sie die Hintergrundfarbe des Abzeichens ein.
(4) default_popup
Popup -Blasenspitzen
Ändern Sie das Feld default_popup im Manifest von Browser_Action, um die HTML -Datei anzugeben, oder rufen Sie die Methode setpopup () auf.
chrome.browseraction.setpopup (Objektdetails)
Legt ein HTML fest, das in Popup angezeigt wird, wenn Sie auf Browseraktionen klicken.
1.3. Tipps
Für die beste Anzeige folgen Sie den folgenden Prinzipien:
Bestätigen Sie, dass Browseraktionen nur in Szenarien verwendet werden, in denen die meisten Websites funktionale Anforderungen haben.
Bestätigen Sie, dass Browseraktionen auf einigen Webseiten mit Funktionen nicht verwendet werden. Bitte verwenden Sie Seitenaktionen für dieses Szenario.
Stellen Sie sicher, dass Ihre Symbolgröße bis zu 19x19 Pixelraum einnehmen sollte. Das Symbol der Browser -Aktion sollte größer und schwerer aussehen als das Symbol der Seitenaktion.
Versuchen Sie nicht, die Schraubenschlüssel-Ikonen von Google Chrome nachzuahmen, ihre Leistung kann bei verschiedenen Themen problematisch sein, und die Erweiterung sollte auffälliger sein.
Versuchen Sie, den Alpha -Kanal zu verwenden und die Kanonen Ihrer Symbole zu glätten, da viele Benutzer Themen verwenden, und Ihre Symbole sollten in verschiedenen Hintergründen gut abschneiden.
Blinkes nicht weiter dein Symbol, es ist sehr beleidigend.
2. Klicken Sie mit der rechten Maustaste
Sie können wählen, ob Sie einen Menüelement mit dem Rechtsklick für verschiedene Arten von Objekten hinzufügen möchten (z. B. Bilder, Links, Seiten).
Sie können nach Bedarf mehrere Menüelemente mit der rechten Maustaste hinzufügen. Mehrere in einer Erweiterung hinzugefügte Menüelemente mit dem Rechtsklick werden automatisch mit Chrome kombiniert und im sekundären Menü des entsprechenden Erweiterungsnamens platziert.
Das Menü mit der rechten Maustaste kann in jedem Dokument (oder Frames im Dokument) oder sogar in einer lokalen Datei (z. B. Datei: // oder Chrome: //) angezeigt werden. Wenn Sie in verschiedenen Dokumenten die Anzeige des Rechtsklickmenüs steuern möchten, können Sie documentUrlpatterns beim Aufrufen von create () und update () angeben.
2.1. Konfiguration in Manifest.json
Erklären Sie die Erlaubnis "ContentMenus" im Manifest. Gleichzeitig sollten Sie ein 16x16-Symbol angeben, das Sie als Rechtsklick-Menü-Logo verwenden können. Zum Beispiel:
{"Name": "Meine Erweiterung", ... "Berechtigungen": ["contextMenus"], "Icons": {"16": "Icon-Bitty.png", "48": "Icon-Small.png", "128": "icon-large.png"}, ...}, ...}, ...}3.. Desktop -Benachrichtigungen
Benachrichtigen Sie den Benutzer, dass etwas Wichtiges passiert ist. Desktop -Benachrichtigungen werden außerhalb des Browserfensters angezeigt. Das Bild unten zeigt den Effekt von Benachrichtigungen. Auf verschiedenen Plattformen unterscheidet sich der Display -Effekt von Benachrichtigungen geringfügig.
Verwenden Sie direkt ein kleines Stück JavaScript -Code, um Benachrichtigungen zu erstellen, und kann natürlich auch über eine separate HTML -Seite im Erweiterungspaket durchgeführt werden.
3.1. Konfiguration in Manifest.json
{"Name": "Meine Erweiterung", ... "Berechtigungen": ["Benachrichtigungen"], ...}3.2. Interagieren Sie mit der erweiterten Seite:
Verwenden Sie GetbackgroundPage () und GetViews (), um Interaktionen in Benachrichtigungen und Erweiterungsseiten zu erstellen
// Aufrufen Sie die erweiterte Seitenmethode in der Benachrichtigung ... Chrome.Extension.getbackgroundPage (). Dothing (); // Rufen Sie die Benachrichtigungsmethode von der Erweiterung Seite an ... Chrome.Extension.getViews ({Typ: "Benachrichtigung"}). Foreach (Funktion (Win) {Win.Dootherthing ();});4. Omnibox
Mit der Omnibox -Anwendungsschnittstelle können Sie ein Schlüsselwort mit der Adressleiste von Google Chrome registrieren, die auch als Omnibox bezeichnet wird.
Das Feld Omnibox -Schlüsselwort muss in das Manifest aufgenommen werden. Ein Symbol mit Pixel von 16x16 muss so angegeben werden, dass es in der Adressleiste angezeigt wird, wenn der Benutzer ein Schlüsselwort eingibt.
4.1. Konfiguration in Manifest.json
{"Name": "Aarons Omnibox-Erweiterung", "Version": "1.0", "Omnibox": {"Keyword": "Aaron"}, "Icons": {"16": "16-full-color.png"}, "Hintergrund": "Hintergrund.html"} "}"} "}"} "}"}Chrome erstellt automatisch Symbole mit 16x16 Pixel im Graustufenmodus. Sie sollten eine farbige Version des Symbols bereitstellen, damit es in anderen Szenarien verwendet werden kann.
5. Optionen Seite
Damit Benutzer Ihre Erweiterungen einrichten können, müssen Sie möglicherweise eine Optionsseite angeben. Wenn Sie eine Optionsseite angeben, wird auf der Erweiterungsmanagementseite Chrome: // Erweiterungen ein Link bereitgestellt. Klicken Sie auf den Link der Optionen, um die Seite "Optionen" zu öffnen.
5.1. Konfiguration in Manifest.json
{"Name": "Meine Erweiterung", ... "options_page": "options.html", ...}6. bestimmte Seiten überschreiben
Mithilfe alternativer Seiten können Sie standardmäßig einige bestimmte Seiten in Chrome ersetzen und stattdessen Seiten verwenden.
6.1. Konfiguration in Manifest.json
{"Name": "Meine Erweiterung", ... "chrome_url_overrides": {"pagetooverride": "myPage.html"}, ...}7. Seitenaktionen
Verwenden Sie Seitenaktionen, um das Symbol in der Adressleiste zu platzieren.
Wenn Sie möchten, dass das Erweiterungssymbol immer sichtbar ist, verwenden Sie die Browseraktion.
Verpackte Anwendungen können keine Seitenaktionen verwenden.
7.1. Konfiguration in Manifest.json
{"Name": "Meine Erweiterung", ... "page_action": {"default_icon": "icons/foo.png", // optional "default_title": "do action", // optional; In Tooltip "default_popup" gezeigt: "popup.html" // optional}, ...}7.2. Konfigurationselement Beschreibung
Seitungsaktionen können wie Browseraktionen Symbole, Schnellnachrichten und Pop-ups enthalten. Aber es gibt kein Abzeichen
Verwenden Sie die Methoden Show () und hide (), um Seitenaktionen anzuzeigen und zu verbergen. Standardmäßig ist die Seitenaktion versteckt. Wenn Sie anzeigen möchten, müssen Sie die Registerkartenseite angeben, auf der sich das Symbol befindet. Das Symbol bleibt sichtbar, bis die Registerkartenseite eine andere URL angezeigt oder beginnt (z. B.: Der Benutzer klickt auf eine Verbindung).
7.3. Tipps
Verwenden Sie die Seitenaktion nur für ein paar Seiten.
Verwenden Sie es nicht für die meisten Seiten. Verwenden Sie stattdessen Browseraktionen, wenn die Funktionalität dies erfordert.
Lassen Sie die Symbole nicht immer in Animationen erscheinen, wenn es in Ordnung ist, es wird sehr nervig.
8. Thema
Das Thema ist eine spezielle Erweiterung, mit der das Erscheinungsbild des gesamten Browsers geändert werden kann. Das Thema ähnelt der Standarderweiterung, das Thema kann jedoch keinen JavaScript- oder HTML -Code enthalten.
8.1. Konfiguration in Manifest.json
{"Version": "2.6", "Name": "Camo -Themen", "Thema": {"Bilder": {"themen_frame": "Bilder/themen_frame_camo.png", "themen_frame_overlay": "Images/theme_frame_stripe.pngg", "themen- "themen_ntp_background": "Bilder/themen_ntp_background_norepeat.png", "themen_ntp_attribution": "Bilder/Attribution. "ntp_link" : [36, 70, 0], "ntp_section" : [207, 221, 192], "button_background" : [255, 255, 255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47] }, "properties" : { "ntp_background_alignment" : "bottom" } }}