Comment créer un module complémentaire Firefox

Ce tutoriel vous guide dans la construction d'un module complémentaire Firefox qui permet aux utilisateurs de définir des alarmes personnalisées avec du texte personnalisé. Aucune expérience préalable avec les modules complémentaires ou les extensions de navigateur de Firefox n'est nécessaire; Les connaissances de base JavaScript suffit. Le code complet est disponible sur GitHub [lien de référentiel GitHub (non fourni)], et le module complémentaire fini est publié [lien complémentaire publié (non fourni)].

Concepts clés:

• manifest.json Configuration: Ce fichier essentiel définit le nom, la version, la description et les icônes de votre module complémentaire. Manifeste V2 est actuellement nécessaire pour Firefox.
• Implémentation popup (popup.html): Crée une interface utilisateur affichée lorsque l'icône complémentaire est cliquée.
• API de stockage: Utilisez le stockage local pour les données spécifiques au navigateur et le stockage de synchronisation pour les données accessibles sur les périphériques et les sessions.
• Page d'options (options.html): Fournit une interface de paramètres personnalisable, permettant aux utilisateurs de gérer les alarmes.
• ALARMS API: planifie et gère les alarmes qui déclenchent des notifications.
• Gestion de la notification: Envoie des notifications à l'aide de l'API de notifications.
• Délétion d'alarme: implémente la fonctionnalité pour supprimer les alarmes du stockage et annuler les notifications planifiées.
• Mozilla Developer Hub Publication: Prépare votre module complémentaire pour la soumission, en veillant à ce que le manifest.json soit correctement configuré.

Création du module complémentaire:

1. manifest.json Création: Commencez par créer un fichier manifest.json avec les informations minimales suivantes: name, version, manifest_version, description et icons (avec Chemins vers vos actifs d'icônes).

   {
     "name": "personalized-alarms",
     "version": "0.0.1",
     "description": "Create personalized alarms",
     "manifest_version": 2,
     "icons": {
       "16": "assets/images/icon16.png",
       "32": "assets/images/icon32.png",
       "48": "assets/images/icon48.png",
       "128": "assets/images/icon128.png"
     }
   }

2. Chargement dans Firefox: Utilisez le gestionnaire complémentaire de Firefox (accessible via ctrl shift A) pour charger le module complémentaire en mode de débogage. Cela permet de tester et de déboguer avant la publication.

   

3. Création popup (popup.html): Concevez un fichier html contextuel pour afficher les alarmes à venir et un lien vers la page des options. Inclure les liens CSS et JavaScript nécessaires.

4. Intégration de stockage: Ajoutez l'autorisation "storage" à manifest.json pour activer la persistance des données. Utilisez browser.storage.sync.get et browser.storage.sync.set pour récupérer et enregistrer les données d'alarme. N'oubliez pas d'inclure un identifiant de module complémentaire unique dans "browser_specific_settings" pour les tests locaux (supprimer avant la publication).

5. Page d'options (options.html): Créez une page d'options pour permettre aux utilisateurs de créer de nouvelles alarmes. Utilisez un formulaire pour collecter les détails de l'alarme (nom et heure). Utilisez browser.storage.sync.set pour enregistrer de nouvelles alarmes.

6. Notifications de planification (API Alarmes): Utilisez browser.alarms.create dans JavaScript de votre page d'options pour planifier des alarmes en fonction de l'entrée utilisateur. Définissez la propriété when pour l'heure de déclenchement de l'alarme.

7. script d'arrière-plan (background.js): Créez un script d'arrière-plan pour écouter les événements d'alarme à l'aide de browser.alarms.onAlarm.addListener. Lorsqu'une alarme se déclenche, envoyez une notification à l'aide de browser.notifications.create. Ajoutez des autorisations "alarms" et "notifications" à manifest.json.

8. Délétion de la notification: Ajouter des fonctionnalités pour supprimer les alarmes du stockage et les annuler en utilisant browser.alarms.clear.

9. Publication: Supprimer "browser_specific_settings" de manifest.json avant de soumettre votre module complémentaire à la hub du développeur Mozilla.

Le tutoriel détaille ensuite le processus de publication du complément au site Web de Mozilla, y compris les étapes de mise à jour du module complémentaire après publication. Enfin, il fournit des instructions sur l'adaptation du module complémentaire pour la compatibilité avec Chrome. Les FAQ fournies couvrent les questions courantes sur le développement complémentaire de Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!