Wie man eine Chrome-Erweiterung mit Ihrem Code erstellt
Viele Benutzer möchten lernen, wie man eine Chrome-Erweiterung erstellt und die Funktionen ihres Browsers erweitert. Wenn Sie den Programmierteil abgedeckt haben, ist es nicht so schwer, eine Chrome-Erweiterung zu erstellen.
Wie erstelle ich eine Chrome-Erweiterung?
1. Erstellen Sie eine Manifestdatei
- Erstellen Sie einen neuen Ordner auf Ihrem Computer. Dieser Ordner wird alle Dateien für Ihre Erweiterung enthalten. Nennen Sie ihn etwas wie MyFirstExtension.
- Erstellen Sie in Ihrem Projektordner eine Datei mit dem Namen manifest.json. Diese Datei informiert Chrome über Ihre Erweiterung und deren Funktionen.
- Fügen Sie den folgenden Code zu manifest.json hinzu:
JSON{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "Eine einfache Chrome-Erweiterung.", "action": { "default_popup": "popup.html", "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } }, "permissions": [] }
2. Erstellen Sie das Popup-HTML
- Erstellen Sie eine Datei mit dem Namen popup.html in Ihrem Projektordner. Diese Datei definiert die Struktur des Popup-Fensters, das erscheint, wenn Sie auf das Erweiterungssymbol klicken.
- Fügen Sie den folgenden Code zu popup.html hinzu:
HTMLMeine erste Erweiterung Hallo, Welt!
3. Fügen Sie Stile und JavaScript-Funktionalität hinzu (Optional)
- Wenn Sie Ihr Popup gestalten möchten, erstellen Sie eine Datei mit dem Namen popup.css und verlinken Sie sie in popup.html:
HTML - Fügen Sie Ihre CSS-Stile in popup.css hinzu.
- Wenn Sie JavaScript-Funktionalität benötigen, erstellen Sie eine Datei mit dem Namen popup.js und verlinken Sie sie in popup.html:
HTML - Fügen Sie Ihren JavaScript-Code in
popup.jshinzu.
4. Fügen Sie ein Symbol hinzu und laden Sie Ihre Erweiterung
- Fügen Sie ein Symbolbild zu Ihrem Projektordner hinzu und benennen Sie es icon.png. Dieses Symbol wird in der Chrome-Toolbar angezeigt.
- Öffnen Sie Chrome und gehen Sie zu chrome://extensions/.
- Aktivieren Sie den Entwicklermodus, indem Sie den Schalter in der oberen rechten Ecke umschalten.
- Klicken Sie auf die Schaltfläche Entpackte Erweiterung laden und wählen Sie Ihren Projektordner aus.
5. Testen Sie Ihre Erweiterung und veröffentlichen Sie sie (Optional)
- Ihre Erweiterung sollte jetzt in Chrome geladen sein. Klicken Sie auf das Erweiterungssymbol in der Toolbar, um Ihr Popup zu sehen.
- Wenn Sie Ihre Erweiterung im Chrome Web Store veröffentlichen möchten, müssen Sie ein Entwicklerkonto erstellen und die Chrome Web Store Entwicklerdokumentation befolgen.
Wir hoffen, dass dies Ihnen hilft, mit der Erstellung Ihrer eigenen Chrome-Erweiterung zu beginnen! Lassen Sie uns wissen, wenn Sie Fragen haben oder weitere Unterstützung benötigen, in den Kommentaren unten.