Options page

Une page Option vous permet de définir des préférences pour votre WebExtension que vos utilisateurs peuvent modifier. Les utilisateurs peuvent accéder à la page d'options de l'extension à partir du gestionnaire des add-ons 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.

Vous pouvez ouvrir la page en programmant en appelant runtime.openOptionsPage().

Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation eval(). Voir la politique de sécurité de contenu pour plus de détails.

Spécification de la page d'options

Pour créer une page d'options, écrivez un fichier HTML définissant la page. Cette page peut inclure des fichiers CSS et JavaScript, comme une page Web normale. Cette page, contine un exemple dans favourite-colour, comprend un fichier :

html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form>
      <label>Favourite colour</label>
      <input type="text" id="colour" />
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

JavaScript en cours d'exécution dans la page peut utiliser toutes les APIs des WebExtension auxquelles l'extension a des permissions. En particulier, vous pouvez utiliser l'API storage pour conserver les préférences.

Insérez les fichiers de la page dans votre extension.

Vous devez également inclure une clé options_ui dans votre fichier manifest.json, en lui donnant l'URL de la page.

json
"options_ui": {
  "page": "options.html",
  "browser_style": true
},

Note : Google Chrome et Opera utilisent chrome_style au lieu de browser_style, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

Voir la page options_ui pour les options de partage entre votre page d'options et les scripts d'arrière-plan ou de contenu.

Options de conception de contenu

Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le system de conception Photon et les styles de navigateur documentation.

Exemples

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :