Comment créer votre première extension Firefox
Créer une extension Firefox peut sembler intimidant, mais avec Manifest V3 et les API WebExtensions modernes, vous pouvez créer votre première extension fonctionnelle en moins de 10 minutes. Ce tutoriel d’extension Firefox vous guidera dans la création d’une extension MV3 fonctionnelle qui modifie les pages web et inclut une interface popup.
Points clés à retenir
- Créez une extension Firefox fonctionnelle avec Manifest V3 en moins de 10 minutes
- Développez des scripts de contenu qui modifient les pages web en toute sécurité dans des contextes isolés
- Implémentez des interfaces popup pour l’interaction utilisateur avec passage de messages
- Suivez les bonnes pratiques de sécurité avec des permissions minimales et des scripts externes
Que sont les WebExtensions et pourquoi Manifest V3 ?
Les WebExtensions sont des modules complémentaires compatibles entre navigateurs, construits avec des technologies web standard : HTML, CSS et JavaScript. Firefox WebExtensions Manifest V3 représente la norme actuelle pour le développement d’extensions, offrant une sécurité améliorée grâce aux service workers, de meilleures performances avec des API déclaratives et une compatibilité inter-navigateurs renforcée.
Bien que Firefox prenne encore en charge Manifest V2, commencer avec Manifest V3 garantit que votre extension reste compatible avec les futures mises à jour du navigateur et s’aligne sur l’architecture d’extension de Chrome, Edge et Safari. Ce guide se concentre exclusivement sur les bonnes pratiques MV3.
Configuration de la structure de votre projet d’extension Firefox
Créons votre première extension Firefox étape par étape. Créez un nouveau dossier appelé my-first-extension et ajoutez ces fichiers essentiels :
Création de la configuration Manifest V3
Le fichier manifest.json est le cœur de toute extension. Créez ce fichier avec la configuration Manifest V3 suivante :
{
"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"
}
}Notez l’utilisation de "action" au lieu du "browser_action" obsolète — c’est une exigence clé pour Firefox MV3. Le manifeste suit les principes de permissions minimales, une bonne pratique fondamentale pour les extensions Firefox.
Construction du script de contenu pour la modification de pages
Les scripts de contenu MV3 s’exécutent dans un contexte isolé, protégeant le code de votre extension des scripts de page malveillants. Créez 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;
}
});Ceci démontre comment Manifest V3 isole le code de l’extension du contexte de la page, prévenant les vulnérabilités de sécurité courantes dans les architectures d’extension plus anciennes.
Discover how at OpenReplay.com.
Création de l’interface popup d’action Firefox
Le composant popup d’action fournit l’interaction utilisateur. Créez 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>Ajoutez le popup.js correspondant pour gérer les interactions utilisateur :
// 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
});
}Chargement et test de votre module complémentaire Firefox JavaScript
Pour tester votre module complémentaire Firefox JavaScript :
- Ouvrez Firefox et accédez à
about:debugging - Cliquez sur « Ce Firefox » dans la barre latérale gauche
- Cliquez sur « Charger un module complémentaire temporaire »
- Sélectionnez n’importe quel fichier de votre dossier d’extension
L’icône de votre extension apparaît dans la barre d’outils. Visitez n’importe quelle page example.com pour voir le script de contenu en action. Cliquez sur l’icône de l’extension pour ouvrir le popup et tester les changements de couleur d’arrière-plan.
Lorsque vous modifiez des fichiers, cliquez sur « Recharger » dans about:debugging pour appliquer les modifications instantanément — aucun redémarrage du navigateur n’est requis.
Bonnes pratiques pour les extensions Firefox en développement MV3
Suivre ces bonnes pratiques pour les extensions Firefox garantit que votre extension passe la révision et offre une expérience utilisateur sécurisée :
- Permissions minimales : Ne demandez
activeTabque lorsque vous avez besoin d’accéder à l’onglet actuel, en évitant les permissions d’hôte larges - Pas de JavaScript inline : La Content Security Policy de MV3 bloque les scripts inline — utilisez toujours des fichiers
.jsexternes - Service Workers : Pour les tâches en arrière-plan, utilisez des service workers (non couverts ici mais essentiels pour les fonctionnalités avancées)
- Communication sécurisée : Utilisez
browser.runtime.sendMessage()pour la communication entre composants
Conclusion
Vous avez créé avec succès une extension Firefox fonctionnelle utilisant Manifest V3. La transition de simples scripts de contenu vers des extensions complètes suit ce même modèle : contextes isolés, passage de messages et permissions minimales. Maîtrisez ces fondamentaux et vous créerez des extensions sécurisées et performantes en qui les utilisateurs ont confiance.
Pour développer vos compétences, explorez l’API Storage pour persister les préférences utilisateur, implémentez des service workers en arrière-plan pour la gestion d’événements complexes, et consultez la dernière documentation MDN WebExtensions pour les mises à jour d’API.
FAQ
Oui, les WebExtensions utilisant Manifest V3 sont largement compatibles entre navigateurs. Des différences mineures existent dans les espaces de noms d'API où Chrome utilise chrome et Firefox utilise browser, mais Firefox prend en charge les deux pour la compatibilité.
Le fichier manifest.json spécifie des motifs de correspondance dans la section content_scripts. Modifiez le tableau matches pour inclure d'autres domaines ou utilisez des motifs plus larges comme *://*/* pour tous les sites, bien que cela nécessite une attention particulière en matière de sécurité.
Empaquetez votre extension en fichier ZIP, créez un compte développeur sur addons.mozilla.org, soumettez votre extension pour révision et attendez l'approbation. Firefox examine généralement les extensions dans les 24 à 48 heures.
Les scripts de contenu s'exécutent dans les contextes de pages web et peuvent accéder et modifier les éléments DOM. Les scripts d'arrière-plan dans MV3 utilisent des service workers qui gèrent les événements et les appels d'API mais ne peuvent pas accéder directement au contenu de la page, nécessitant un passage de messages pour la communication.
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.
