Chrome-Erweiterung – Umgebungseinrichtung

Ich möchte ein paar alberne Funktionen in meinem Browser. Vielleicht kann ich es mit einer einfachen Erweiterung hinzufügen? Es existiert nicht, aber es selbst zu schreiben sollte einfach sein, oder?

Das dachte ich vor ein paar Tagen. Auch wenn ich nicht völlig falsch lag, waren einige Teile des Entwicklungsprozesses etwas zeitaufwändiger als ich erwartet hatte. Ich sage nicht „schwierig“, aber anhand der verfügbaren Dokumentation ist es eher schwer herauszufinden. Während API-Dokumentation, Kernkonzepte usw. auf Developer.chrome.com recht gut beschrieben sind, wollte ich eine spezifische Entwicklererfahrung:

• TypeScript mit korrekter Typisierung des Chrome-Namespace
• Aufteilen des Codes in mehrere Dateien und Import/Export, was nötig ist
• Debuggen meines Codes mit einfachem console.log und/oder Debugger
• Autovervollständigung in meiner manifest.json
• Einfache Einrichtung, ohne Bundler und die Hälfte des Internets in meinen Knotenmodulen
• Einfache Möglichkeit, die Erweiterung im Browser zu aktualisieren und zu testen

Im Guten wie im Schlechten gelang es mir, die Dinge so einzurichten, wie ich es wollte. In diesem Beitrag erkläre ich kurz allgemeine Erweiterungskonzepte und zeige Ihnen, wie ich meine Entwicklungsumgebung eingerichtet habe. In den nächsten ein oder zwei Beiträgen werde ich mich auf die Implementierungsdetails meiner einfachen Page-Audio-Erweiterung konzentrieren.

TLDR:
Wenn Sie nur den Code möchten, finden Sie hier das Boilerplate-Repo:

Voodu / Chrom-Erweiterungskesselplatte

Chrom-Erweiterungs-Boilerplate

Dieses Repository soll ein Ausgangspunkt für die Entwicklung einer Chromium-Erweiterung sein.

Es ist so minimalistisch wie möglich, kommt aber mit vorkonfiguriertem:

• Autovervollständigung für manifest.json
• TypeScript-Transpilierung vom ts-Ordner in das dist-Verzeichnis
• Typen für Chrome-Namespace
• Funktioniert ordnungsgemäß beim Exportieren und Importieren (mit VS-Code-Arbeitsbereichseinstellung für das korrekte automatische Importformat)
• Beispiel manifest.json

Viel Spaß beim Codieren!

Auf GitHub ansehen

ℹ️ Ich verwende Windows 11, MS Edge, VS Code und npm überall unten ℹ️

---

Kurze Einführung in Erweiterungen

Beginnen wir mit einem Crashkurs über allgemeine Erweiterungskonzepte.

Jede Erweiterung verfügt über eine manifest.json-Datei, die ihren Namen, ihre Version, die erforderlichen Berechtigungen und die verwendeten Dateien definiert. Erweiterungen können auf verschiedene Arten Funktionalität bereitstellen:

• über Popup – Erweiterungs-Popup ist dieses kleine Fenster, das geöffnet wird, wenn Sie auf das Erweiterungssymbol in der Erweiterungsleiste klicken,
• über Inhaltsskripte – Skripte, die direkt in Websites eingefügt werden und DOM-Zugriff haben,
• über Hintergrundskripte (Service-Worker) – Skripte werden in einem separaten Kontext ausgeführt, unabhängig von geöffneten Websites

Es gibt auch andere Möglichkeiten, aber ich werde mich in diesem Leitfaden an diese drei halten.

Ein weiteres wichtiges Konzept ist Messaging. Normalerweise müssen wir die oben genannten Methoden kombinieren, da sie alle unterschiedliche Einschränkungen haben. Hintergrundskripte hängen beispielsweise nicht von geöffneten Tabs ab und können für die Beibehaltung des Status nützlicher sein, können aber nicht auf das DOM einer Website zugreifen. Daher müssen wir möglicherweise einige erweiterungsweite Daten vom Hintergrundskript abrufen, sie mithilfe einer Nachricht an ein Inhaltsskript übergeben und von dort aus die Website ändern.

Es kann auch hilfreich sein, einige Grundlagen zu Berechtigungen zu verstehen. Kurz gesagt: Einige APIs funktionieren nicht wie erwartet, wenn manifest.json nicht die richtigen Berechtigungen angibt. Wenn wir beispielsweise die Berechtigung „Tabs“ nicht angeben, verfügen die von der Tabs-API zurückgegebenen Objekte nicht über ein URL-Feld. Andererseits sollten wir nicht zu viele Berechtigungen verlangen – wenn die Erweiterung öffentlich sein soll, könnten Benutzer Bedenken haben, Zugriff auf zu viele Dinge zu gewähren.

---

Erstellen einer einfachen Erweiterung

Inspiriert von https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world

Beginnen wir damit, die Kernkonzepte unseres Entwicklungsworkflows zu verstehen, indem wir eine äußerst einfache Erweiterung verwenden, die lediglich Text in einem Popup anzeigt.

Dateien

Zuerst benötigen wir eine manifest.json-Datei:

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

Name, Beschreibung, Version und manifest_version sind wahrscheinlich selbsterklärend. action.default_popup ist ein Pfad zu einer HTML-Datei, die beim Klicken auf das Erweiterungssymbol gerendert wird. default_icon ist ein Pfad zum Erweiterungssymbol. Beide Pfade sind relativ zum Speicherort von manifest.json.

Fügen Sie nun die Dateien icon.png (zum Beispiel diese) und hello.html im selben Verzeichnis wie manifest.json hinzu.
hello.html kann so aussehen:

<!-- hello.html -->
<p>Hello world</p>

Und Ihr gesamtes Verzeichnis sollte so aussehen:

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

Aktivieren der Erweiterung

So aktivieren Sie Ihre Erweiterung:

1. Gehen Sie zu „edge://extensions/“
2. Aktivieren Sie in der linken Seitenleiste den „Entwicklermodus“.
   • Möglicherweise ist auch „Erweiterungen aus anderen Stores zulassen“ erforderlich
3. Klicken Sie über der Erweiterungsliste auf „Entpackt laden“
4. Wählen Sie den Ordner mit Ihren Erweiterungsdateien aus
5. Ihre Erweiterung sollte in der Liste und ihr Symbol in der Erweiterungssymbolleiste angezeigt werden?

Nachdem Sie nun auf das Symbol geklickt haben, wird ein kleines Popup mit dem Text „Hallo Welt“ angezeigt.

Damit sind die wichtigsten Grundlagen abgedeckt. Kommen wir zu etwas Interessanterem.

---

Einrichtung der Page-Audio-Erweiterungsumgebung

Automatische Vervollständigung in manifest.json

Wir beginnen erneut mit der manifest.json und dem leeren Verzeichnis.

Es wäre toll, beim Schreiben der manifest.json-Datei eine automatische Vervollständigung zu haben, oder? Glücklicherweise handelt es sich um einen klar definierten Standard und es gibt ein JSON-Schema unter https://json.schemastore.org/chrome-manifest. Wir brauchen es nur unter dem Schlüssel „$schema“ am Anfang von manifest.json:

<!-- hello.html -->
<p>Hello world</p>

und VS Code hilft uns sofort, indem es Feldnamen vorschlägt und Warnungen anzeigt, wenn Pflichtfelder fehlen. Großartig!?

Damit etwas zum Testen unseres Setups funktioniert, verwenden Sie manifest.json in der folgenden Reihenfolge:

.
├── hello.html
├── icon.png
└── manifest.json

• Symbole – es ist nur eine andere Art, Erweiterungssymbole anzugeben
• Hintergrundabschnitt – gibt den Pfad mit der Service-Worker-JS-Datei und ihren Typ an; Es ist ein Modul, da der Code später Export und Import verwenden wird

Typoskript

Die Verwendung von TypeScript ... nun, erfordert TypeScript. Wenn Sie es nicht installiert haben, beginnen Sie mit

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

Grundkonfiguration

Um die Dinge organisiert, aber nicht zu kompliziert zu machen, behalte ich die .ts-Quelldateien im ts-Verzeichnis. Von dort werden sie vom Transpiler übernommen und als .js-Dateien im dist-Verzeichnis abgelegt.

Dies wird durch die folgende .tsconfig beschrieben:

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

Die wichtigsten Bits sind Compiler.rootDir und Compiler.outDir. Die anderen Felder können andere Werte haben oder vollständig entfernt werden (zumindest einige davon).

Das ist die Grundkonfiguration – wenn Sie einige Dateien im ts-Verzeichnis ablegen und tsc im Stammverzeichnis ausführen, wird eine entsprechende .js-Datei in dist erstellt. Allerdings fehlt uns ein wichtiger Teil – Typen für den Chrome-Namespace, den wir verwenden werden. Die einfachste Lösung besteht darin, sie über npm hinzuzufügen.

Chromtypen hinzufügen

Erstellen Sie eine leere package.json, nur mit den Klammern:

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

und führen Sie in der Befehlszeile Folgendes aus:

<!-- hello.html -->
<p>Hello world</p>

Sie können auch Skripte hinzufügen, um tsc build und im Überwachungsmodus auszuführen. Das endgültige package.json sollte so aussehen:

.
├── hello.html
├── icon.png
└── manifest.json

ℹ️ Chrom-Versionen könnten in Ihrem Fall höher sein. ℹ️

Nachdem wir die Typen hinzugefügt haben, müssen wir TypeScript darüber informieren. Aktualisieren Sie dazu einfach .tsconfig.json:

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

Um zu testen, ob unser Setup korrekt funktioniert:

1. Erstellen Sie im Ordner „ts“ die Datei „background.ts“ mit folgendem Inhalt
   

   // manifest.json
   {
       "$schema": "https://json.schemastore.org/chrome-manifest",
       "name": "Page Audio",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "icons": {
           "16": "icons/logo16x16.png",
           "32": "icons/logo32x32.png",
           "48": "icons/logo48x48.png",
           "128": "icons/logo128x128.png"
       },
       "background": {
           "service_worker": "dist/background.js",
           "type": "module"
       }
   }
   
   

2. Führen Sie in der Befehlszeile Folgendes aus:
   

   npm install -g typescript
   

3. Überprüfen Sie, ob das dist-Verzeichnis erstellt wurde und die Datei „background.js“ dort angezeigt wurde

4. Ändern Sie etwas in der Zeichenfolge console.log in der Datei ts/background.ts und speichern Sie es

5. Überprüfen Sie, ob dist/background.js automatisch aktualisiert wurde.

Wenn das funktioniert, großartig! Wir haben fast alles eingerichtet ?

Sie können auch überprüfen, ob Ihre Verzeichnisstruktur wie folgt aussieht:

// .tsconfig
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "./dist",
        "rootDir": "./ts",
        "strict": true,
    }
}

Import und Export

Wie ich bereits erwähnt habe, würde ich den Code gerne in kleinere Dateien aufteilen. Dazu muss der Export und Import korrekt funktionieren.

Ein Schritt in diese Richtung war die Angabe unseres service_worker in manifest.json als „type“: „module“. Bei der Arbeit mit Modulen gibt es jedoch einen Unterschied zwischen TypeScript und JavaScript: Während TypeScript beim Import keine Dateierweiterungen benötigt, ist dies bei JavaScript der Fall. Also zum Beispiel dieser Import:

// package.json
{
}

funktioniert in TS, aber JS benötigt

npm i -D chrome-types

Es ist auch wichtig zu verstehen, dass der TS-Transpiler nichts unternimmt auf die Importpfade. Und es ist „schlau“ genug, um zu verstehen, dass beim Importieren aus file.js auch nach file.ts gesucht werden sollte.

In Kombination mit all dem wird TS auch mit dem Import im JS-Stil zufrieden sein und beim Import aus file.js die entsprechende TS-Datei verwenden. Was wir tun müssen, ist sicherzustellen, dass alle Importe in TS-Dateien die Erweiterung .js haben. So automatisieren Sie es im VS-Code:

1. Drücken Sie STRG, um die Einstellungen zu öffnen
2. Wechseln Sie zur Registerkarte „Arbeitsbereich“
3. Suchen Sie nach typescript.preferences.importModuleSpecifierEnding
4. Stellen Sie die Option „.js / .ts“ ein

Jetzt wird bei jedem automatischen Import mit VS-Code .js zum Dateinamen hinzugefügt ?

Um zu testen, ob alles richtig funktioniert:

1. Erstellen Sie die Datei ts/hello.ts mit folgendem Inhalt
   

   // package.json
   {
       "scripts": {
           "build": "tsc",
           "watch": "tsc -w"
       },
       "devDependencies": {
           "chrome-types": "^0.1.327"
       }
   }
   

2. Entfernen Sie in ts/background.ts die aktuelle Zeile console.log und beginnen Sie mit der Eingabe von „Hallo“

3. VS Code sollte es automatisch vervollständigen und den richtigen Import hinzufügen, nachdem Sie den Vorschlag mit der Tabulatortaste akzeptiert haben

4. Am Ende sollte die Datei so aussehen:
   

   // manifest.json
   {
     "name": "Hello World",
     "description": "Shows Hello World text",
     "version": "1.0",
     "manifest_version": 3,
     "action": {
       "default_popup": "hello.html",
       "default_icon": "icon.png"
     }
   }
   

Beachten Sie, dass der Import mit der Erweiterung .js endet. Wenn Sie dist/background.js überprüfen, ist die Erweiterung auch vorhanden und sorgt dafür, dass alles richtig funktioniert.

Um sicherzustellen, dass wir auf dem gleichen Stand sind, können Sie die Verzeichnisstruktur vergleichen:

<!-- hello.html -->
<p>Hello world</p>

Entwicklungstools für Servicemitarbeiter

Okay, wir haben eine anständige Entwicklungserfahrung. Wir haben auch einige console.log-Aufrufe hinzugefügt... aber wo sind sie jetzt zu finden?

Wenn Sie console.log in ein Inhaltsskript einfügen, können Sie einfach Dev Tools öffnen und sie sind dort, da Inhaltsskripte im gleichen Kontext wie die Seite funktionieren, in die sie eingefügt werden. Allerdings werden console.logs von Hintergrundskripten etwas stärker ausgeblendet.

1. Öffnen Sie „edge://extensions/“ und laden Sie Ihre Erweiterung, falls Sie das noch nicht getan haben
2. Suchen Sie Ihre Erweiterung in der Liste

3. Klicken Sie in der Zeile „Ansichten prüfen“ auf den Link „Servicemitarbeiter“:

   

4. Ein neues Dev Tools-Fenster sollte geöffnet werden und Sie sehen dort Protokolle des Servicemitarbeiters

   • Wenn Sie die Protokolle nicht sehen, klicken Sie unter „Ansichten prüfen“ auf „Neu laden“

Die drei Links am unteren Rand der Kachel sind ebenfalls sehr wichtig

• „Neu laden“ – aktualisiert die gesamte Erweiterung, einschließlich Änderungen an manifest.json; Schauen Sie sich diese Tabelle an, um zu verstehen, wann ein Neuladen erforderlich sein könnte
• „Entfernen“ – löscht die Erweiterung
• „Details“ – zeigt weitere Informationen zur Erweiterung an, zum Beispiel ihre Berechtigungen
• (optional) „Fehler“ – wenn bei der Installation des Service Workers Fehler auftreten, erscheint dieser Link und führt Sie zur Fehlerliste

Puh. Das hat einen Moment gedauert, aber endlich ist unsere Umgebung gut eingerichtet. Von nun an müssen wir es einfach tun

1. Führen Sie npm run watch aus (falls Sie es gestoppt haben)
2. Schreiben Sie unseren Code in das ts-Verzeichnis
3. (Optional) Laden Sie die Erweiterung über die Registerkarte „Erweiterungen“ neu

Und unsere Erweiterung wird automatisch aktualisiert! ⚙️

Wenn Sie eine Idee haben, wie Sie auch automatisch „neu laden“ können (ohne aufwändiges Hacken), lassen Sie es mich in den Kommentaren wissen

Zusammenfassung

Wir haben unsere Umgebung bereit!

• Autocomplete funktioniert in manifest.json, sodass wir nicht raten müssen, was die richtigen Werte sind
• TypeScript hilft uns bei der korrekten Verwendung der Chrome-API
• Code kann in kleinere, logische Dateien aufgeteilt werden
• Der Code, den wir in den ts-Ordner schreiben, wird automatisch aktualisiert
• Wir wissen, wo Entwicklungstools für den Servicemitarbeiter und Inhaltsskripte zu finden sind

Im nächsten Teil beschreibe ich die Implementierungsdetails meiner kleinen „Page Audio“-Erweiterung.

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonChrome-Erweiterung – Umgebungseinrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!