blob: 6b38ccb5aa6924fc6ffcc66acf5da99604998ac0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
---
title: Options page
slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages
tags:
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages
---
<div>{{AddonSidebar}}</div>
<div>
<p>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:</p>
<p>{{EmbedYouTube("eODy24csH5M")}}</p>
<p>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.</p>
<p>Vous pouvez ouvrir la page en programmant en appelant <a href="/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage"><code>runtime.openOptionsPage()</code></a>.</p>
<p>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 <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. Voir la <a href="/fr/Add-ons/WebExtensions/Content_Security_Policy">politique de sécurité de contenu</a> pour plus de détails.</p>
<h2 id="Spécification_de_la_page_doptions">Spécification de la page d'options</h2>
<p>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 <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a>, comprend un fichier :</p>
<pre class="brush: 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></pre>
<p>JavaScript en cours d'exécution dans la page peut utiliser toutes les <a href="/fr/Add-ons/WebExtensions/API">APIs des WebExtension</a> auxquelles l'extension a des <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permissions</a>. En particulier, vous pouvez utiliser l'API <a href="/fr/Add-ons/WebExtensions/API/Storage"><code>storage</code></a> pour conserver les préférences.</p>
<p>Insérez les fichiers de la page dans votre extension.</p>
<p>Vous devez également inclure une clé <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> dans votre fichier manifest.json, en lui donnant l'URL de la page.</p>
<pre class="brush: json">"options_ui": {
"page": "options.html",
"browser_style": true
},</pre>
<div class="note">
<p><strong>Note:</strong> <strong>Google Chrome</strong> et <strong>Opera</strong> utilisent <code>chrome_style</code> au lieu de <code>browser_style</code>, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.</p>
</div>
<p>Voir la page <code><a href="/fr/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> pour les <strong>options de partage</strong> entre votre page d'options et les scripts d'arrière-plan ou de contenu.</p>
<h2 id="Options_de_conception_de_contenu">Options de conception de contenu</h2>
<p>Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le <a href="https://design.firefox.com/photon/index.html">system de conception Photon</a> et les <a href="/fr/Add-ons/WebExtensions/user_interface/Browser_styles">styles de navigateur</a> documentation.</p>
<h2 id="Exemples">Exemples</h2>
<p>Le depot <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> utilise les options de page</li>
</ul>
</div>
|
