Ich habe an diesem Wochenende eine Chrome -Erweiterung entwickelt, weil ich wiederholt die gleichen Aufgaben ausführte und sie automatisieren wollte. Au?erdem bin ich ein Geek, der zu Hause bleibt, um die Epidemie zu überleben. Deshalb werde ich meine akkumulierte Energie dem Schaffung von Dingen widmen. Ich habe im Laufe der Jahre einige Chromerweiterungen entwickelt und hoffe, dass dieser Artikel Ihnen auch dabei hilft, loszulegen. Fangen wir an!

Erstellen Sie eine Manifestdatei

Der erste Schritt besteht darin, eine Datei namens manifest.json zu erstellen und in den Projektordner zu platzieren. Die Funktion ?hnelt package.json , das wichtige Informationen zum Projekt für den Chrome Web App Store enth?lt, einschlie?lich Name, Version, erforderlichen Berechtigungen und mehr. Hier ist ein Beispiel:

 {
  "Manifest_version": 2,,
  "Name": "Beispielname",
  "Version": "1.0.0",
  "Beschreibung": "Dies ist eine Beispielbeschreibung",
  "Short_Name": "Beispielname Abkürzung",
  "Berechtigungen": ["Activetab", "DeclarativeContent", "Speicher", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "<all_urls> "],,
  "content_scripts": [
    {
      "Matches": ["<all_urls> "],,
      "CSS": ["Hintergrund.css"],
      "JS": ["Hintergrund.js"]
    }
  ],
  "browser_action": {
    "default_title": "Führen Sie eine Aktion aus, wenn Sie eine Aktion ausführen",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "Icons/icon16.png",
      "32": "Icons/icon32.png"
    }
  }
}</all_urls></all_urls>

Sie k?nnen einige Details bemerken - zuerst: Der Name und die Beschreibung k?nnen nach m?chten.

Berechtigungen h?ngen davon ab, wie die Erweiterung durchführen muss. In diesem Beispiel verwenden wir ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> , da diese spezielle Erweiterung Informationen über das aktive Tag erfordert, den Seiteninhalt ?ndern muss, auf LocalStorage zugreifen muss und auf allen Websites aktiv sein muss. Wenn sie nur auf einer Website aktiv sein muss, k?nnen wir den letzten Index dieses Arrays l?schen.

Die Erweiterungsdokumentation von Chrome listet alle Berechtigungen und ihre Bedeutungen auf.

 "content_scripts": [
  {
    "Matches": ["<all_urls> "],,
    "CSS": ["Hintergrund.css"],
    "JS": ["Hintergrund.js"]
  }
],</all_urls>

content_scripts legt die Site fest, an der die Erweiterung aktiv sein soll. Wenn Sie eine separate Website wie Twitter wünschen, k?nnen Sie sie als ["https://twitter.com/*"] schreiben. CSS- und JavaScript -Dateien sind alles, was Sie für eine Erweiterung ben?tigen. Beispielsweise verwendet meine effiziente Twitter -Erweiterung diese Dateien, um das Standardeintritt von Twitter zu überschreiben.

 "browser_action": {
  "default_title": "Führen Sie eine Aktion aus, wenn Sie eine Aktion ausführen",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "Icons/icon16.png",
    "32": "Icons/icon32.png"
  }
}

Einige Inhalte in browser_action sind ebenfalls optional. Wenn für eine Erweiterung kein Popup erforderlich ist, um ihre Funktionalit?t zu implementieren, k?nnen Sie default_title und default_popup l?schen. In diesem Fall wird nur das Symbol der Erweiterung ben?tigt. Wenn die Erweiterung auf bestimmten Websites nur gültig ist, greift Chrome das Symbol der Erweiterung aus, wenn sie inaktiv ist.

debuggen

Sobald die Manifestdatei, CSS und JavaScript -Dateien fertig sind, besuchen Sie chrome://extensions/ in der Adressleiste des Browsers und aktivieren Sie den Entwicklermodus. Dadurch wird die Schaltfl?che dekomprimiert geladen, um die Erweiterungsdatei hinzuzufügen. Sie k?nnen auch wechseln, ob die Entwicklerversion der Erweiterung aktiv ist.

Ich empfehle dringend, an diesem Punkt ein Github -Repository für die Versionskontrolle zu starten. Dies ist eine gro?artige M?glichkeit, Ihre Arbeit zu retten.

Bei der Aktualisierung der Erweiterung muss sie von dieser Schnittstelle neu geladen werden. Auf dem Bildschirm wird ein kleines Aktualisierungssymbol angezeigt. Wenn in der Erweiterung bei der Entwicklung Fehler aufgetreten sind, zeigt sie auch eine Fehlerschaltfl?che mit Stapelverfolgung und weiteren Informationen hier an.

Popup -Fensterfunktion

Glücklicherweise ist dies sehr einfach, wenn die Erweiterung ein Popup verwenden muss, das aus dem Erweiterungssymbol auftaucht. Nachdem Sie den Dateinamen mit browser_action in der Manifest -Datei angegeben haben, k?nnen Sie alle HTML und CSS verwenden, die Sie auf der Seite erstellen m?chten, einschlie?lich der Bilder (ich verwenden inline SVG in der Regel).

M?glicherweise müssen wir dem Popup einige Funktionen hinzufügen. Dies erfordert m?glicherweise ein JavaScript. Stellen Sie daher sicher, dass Sie die JavaScript -Datei in der Manifestdatei angeben und sie wie folgt in Ihrer Popup -Datei verknüpfen:

Erstellen Sie in dieser Datei zuerst die Funktion, wir werden auf das Popup -DOM wie folgt zugreifen:

 document.addeventListener ("DomContentLode", () => {
  var button = document.getElementById ("subieren");

  Button.AdDeVentListener ("Click", (e) => {
    console.log (e);
  });
});

Wenn wir eine Schaltfl?che in der Datei popup.html erstellen, eine ID mit dem Namen submit zuweisen und dann ein Konsolenprotokoll zurückgeben, k?nnen Sie feststellen, dass in der Konsole tats?chlich nichts angemeldet ist. Dies liegt daran, dass wir uns in verschiedenen Kontexten befinden, was bedeutet, dass wir mit der rechten Maustaste auf das Popup klicken und einen anderen Satz von Devtools ?ffnen müssen.

Jetzt k?nnen wir auf Protokolle und Debuggen zugreifen! Denken Sie jedoch daran, dass es nur in der Devtools LocalStorage der Erweiterung in LocalStorage vorhanden ist. Nicht der Browser LocalStorage des Benutzers. (Ich habe auf dieses Problem gesto?en, als ich es zum ersten Mal versuchte!)

Führen Sie Skripte au?erhalb der Erweiterung aus

Das ist alles gut, aber was ist, wenn wir ein Skript ausführen m?chten, das auf die aktuellen Registerkarteninformationen zugreifen kann? Hier sind einige M?glichkeiten, dies zu tun. Normalerweise rufe ich eine separate Funktion im DOMContentLoaded -Ereignis -Listener auf:

Beispiel 1: Aktivieren Sie die Datei

 function Beispielfunktion () {
  chrome.tabs.executescript (() => {
    chrome.tabs.executescript ({Datei: "content.js"});
  });
}

Beispiel 2: Führen Sie nur eine kleine Menge Code aus

Dieser Ansatz ist gro?artig, wenn Sie nur eine kleine Menge Code ausführen müssen. Da es jedoch erforderlich ist, alles als Zeichenfolge oder Vorlage zu übergeben, ist es schnell schwer zu handhaben.

 function Beispielfunktion () {
  chrome.tabs.executescript ({{
    Code: `console.log ('hi there');`
  });
}

Beispiel 3: Aktivieren Sie die Datei- und übergebenparameter

Denken Sie daran, dass Erweiterungen und Registerkarten in verschiedenen Kontexten ausgeführt werden. Dies erleichtert die übergabeparameter zwischen ihnen nicht einfach. Wir werden die ersten beiden Beispiele hier nisten und einen Code in die zweite Datei weitergeben. Ich speichere alles, was ich brauche, in einer Option, aber damit es funktioniert, müssen wir das Objekt ansprechen.

 Funktion Beispielfunktion (Optionen) {
  chrome.tabs.executescript (
    {Code: "var options =" ??json.stringify (Optionen)},
    function () {
      chrome.tabs.executescript ({Datei: "content.js"});
    }
  );
}

Symbol

Obwohl die Manifest-Datei nur zwei Symbole definiert, ben?tigen wir zwei weitere, um die Erweiterung in den Chrome-Web Store formell zu übermitteln: ein 128-Pixel-Square-Symbol und ein Symbol I-Call- icon128_proper.png , das ebenfalls 128 Pixel betr?gt, aber einige Polster zwischen den R?ndern des Bildes und des Ikons aufweist.

Denken Sie daran, dass es in den hellen und dunklen Modi des Browsers gut aussehen muss, egal in welchem ??Symbol verwendet wird. Normalerweise finde ich meine Ikone im Substantivprojekt.

Senden Sie an den Chrome Web App Store

Jetzt k?nnen wir zur Chrome Web Store Developer Console gehen, um die Erweiterung einzureichen! Klicken Sie auf die Schaltfl?che Neue Projekt und ziehen Sie die komprimierte Projektdatei in den Uploader.

Chrome wird hier einige Fragen zu Erweiterungen stellen und Informationen zu den in der Erweiterung angeforderten Berechtigungen und warum diese Berechtigungen ben?tigt werden. WARNUNG: Das Anfordern von "Activetab" oder "Registerkarten" berechnen dauert l?nger, um sicherzustellen, dass der Code keinen Missbrauch ausführt.

Das war's! Dadurch sollten Sie mit dem Aufbau von Chrom -Browser -Erweiterungen fertig sind! ?

Das obige ist der detaillierte Inhalt vonSo bauen Sie eine Chromverl?ngerung auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!