So bauen Sie eine Chromverlängerung auf

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!