Anatomie d'une WebExtension

Une WebExtension se compose de plusieurs fichiers, packagés pour la distribution et l'installation. Dans cet article, nous allons rapidement passer par les fichiers qui pourraient être présents dans une WebExtension.

Chaque WebExtension doit contenir un fichier appelé "manifest.json". Ce manifeste peut contenir des pointeurs vers plusieurs autres types de fichiers :

manifest.json

Il s'agit du seul fichier qui doit être présent dans chaque WebExtension. Il contient des métadonnées de base sur l'extension telles que son nom, sa version et les autorisations requises. Il fournit également des pointeurs vers d'autres fichiers dans l'extension.

Voir la page référence manifest.json pour tous les détails.

Background scripts

Les WebExtensions doivent souvent conserver un état à long terme ou effectuer des opérations à long terme indépendamment de la durée de vie d'une page Web ou d'une fenêtre de navigateur. C'est ce que les scripts d'arrière-plan font.

Les scripts en arrière-plan sont chargés dès que l'extension est chargée et restent chargés jusqu'à ce que l'extension soit désactivée ou désinstallée. Vous pouvez utiliser n'importe laquelle des WebExtension APIs dans le script, tant que vous avez demandé les permissions nécessaires.

Specifying background scripts

Vous pouvez inclure un script d'arrière-plan à l'aide de la clé de fond dans "manifest.json":

// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

Vous pouvez spécifier plusieurs scripts en arrière-plan: si vous le faites, ils s'exécutent dans le même contexte, tout comme plusieurs scripts chargés dans une seule page Web.

Background script environment

DOM APIs

Les scripts d'arrière-plan se lancent dans le contexte de pages spéciales appelées pages d'arrière-plan. Cela leur donne une window globale, avec toutes les API DOM standard qui fournit.

Vous n'avez pas à fournir votre page d'arrière-plan. Si vous incluez un script en arrière-plan, une page d'arrière-plan vide sera créée pour vous.

Toutefois, vous pouvez choisir de fournir votre page d'arrière-plan en tant que fichier HTML distinct:

// manifest.json

"background": {
  "page": "background-page.html"
}

WebExtension APIs

Les scripts d'arrière-plan peuvent utiliser l'une des APIs des WebExtensions dans le script, à condition que leur extension dispose des permissions nécessaires.

Cross-origin access

Les scripts d'arrière-plan peuvent faire des requêtes XHR à tous les hôtes pour lesquels ils ont des permissions d'hôte.

Actions du navigateur

Si votre extension définit une action du navigateur et que l'action du navigateur n'a pas de fenêtre contextuelle, vous pouvez écouter les événements de clic sur le bouton de l'action du navigateur en utilisant l'objet onClicked :

browser.browserAction.onClicked.addListener(handleClick);

Contenu Web

Les scripts d'arrière-plan n'obtiennent pas un accès direct aux pages Web. Toutefois,  ils peuvent charger des scripts de contenu dans les pages Web et peuvent communiquer avec ces scripts de contenu à l'aide d'une API de communication.

Politique de sécurité du contenu

Les scripts d'arrière-plan sont limités à certaines opérations potentiellement dangereuses, comme l'utilisation de eval(), par le biais d'une politique de sécurité du contenu. Pour plus de détails, consultez la politique de sécurité du contenu.

Scripts de contenu

Utilisez les scripts de contenu pour accéder et manipuler des pages Web. Les scripts de contenu sont chargés dans des pages Web et lancés dans le contexte de cette page particulière.

Les scripts de contenu sont des scripts fournis par les extensions qui s'exécutent dans le contexte d'une page Web; Cela diffère des scripts qui sont chargés par la page elle-même, y compris ceux qui sont fournis dans les éléments <script> dans la page.

Les scripts de contenu peuvent voir et manipuler le DOM de la page, tout comme les scripts normaux chargés par la page.

Contrairement aux scripts de pages normales, ils peuvent :

  • Effectuez des requêtes XHR entre domaines.
  • Utilisez un petit sous-ensemble de l'APIs des WebExtensions.
  • Échangez des messages avec leurs scripts d'arrière-plan et peuvent ainsi accéder indirectement à toutes les API des WebExtensions.

Les scripts de contenu ne peuvent pas directement accéder normalement aux scripts de page, mais peuvent échanger des messages avec eux à l'aide de l'API standard window.postMessage().

Habituellement, quand nous parlons de scripts de contenu, nous parlons de JavaScript, mais vous pouvez injecter CSS dans des pages Web en utilisant le même mécanisme.

Voir l'article de scripts de contenu pour en savoir plus.

Les actions du navigateur

Une action du navigateur est un bouton que vous pouvez ajouter à la barre d'outils du navigateur. Les utilisateurs peuvent cliquer sur le bouton pour interagir avec votre extension.

Vous pouvez éventuellement définir un popup pour le bouton en utilisant  HTML, CSS, et JavaScript.

Si vous ne définissez pas de popup, alors, lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que vous pouvez voir pour utiliser browserAction.onClicked:

browser.browserAction.onClicked.addListener(handleClick);

Si vous définissez un popup, l'événement de clic n'est pas envoyé: à la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur pourra interagir avec le popup et se fermera automatiquement lorsque l'utilisateur clique à l'extérieur.

En savoir plus sur les actions de navigateur.

Les actions de page

Les actions de la page sont comme les actions de navigateur dans la plupart des domaines, excepté pour :

  • Les actions du navigateur sont affichées tout le temps et sont pour des actions qui sont applicables plus ou moins tout le temps.
  • Les actions de page sont des actions qui n'ont de sens que sur certaines pages et sont affichées seulement lorsque ces onglets sont actifs.

Pour souligner que les actions de la page sont étroitement liées à des pages particulières, elles sont affichées dans la barre d'adresse plutôt que dans la barre d'outils :

En savoir plus sur les actions de page.

Les options de page

Les pages d'options vous permettent de définir des préférences pour votre WebExtension que vos utilisateurs peuvent modifier. Les utilisateurs peuvent accéder à la page d'options du gestionnaire des add-on du navigateur :

La façon dont les utilisateurs accèdent à la page et la manière dont elle est intégrée à l'interface utilisateur du navigateur, varient d'un navigateur à l'autre.

En savoir plus sur les options de pages.

Les ressources accessible Web

Les ressources accessible sur le Web sont des ressources telles que les images, le HTML, le CSS et le JavaScript que vous incluez dans l'extension et que vous souhaitez les rendre accessibles aux scripts de contenu et aux scripts de page. Les ressources qui sont accessibles pour le web, peuvent être référencées par des scripts de page et des scripts de contenu à l'aide d'un schéma URI spécial.

Par exemple, si un script de contenu souhaite insérer des images dans des pages Web, vous pouvez les inclure dans l'extension et les rendre accessibles sur le Web. Ensuite, le script de contenu peut créer et ajouter des balises img qui font référence aux images par l'attribut src.

 

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : hellosct1, Lamri
 Dernière mise à jour par : hellosct1,