Entwicklung von Chrome-Erweiterungen – Entwickeln Sie eine minimale App mit TypeScript, React, Tailwind CSS und Webpack

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!