Dieser Artikel beschreibt den Prozess des Erstellens einer Chrome -Erweiterung mit Next.js, wobei der Schwerpunkt auf der Nutzung von Reaktionen für das Popup und die effiziente Codeorganisation wird. Der Autor teilt seine Erfahrung mit dem Umschreiben eines Twitter -Themenprojekts als Next.js -Erweiterung und zeigt die Vorteile der Struktur von Next.js gegenüber Alternativen wie React App.

Der zitierte wichtige Vorteil ist eine verbesserte Codeorganisation, wobei die Kesselplatte minimiert wird. Während Next.js Funktionen wie statischer HTML -Export, JavaScript -Vorspannung und Routing von Vorteil sind, war die primäre Motivation sauberer Code.

Der Autor beschreibt eine praktische Ordnerstruktur:

? extension
  ? manifest.json
? next-app
  ? pages
  ? public
  ? styles
  ? package.json
README.md

Ein entscheidender Aspekt ist das angepasste Build -Skript. Die Standard Next Export muss geändert werden, um Chrome -Erweiterungsspezifikationen zu verarbeiten. Das Skript exportiert die Next.js -App in das Erweiterungsverzeichnis, benennt Dateien um (Entfernen führender Unterstriche) und verwaltet Vermögenswerte aus dem Ordner public . Das letzte, umfassende Build -Skript, einschließlich der Handhabung von Asset, wird bereitgestellt.

Die Datei Manifest.json ist so konfiguriert, dass die action Keyword (Manifest v3) verwendet wird, um die von Next.js:

{
  "name": "Next Chrome",
  "description": "Next.js Chrome Extension starter",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Next.js app",
    "default_popup": "index.html"
  }
}

Wichtige Einschränkungen sind festgestellt: Server-Seite Weiter.js Features (z. B. next/image ) sind mit Chromverlängerungen nicht kompatibel.

Die letzten Schritte beinhalten das Erstellen der Erweiterung mit npm run build (oder arkarn Build ), das geladene Erweiterung in Chrome ( Chrome: // Extensions ) und den Entwicklermodus aktivieren.

Abschließend bietet der Artikel Entwicklern einen praktischen Leitfaden, der die Stärken von Next.js für den Aufbau von Chromerweiterungen nutzen und einen optimierten Entwicklungsprozess und eine verbesserte Codeorganisation anbietet. Es betont die Bedeutung eines maßgeschneiderten Bauprozesses und zeigt potenzielle Fallstricke auf.