Vous pouvez inclure des pages HTML dans votre extension sous la forme de  formulaires, d'aide ou tout autre contenu dont votre extension a besoin.

Example of a simple bundled page displayed as a detached panel.

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d'arrière-plan de votre extension, mais elles sont dans leur propre onglet et elles ont leur propre file d'attente d'événements JavaScript, leurs propres globes, etc..

Comparé à la page d'arrière-plan, considérez la page d'arrière-plan comme la "page d'extension cachée".

Spécification des pages d'extensions

Vous pouvez inclure des fichiers HTML, et associés des fichiers CSS ou JavaScript, dans votre WebExtension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous-dossiers.

/my-extension
    /manifest.json
    /my-page.html
    /my-page.js

Affichage des pages d'extension

Il existe deux options pour afficher des pages d'extenion :  windows.create() et tabs.create().

A l'aide windows.create(), par exemple, vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l'interface utilisateur UI de la barre d'adresse, la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue:

var createData = {
  type: "detached_panel",
  url: "panel.html",
  width: 250,
  height: 100
};
var creating = browser.windows.create(createData);

Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programmation, par exemple, après que l'utilisateur clique sur un bouton, en passant l'ID de la fenêtre actuelle à windows.remove():

document.getElementById("closeme").addEventListener("click", function(){
  var winId = browser.windows.WINDOW_ID_CURRENT;
  var removing = browser.windows.remove(winId);
}); 

Pages d'extenion et historique

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l'historique de l'utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez, utilisez history.deleteUrl() pour supprimer l'enregistrement du navigateur :

function onVisited(historyItem) {
  if (historyItem.url == browser.extension.getURL(myPage)) {
    browser.history.deleteUrl({url: historyItem.url});
  }
}

browser.history.onVisited.addListener(onVisited);

Pour utiliser l'API historique, vous devez demander la permission "history" dans votre fichier manifest.json.

Conception des pages Web

Pour plus de détails sur la façon de concevoir vos pages Web pour qu'elles correspondent au style de Firefox, voir la documentation sur le systeme de conception Photon et les styles de navigateur.

Exemples

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

Étiquettes et contributeurs liés au document

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