Erstellen Sie eine Browsererweiterung mit Vite TS

Beginnen wir diese Übung mit dem Schwerpunkt auf der Einrichtung der grundlegendsten Erweiterungsstruktur, die nur eine Manifestdatei und einen Servicemitarbeiter umfasst. Das Manifest fungiert als Konfigurationsdatei und gibt an, was die Erweiterung tun darf, während der Servicemitarbeiter Hintergrundaufgaben erledigt und in erster Linie auf Browserereignisse reagiert. In diesem Fall protokolliert es, wenn die Erweiterung installiert wird.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

background.js

Der Service Worker kann so komplex wie nötig sein, aber wir halten es vorerst einfach, da das Ziel dieser Aufgabe darin besteht, diese einfache Zwei-Dateien-Erweiterung in ein Vite-Projekt umzuwandeln.

Warum also Vite verwenden? Vor allem, weil ich mich für die Arbeit mit TypeScript entschieden habe, was die Qualität, Wartbarkeit und Produktivität des Codes erheblich verbessern wird. TypeScript bietet nicht nur eine Selbstdokumentation, sondern ermöglicht es mir auch, typbezogene Fehler zur Kompilierungszeit statt zur Laufzeit zu erkennen, was das Entwicklungserlebnis insgesamt verbessert.

Vite

Obwohl ein Node-Projekt mit TypeScript ausreichen würde, um meinen TS-Code in das für meine Erweiterung erforderliche Vanilla-JavaScript zu kompilieren, habe ich mich für Vite entschieden. Vite bietet insbesondere mit seinem Rollup-Bundler umfangreiche Funktionen wie Tree-Shaking und Bundle-Minification. Darüber hinaus würde mir das robuste Plugin-Ökosystem von Vite eine einfache Integration von React ermöglichen, wenn ich mich entscheide, in Zukunft UI-Komponenten für die Erweiterung zu erstellen.

Vor diesem Hintergrund beginnen wir mit der Erstellung des Vite-Projekts unter Verwendung seiner Vanilla-ts-Vorlage.

npm create vite@latest simple-extension -- --template vanilla-ts

Nachdem Sie den Befehl ausgeführt und Abhängigkeiten installiert haben, haben Sie ein kleines Webprojekt mit TypeScript eingerichtet. Da dieses Setup jedoch nicht ganz unseren Anforderungen entspricht, beginnen wir mit einigen Aufräumarbeiten. Löschen Sie zunächst die Datei index.html aus dem Stammordner, da sie nicht mehr benötigt wird. Entfernen Sie dann alle Dateien im Ordner src mit Ausnahme von vite-env.d.ts, das Typdefinitionen für Vite-spezifische Funktionen bereitstellt. Löschen Sie abschließend alles im öffentlichen Ordner.

⚠️ Wenn in Ihrer tsconfig-Datei Fehler zu unbekannten Compileroptionen auftreten, stellen Sie sicher, dass Ihr Editor dieselbe TypeScript-Version verwendet, die für das Projekt installiert ist.

Als nächstes erstellen Sie eine neue Datei im src-Ordner mit dem Namen „background.ts“ und kopieren Sie den Code aus der ursprünglichen Datei „background.js“ hinein.

Sie werden schnell feststellen, dass TypeScript zusätzlichen Kontext benötigt, um ordnungsgemäß zu funktionieren, da es das Chrome-Objekt ohne die entsprechenden Typen nicht erkennt. Um dieses Problem zu beheben, installieren Sie @types/chrome, um die erforderlichen Typdefinitionen für Chrome bereitzustellen.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

Nach der Installation verschwinden die TypeScript-Fehler. Möglicherweise bemerken Sie jedoch eine Warnmeldung im onInstalled-Rückruf. Dies liegt an den Linting-Eigenschaften, die Vite in unserem TypeScript-Setup für uns konfiguriert hat.

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

Da wir ein Objekt definieren, das nicht verwendet wird, entfernen wir es. Das sollte alles sein, was wir brauchen, also können wir jetzt das Projekt kompilieren.

npm create vite@latest simple-extension -- --template vanilla-ts

Es scheint ein Problem zu geben – die Standardkonfiguration von Vite versucht immer noch, einige der Dateien, die wir gerade entfernt haben, als Code-Eingabepunkt zu verwenden.

npm i -D @types/chrome

Wir müssen unsere Vite-Konfiguration anpassen, um im Bibliotheksmodus ausgeführt zu werden. Hier ist die minimale Konfiguration, die für dieses Projekt erforderlich ist.

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

In der obigen Konfiguration setzen wir einfach die Eingabe des Projekts auf ./src/background.ts und passen den Namen der Ausgabedatei auf [name].js an. Standardmäßig hängt Vite einen Hash an Dateinamen für Produktions-Builds an (z. B. „background-[hash].js“), aber wir benötigen eine genaue Übereinstimmung des Dateinamens, damit unsere manifest.json ordnungsgemäß funktioniert.

Apropos manifest.json, wo sollte es sich befinden? Dieser Teil ist unkompliziert: Jede Datei, die unverändert und ohne Transformationen in den Ausgabeordner kopiert werden soll, sollte im öffentlichen Ordner abgelegt werden. Wenn wir das Projekt nun erneut erstellen, finden wir unsere aus zwei Dateien bestehende Browsererweiterung kompiliert im Ordner dist.

npm run build

Installation

Lassen Sie uns nun überprüfen, ob alles wie erwartet funktioniert. Wenn Sie eine Browser-Erweiterung noch nie lokal getestet haben, befolgen Sie einfach diese einfachen Schritte:

1. Öffnen Sie die Seite „Erweiterungen“, indem Sie chrome://extensions in einen neuen Tab eingeben.
2. Aktivieren Sie den Entwicklermodus, indem Sie den Schalter Entwicklermodus umschalten.
3. Klicken Sie auf Entpackt laden und wählen Sie das Erweiterungsverzeichnis aus, bei dem es sich um den von Vite generierten dist-Ordner handelt. Und das ist es! Die Erweiterung ist nun installiert. Wenn Sie auf den Service-Worker-Link klicken, werden die DevTools für diesen Service-Worker geöffnet, wo Sie die von unserem Worker generierten Protokolle in Aktion sehen können.

simple-vite-extension

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Browsererweiterung mit Vite TS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!