So erstellen Sie Ihre erste Firefox-Erweiterung
Das Erstellen einer Firefox-Erweiterung mag zunächst entmutigend erscheinen, aber mit Manifest V3 und modernen WebExtensions-APIs können Sie Ihre erste funktionierende Erweiterung in unter 10 Minuten erstellen. Dieses Firefox-Erweiterungs-Tutorial führt Sie durch die Erstellung einer funktionalen MV3-Erweiterung, die Webseiten modifiziert und eine Popup-Oberfläche enthält.
Wichtigste Erkenntnisse
- Erstellen Sie eine funktionierende Firefox-Erweiterung mit Manifest V3 in unter 10 Minuten
- Entwickeln Sie Content Scripts, die Webseiten sicher in isolierten Kontexten modifizieren
- Implementieren Sie Popup-Oberflächen für Benutzerinteraktion mit Message Passing
- Befolgen Sie Sicherheits-Best-Practices mit minimalen Berechtigungen und externen Skripten
Was sind WebExtensions und warum Manifest V3?
WebExtensions sind browserübergreifend kompatible Add-ons, die mit standardisierten Webtechnologien – HTML, CSS und JavaScript – entwickelt werden. Firefox WebExtensions Manifest V3 stellt den aktuellen Standard für die Entwicklung von Erweiterungen dar und bietet verbesserte Sicherheit durch Service Worker, bessere Performance mit deklarativen APIs und stärkere browserübergreifende Kompatibilität.
Obwohl Firefox weiterhin Manifest V2 unterstützt, stellt der Start mit Manifest V3 sicher, dass Ihre Erweiterung mit zukünftigen Browser-Updates kompatibel bleibt und sich an die Erweiterungsarchitektur von Chrome, Edge und Safari anpasst. Dieser Leitfaden konzentriert sich ausschließlich auf MV3-Best-Practices.
Einrichten Ihrer Firefox-Erweiterungs-Projektstruktur
Lassen Sie uns Ihre erste Firefox-Erweiterung Schritt für Schritt erstellen. Erstellen Sie einen neuen Ordner namens my-first-extension und fügen Sie diese wesentlichen Dateien hinzu:
Erstellen der Manifest V3-Konfiguration
Die Datei manifest.json ist das Herzstück jeder Erweiterung. Erstellen Sie diese Datei mit der folgenden Manifest V3-Konfiguration:
{
"manifest_version": 3,
"name": "My Page Enhancer",
"version": "1.0.0",
"description": "Enhances web pages with custom styling",
"action": {
"default_popup": "popup.html",
"default_icon": {
"48": "icon.png"
}
},
"content_scripts": [
{
"matches": ["*://*.example.com/*"],
"js": ["content.js"]
}
],
"icons": {
"48": "icon.png"
}
}Beachten Sie die Verwendung von "action" anstelle der veralteten "browser_action" – dies ist eine zentrale Anforderung für Firefox MV3. Das Manifest folgt dem Prinzip minimaler Berechtigungen, einer grundlegenden Firefox-Erweiterungs-Best-Practice.
Entwickeln des Content Scripts für Seitenmodifikation
MV3-Content-Scripts laufen in einem isolierten Kontext und schützen Ihren Erweiterungscode vor bösartigen Seitenskripten. Erstellen Sie content.js:
// content.js - Runs on matching pages
console.log('Extension loaded on:', window.location.href);
// Add a subtle border to all paragraphs
document.querySelectorAll('p').forEach(paragraph => {
paragraph.style.border = '2px solid #4A90E2';
paragraph.style.padding = '8px';
paragraph.style.borderRadius = '4px';
});
// Listen for messages from the popup
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'changeColor') {
document.body.style.backgroundColor = request.color;
}
});Dies demonstriert, wie Manifest V3 den Erweiterungscode vom Seitenkontext isoliert und so Sicherheitslücken verhindert, die in älteren Erweiterungsarchitekturen häufig vorkommen.
Discover how at OpenReplay.com.
Erstellen der Firefox Action Popup-Oberfläche
Die Action-Popup-Komponente ermöglicht Benutzerinteraktion. Erstellen Sie popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 300px;
padding: 16px;
font-family: system-ui, -apple-system, sans-serif;
}
button {
width: 100%;
padding: 8px;
margin: 4px 0;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Page Enhancer</h2>
<button id="blue">Blue Background</button>
<button id="green">Green Background</button>
<script src="popup.js"></script>
</body>
</html>Fügen Sie die entsprechende Datei popup.js hinzu, um Benutzerinteraktionen zu verarbeiten:
// popup.js - Handles popup interactions
document.getElementById('blue').addEventListener('click', () => {
sendColorChange('#E3F2FD');
});
document.getElementById('green').addEventListener('click', () => {
sendColorChange('#E8F5E9');
});
async function sendColorChange(color) {
const [tab] = await browser.tabs.query({
active: true,
currentWindow: true
});
browser.tabs.sendMessage(tab.id, {
action: 'changeColor',
color: color
});
}Laden und Testen Ihres JavaScript-Firefox-Add-ons
So testen Sie Ihr JavaScript-Firefox-Add-on:
- Öffnen Sie Firefox und navigieren Sie zu
about:debugging - Klicken Sie in der linken Seitenleiste auf „Dieser Firefox”
- Klicken Sie auf „Temporäres Add-on laden”
- Wählen Sie eine beliebige Datei aus Ihrem Erweiterungsordner aus
Ihr Erweiterungssymbol erscheint in der Symbolleiste. Besuchen Sie eine beliebige example.com-Seite, um das Content Script in Aktion zu sehen. Klicken Sie auf das Erweiterungssymbol, um das Popup zu öffnen und die Hintergrundfarbänderungen zu testen.
Wenn Sie Dateien ändern, klicken Sie in about:debugging auf „Neu laden”, um Änderungen sofort anzuwenden – ein Neustart des Browsers ist nicht erforderlich.
Firefox-Erweiterungs-Best-Practices für MV3-Entwicklung
Die Befolgung dieser Firefox-Erweiterungs-Best-Practices stellt sicher, dass Ihre Erweiterung die Überprüfung besteht und eine sichere Benutzererfahrung bietet:
- Minimale Berechtigungen: Fordern Sie nur
activeTaban, wenn Sie Zugriff auf den aktuellen Tab benötigen, und vermeiden Sie umfassende Host-Berechtigungen - Kein Inline-JavaScript: Die Content Security Policy von MV3 blockiert Inline-Skripte – verwenden Sie immer externe
.js-Dateien - Service Worker: Verwenden Sie für Hintergrundaufgaben Service Worker (hier nicht behandelt, aber essentiell für erweiterte Funktionen)
- Sichere Kommunikation: Verwenden Sie
browser.runtime.sendMessage()für die Kommunikation zwischen Komponenten
Fazit
Sie haben erfolgreich eine funktionierende Firefox-Erweiterung mit Manifest V3 erstellt. Der Übergang von einfachen Content Scripts zu vollwertigen Erweiterungen folgt diesem gleichen Muster: isolierte Kontexte, Message Passing und minimale Berechtigungen. Beherrschen Sie diese Grundlagen, und Sie werden sichere, performante Erweiterungen entwickeln, denen Benutzer vertrauen.
Um Ihre Fähigkeiten zu erweitern, erkunden Sie die Storage API zum Speichern von Benutzereinstellungen, implementieren Sie Background Service Worker für komplexe Event-Verarbeitung und lesen Sie die aktuelle MDN WebExtensions-Dokumentation für API-Updates.
Häufig gestellte Fragen (FAQs)
Ja, WebExtensions mit Manifest V3 sind weitgehend browserübergreifend kompatibel. Geringfügige Unterschiede bestehen in API-Namespaces, wobei Chrome chrome und Firefox browser verwendet, aber Firefox unterstützt beide aus Kompatibilitätsgründen.
Die Datei manifest.json gibt Match-Patterns im Abschnitt content_scripts an. Ändern Sie das matches-Array, um andere Domains einzuschließen, oder verwenden Sie breitere Patterns wie *://*/* für alle Websites, obwohl dies sorgfältige Sicherheitsüberlegungen erfordert.
Verpacken Sie Ihre Erweiterung als ZIP-Datei, erstellen Sie ein Entwicklerkonto auf addons.mozilla.org, reichen Sie Ihre Erweiterung zur Überprüfung ein und warten Sie auf die Genehmigung. Firefox überprüft Erweiterungen in der Regel innerhalb von 24-48 Stunden.
Content Scripts laufen in Webseitenkontexten und können auf DOM-Elemente zugreifen und diese modifizieren. Background Scripts in MV3 verwenden Service Worker, die Events und API-Aufrufe verarbeiten, aber nicht direkt auf Seiteninhalte zugreifen können, was Message Passing für die Kommunikation erfordert.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
