Wie man mit der Entwicklung von Browser-Erweiterungen beginnt

Obwohl die Entwicklung von Browser-Erweiterungen Frontend-Technologien verwendet, unterscheiden sich die APIs und Arbeitsmethoden von Webseiten, daher können Entwicklungsframeworks die Effizienz erheblich steigern. Die Entwicklung von Browser-Erweiterungen ist im Vergleich zur Web- und App-Entwicklung immer noch ein Nischenbereich, und die Entwicklergemeinschaft ist deutlich weniger aktiv. Glücklicherweise sind alle notwendigen Entwicklungswerkzeuge verfügbar. Hier ist eine Zusammenfassung dessen, was ich verwendet habe.

Alle großen Browser folgen jetzt einem einheitlichen Standard für die Erweiterungsentwicklung: manifest v3, daher sind der Entwicklungsprozess und der Tech-Stack ähnlich. Es könnte einige Unterschiede in Details geben, die ich dort vermerken werde, wo ich sie angetroffen habe.

Entwicklungsframeworks

Ein qualifiziertes Entwicklungsframework sollte mindestens die Repo-Struktur etablieren, Hot-Reload-Debugging unterstützen, Typenhinweise für Browser-Erweiterungsschnittstellen unterstützen usw. Sie können einen der folgenden Tech-Stacks wählen.

Code-Repository-Vorlage

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Genau genommen ist es eine Vorlage, kein Framework. Es enthält alle Funktionen, die ein Entwicklungsframework haben sollte. Für die Entwicklung von Browser-Erweiterungen, bei denen die Schnittstellen nicht zu komplex sind, bevorzuge ich persönlich Repository-Vorlagen, die alle Details zeigen, anstatt Frameworks, die Implementierungsdetails verbergen.

• Unterstützt HMR, sourcemap usw.
• Verwendet pnpm + turbo zur Verwaltung des Monorepos
• Bietet Implementierungen für alle Chrome-Erweiterungsfunktionen, einschließlich Tab-Startseite, DevTools, Seitenleiste usw., was Referenz und Ersetzung erleichtert
• Paketierung für Chrome, Firefox und andere große Browser. Standardmäßige Kompatibilität für Firefox
• Keine versteckten Details, der gesamte Code wird angezeigt, um das Verständnis und die Modifikation zu erleichtern

Plasmo

Wenn Ihnen die obige Vorlage nicht gefällt, können Sie das Plasmo-Framework in Betracht ziehen

• Unterstützt Mainstream-Frameworks wie React, Vue, Angular
• Unterstützt Debugging-Funktionen wie HMR
• Verwendet Parcel für das Bundling, nicht vite
• Einige Details (wie Manifest-Generierung, Content-UI-Rendering-Prozess) sind gekapselt, was das Verständnis erschwert

Debugging

• Laden der Erweiterung
  • Führen Sie npm dev im Repo aus
  • Öffnen Sie Erweiterungen in Chrome: chrome://extensions/
  • Aktivieren Sie den “Entwicklermodus” -> Klicken Sie auf “Entpackt laden” -> Wählen Sie den kompilierten Ausgabeordner
• Debugging wird über Chrome DevTools implementiert
  • Content Scripts: Wählen Sie “Content Scripts” im “Quellen”-Tab, um Code zu debuggen
  • Background Script läuft in einem Service Worker, daher öffnen Sie chrome://extensions/ -> Finden Sie die Erweiterung -> Klicken Sie auf Service Worker, um Code zu debuggen