Einführung

In diesem Blog erfahren Sie, wie Sie eine Chrome-Erweiterung mit TypeScript, React, Tailwind CSS und Webpack einrichten und entwickeln. Wir werden eine minimale Erweiterung namens ?NoteMe“ ?? erstellen, um unser Verst?ndnis auf die Probe zu stellen. Unsere Erweiterung wird die folgenden Funktionen umfassen:

• Benutzern erlauben, mehrere Notizen für eine bestimmte Website hinzuzufügen
• Erm?glichen Sie Benutzern, gespeicherte Notizen für eine bestimmte Website anzuzeigen
• Stellen Sie die Option zum L?schen von Notizen für eine bestimmte Website bereit
• Notizen lokal im Speicher des Browsers speichern
• Optional Notizen mit einem Backend für Cloud-Speicher synchronisieren

Auffrischung

In diesem Blog erfahren Sie, wie Sie mithilfe moderner Technologien eine Chrome-Erweiterung erstellen. In diesem Leitfaden wird davon ausgegangen, dass Sie bereits mit dem Erstellen und Hochladen einer Erweiterung in Chrome w?hrend der lokalen Entwicklung vertraut sind. Wenn Sie neu in diesem Bereich sind oder eine detaillierte Anleitung zu den Grundlagen ben?tigen, empfehle ich Ihnen, einen Blick auf meinen vorherigen Blog zu werfen: Link

Vorschau auf die Erweiterung

Die Erweiterung umfasst die folgenden Komponenten:

• Umschaltfl?che: Eine Schaltfl?che zum ?ffnen und Schlie?en der Seitenleiste.
• Seitenleiste: Ein vielseitiges Panel, in dem Benutzer: Schreiben Sie neue Notizen. Gespeicherte Notizen anzeigen. Gespeicherte Notizen l?schen. Synchronisieren Sie Notizen mit dem Backend (Bereitstellung im Code verfügbar, obwohl derzeit kein Backend verbunden ist).
• Popup: Ein kleines Fenster, das es Benutzern erm?glicht, die Umschalttaste (zum ?ffnen/Schlie?en der Seitenleiste) an vorgegebenen Positionen auf dem Bildschirm neu zu positionieren Hinweis: Obwohl es in dieser Implementierung keine Backend-Integration gibt, enth?lt der Code Bestimmungen für die zukünftige Verbindung eines Backends.

Unten finden Sie Screenshots, die zeigen, wie die Erweiterung nach Fertigstellung aussehen wird:

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, stellen Sie sicher, dass die folgenden Tools auf Ihrem System installiert sind:

• Node.js (v18.16 LTS oder h?her)
• NPM (Node Package Manager, gebündelt mit Node.js)
• TypeScript
• Webpack
• VS-Code-Editor (oder ein beliebiger Code-Editor Ihrer Wahl)

Erweiterung von 40.000 Fu?

Die obige Abbildung bietet einen allgemeinen überblick über die interne Funktionsweise dieser Erweiterung. Hier sind einige wichtige Punkte, die wir aus dem Diagramm ableiten k?nnen:

• Das Inhaltsskript interagiert direkt mit dem DOM der übergeordneten Webseite und erm?glicht so die ?nderung des Seiteninhalts.
• Popup, Hintergrund und Inhaltsskripte kommunizieren miteinander über das Laufzeitnachrichtensystem von Chrome.
• Für Aufgaben im Zusammenhang mit Chrome-Speicher oder Backend-API-Aufrufen delegieren Inhalte oder Popup-Skripte die Verantwortung mithilfe des Laufzeitnachrichtensystems an den Hintergrundarbeiter.
• Das Hintergrundskript fungiert als alleiniger Vermittler mit dem App-Backend und dem Chrome-Speicher. Darüber hinaus werden Benachrichtigungen, sofern vorhanden, über Laufzeitnachrichten an andere Skripte weitergeleitet.
• Popup und Inhaltsskripte tauschen Informationen direkt über das Laufzeitnachrichtensystem von Chrome aus.

Einrichtung der Erweiterung

Chrome-Erweiterungsprojekte erfordern zwar keine bestimmte Projektstruktur, erfordern jedoch eine manifest.json-Datei im Stammverzeichnis des Build-Verzeichnisses. Wir nutzen diese Flexibilit?t und definieren eine benutzerdefinierte Projektstruktur, die dabei hilft, verschiedene Skripte effektiv zu organisieren. Diese Struktur erm?glicht eine bessere Wiederverwendung von Code über Skripte hinweg und minimiert Duplikate, wodurch unser Entwicklungsprozess rationalisiert wird.

Schritt 1: Erstellen Sie eine grundlegende Verzeichnisstruktur für das Projekt

Zu Beginn richten wir eine grundlegende Verzeichnisstruktur für das Projekt ein. Sie k?nnen das folgende Bash-Skript verwenden, um die Grundstruktur zusammen mit der Datei manifest.json zu erstellen:

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Stellen Sie sicher, dass Ihre Verzeichnisstruktur der im Screenshot unten gezeigten ?hnelt.

Schritt 2: Die Datei manifest.json im ?ffentlichen Verzeichnis sollte wie folgt strukturiert sein:

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

Zu beachtende Punkte:

• Die Dateierweiterungen sind .js, da die .ts-Dateien in .js-Dateien kompiliert werden, die zur Laufzeit in der Chrome-Umgebung erforderlich sind.
• Das übereinstimmungsfeld verwendet als Wert, sodass die Erweiterung auf jeder in Chrome geladenen Webseite ausgeführt werden kann.
• Drei Bilddateien werden referenziert: app-icon.png, sidebar-open.png und sidebar-close.png. Sie finden diese Dateien im Repository, das am Ende dieses Blogs verlinkt ist.
• Die Datei manifest.json muss nach der Erstellung des Projekts auf der Stammebene des dist-Verzeichnisses abgelegt werden. Um dies sicherzustellen, müssen wir die Webpack-Einstellungen so konfigurieren, dass sie w?hrend des Erstellungsprozesses entsprechend verschoben werden.

Schritt 3: Initialisieren Sie npm und installieren Sie Abh?ngigkeiten

• Beginnen Sie mit der Initialisierung von npm in Ihrem Projekt mit dem folgenden Befehl: npm init -y
• Fügen Sie die erforderlichen Entwicklungsabh?ngigkeiten zum Abschnitt ?devDependencies“ Ihres Projekts hinzu. Führen Sie den folgenden Befehl aus: npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack webpack-cli webpack-dev-server
• Fügen Sie die Laufzeitabh?ngigkeiten hinzu, die zum Ausführen des Projekts erforderlich sind: npm i --save reagieren reagieren-dom

Schritt 4: Erstellen Sie Dateien, auf die in manifest.json verwiesen wird

Erstellen Sie folgende Dateien, auf die in manifest.json verwiesen wird: backgroun.ts, content.ts und popup.html.

• background.ts: Erstellen Sie diese Datei im Verzeichnis src/scripts/background
• content.ts: Erstellen Sie diese Datei im Verzeichnis src/scripts/content
• popup.html Erstellen Sie diese Datei im ?ffentlichen Verzeichnis

Schritt 5: Popup- und Hintergrundcode aktualisieren

Fügen Sie den folgenden Code zur Datei popup.html im ?ffentlichen Verzeichnis hinzu:

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Hinweis:

Der obige Code installiert zwei Listener:

1. Die von chrome.runtime.onInstalled.addListener registrierte Funktion wird immer dann ausgeführt, wenn die Erweiterung im Browser installiert wird. Dies kann verwendet werden, um den Chrome-Speicher oder ein Backend (falls zutreffend) mit einem vordefinierten Status zu initialisieren.
2. Die von chrome.runtime.onMessage.addListener registrierte Funktion wird immer dann ausgeführt, wenn das Hintergrundskript eine Nachricht vom Inhalt oder Popup-Skripten empf?ngt.

Zus?tzlich bringt die Importanweisung Listener aus dem Verzeichnis src/lib ein. Die Kernlogik der App ist in src/lib integriert und erm?glicht die Wiederverwendung in verschiedenen Kontexten (z. B. Inhalt und Hintergrundskripts).

Schritt 6: Exemplarische Vorgehensweise für das Verzeichnis src/lib

Das Verzeichnis src/lib beherbergt die Kernlogik der Erweiterung. Nachfolgend finden Sie eine übersicht über die Struktur und die wichtigsten Komponenten:

• Komponentenverzeichnis: Enth?lt alle in der Erweiterung verwendeten React-Komponenten.
• lib/components/ContentApp.tsx: Fungiert als Containerkomponente für das Inhaltsskript.
• lib/components/NoteMePosition.tsx: Enth?lt die Komponente, die für das Popup-Skript verantwortlich ist.
• helpers.ts: Enth?lt Hilfsfunktionen, die in der gesamten Erweiterung verwendet werden.
• storage-model.ts: Verwaltet Interaktionen mit dem lokalen Speicher von Chrome. Einzelheiten zur Struktur der gespeicherten Daten finden Sie in dieser Datei zusammen mit ?types.ts“.
• types.ts: Definiert die benutzerdefinierten Typen, die in der Erweiterung verwendet werden.
• worker.ts: Enth?lt Rückrufe für Hintergrundereignis-Listener.

Eine detaillierte Implementierung finden Sie im tats?chlichen Code im Repository.

Schritt 7: Montage der Reaktionskomponenten

In diesem Schritt mounten wir die React-Komponenten zum Rendern. Diese Komponenten werden in zwei verschiedenen Skripten bereitgestellt: src/scripts/content/content.ts und src/scripts/popup/popup.ts.

Popup-Skript: Gefunden in src/scripts/popup/popup.ts.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
? ? if [ ! -d "" ]; then
? ? ? ? mkdir 
? ? fi
}

create_file () {
? ? if [ ! -e "/" ]; then
? ? ? ? touch /
? ? fi
}

create_public_directories () {
? ? for public_path in "${public_paths[@]}";
? ? do
? ? ? ? create_directory $public_path
? ? done
}

create_source_directories () {
? ? for source_path in "${source_paths[@]}";
? ? do
? ? ? ? create_directory $source_path
? ? done
}

execute () {
? ? echo "creating project struture at "${bash_script_absolute_path}
? ? create_directory $project_name
? ? cd $bash_script_absolute_path"/"$project_name
? ? create_public_directories
? ? create_source_directories
? ? create_file $manifest_file $public_directory_path
? ? echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Inhaltsskript: Gefunden in src/scripts/content/content.ts.

{
? ? "manifest_version": 3,
? ? "name": "NoteMe",
? ? "version": "1.0",
? ? "description": "A Chrome extension built with React and TypeScript using Webpack.",
? ? "action": {
? ? ? "default_popup": "popup.html",
? ? ? "default_icon": "app-icon.png"
? ? },
? ? "background": {
? ? ? "service_worker": "background.js",
? ? ? "type": "module"
? ? },
? ? "content_scripts": [
? ? ? {
? ? ? ? "matches": ["<all_urls>"],
? ? ? ? "js": ["content.js"],
? ? ? ? "run_at": "document_end"
? ? ? }
? ? ],
? ? "permissions": [
? ? ? "storage",
? ? ? "activeTab",
? ? ? "scripting",
? ? ? "webNavigation"
? ? ],
? ? "host_permissions": ["<all_urls>"],
? ? "web_accessible_resources": [
? ? ? {
? ? ? ? "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
? ? ? ? "matches": ["<all_urls>"]
? ? ? }
? ? ]
? }

Kernpunkte:

• Separate Bereitstellungsskripts: ?Die Popup- und Inhaltsskripte funktionieren in unterschiedlichen Kontexten ?
• Popup-Skript: Wird im Kontext der popup.html-Webseite ausgeführt, in die es geladen wird. ?
• Inhaltsskript: Wird im Kontext der im Browser geladenen Hauptwebseite ausgeführt.
• Shadow DOM für Content Script: ?
  • Vom Inhaltsskript eingefügte Stile k?nnen sich m?glicherweise auf das Erscheinungsbild der übergeordneten Webseite auswirken. ?
  • Um dies zu verhindern, verwenden wir das Shadow DOM, um die Stile zu kapseln und sicherzustellen, dass sie innerhalb der Erweiterung isoliert bleiben. ?
  • Dies ist für das Popup-Skript nicht erforderlich, da es in seiner eigenen isolierten Umgebung (popup.html) arbeitet.

Schritt 8: Konfigurationen zum Kompilieren und Erstellen

Hinzufügen der für das Kompilieren und Erstellen der Erweiterung erforderlichen Konfigurationen

Um die Erweiterung erfolgreich zu kompilieren und zu erstellen, müssen wir die folgenden Dateien konfigurieren:

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

Wichtige Punkte:

• Standardeinstellungen: ?Wo immer m?glich, werden Standardeinstellungen bereitgestellt, um den Prozess zu vereinfachen und sicherzustellen, dass der Fokus weiterhin auf dem Hauptziel liegt – dem Aufbau einer voll funktionsf?higen Erweiterung.
• Details im Repository: Die vollst?ndigen Konfigurationen und detaillierten Einstellungen dieser Dateien finden Sie im Code-Repository.

Diese Konfigurationen übernehmen die TypeScript-Kompilierung, die Tailwind-CSS-Integration und den gesamten Webpack-Erstellungsprozess für die Erweiterung.

Testen der Erweiterung

1. Generieren Sie das dist-Verzeichnis: Führen Sie den folgenden Befehl aus, um das dist-Verzeichnis zu erstellen: ?npm run build
2. Auf Chrome hochladen: ? ?
   • ?ffnen Sie Chrome und navigieren Sie zu chrome://extensions/. ? ?
   • Aktivieren Sie den Entwicklermodus in der oberen rechten Ecke. ? ?
   • Klicken Sie auf Load Unpacked und w?hlen Sie das dist-Verzeichnis aus.
3. Installation überprüfen:
   • Nach dem Laden erscheint das Symbol der Erweiterung standardm??ig auf jeder Seite in der unteren rechten Ecke.
4. Funktionsprüfung:
   • Positionssteuerung: Verwenden Sie die Steuerelemente im Popup, um die Position des Symbols zu ?ndern.
   • Notizenfunktion: Notizen werden für jede Website unabh?ngig gespeichert und k?nnen für eine bestimmte Website gel?scht werden, ohne dass sich dies auf andere auswirkt.
5. Backend-Simulation:
   • Obwohl derzeit kein Backend verbunden ist, enth?lt der Code eine Bestimmung zur Integration mit einem.
   • Die aktuelle Implementierung ahmt eine Backend-Verbindung mithilfe von setTimeout nach und verspricht, asynchrone Interaktionen zu simulieren.

Hier sind einige Screenshots, die w?hrend des Tests der Erweiterung aufgenommen wurden.

Wichtige Erkenntnisse

Hier sind ein paar wichtige Erkenntnisse aus diesem Blog

• Wir haben untersucht, wie verschiedene Komponenten der Chrome-Umgebung, wie z. B. Inhaltsskripte, Popup-Skripte und Hintergrundarbeiter, mithilfe des Laufzeitnachrichtensystems von Chrome miteinander kommunizieren.
• Wir haben gelernt, wie man eine Chrome-Erweiterung von Grund auf konfiguriert und erstellt, einschlie?lich der Einrichtung der Projektstruktur, der Installation von Abh?ngigkeiten und dem Schreiben von Kernfunktionen.
• Wir haben einige gute Praktiken entdeckt, wie zum Beispiel:
  • Verbesserung der Code-Wiederverwendbarkeit über Skripte hinweg für Wartbarkeit und Skalierbarkeit.
  • Verwendung von Shadow DOM in Inhaltsskripten, um Stilkonflikte mit der übergeordneten Webseite zu verhindern.

Blick nach vorn

In Zukunft plane ich, an einem weiteren Blog zu arbeiten, in dem wir uns mit dem Prozess der Ver?ffentlichung einer voll funktionsf?higen Chrome-Erweiterung im Chrome Web Store befassen. Das Ziel dieses Blogs wird sein:

• Entwickeln Sie eine Erweiterung, die komplex genug ist, um ein reales Problem zu l?sen.
• Demonstrieren Sie den schrittweisen Prozess der Ver?ffentlichung der Erweiterung im Chrome Web Store.

Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Blog zu lesen! Ihr Interesse und Ihre Unterstützung bedeuten mir sehr viel. Ich freue mich darauf, im weiteren Verlauf dieser Reise weitere Erkenntnisse zu teilen.

Viel Spa? beim Codieren!

Github-Link: https://github.com/gauravnadkarni/chrome-extension-starter-app

Dieser Artikel wurde ursprünglich auf Medium ver?ffentlicht.

Das obige ist der detaillierte Inhalt vonEntwicklung von Chrome-Erweiterungen – Entwickeln Sie eine minimale App mit TypeScript, React, Tailwind CSS und Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!