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
72
73
74
75
76
77
78
|
---
title: Extension pages
slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages
tags:
- Débutant
- User Interface
- WebExtensions
- interface utilisateur
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages
original_slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses
---
<div>{{AddonSidebar()}}</div>
<p>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.</p>
<p><img src="bundled_page_as_panel_small.png"></p>
<p>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, leur propre file d’attente d’événements JavaScript, leurs propres globales etc.</p>
<p>Pensez à la page d'arrière-plan comme une « page cachée d’extension ».</p>
<h2 id="Spécification_des_pages_d’extension">Spécification des pages d’extension</h2>
<p>Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.***</p>
<pre>/my-extension
/manifest.json
/my-page.html
/my-page.js</pre>
<h2 id="Affichage_des_pages_d’extension">Affichage des pages d’extension</h2>
<p>Il existe deux options pour afficher des pages d'extension : {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.</p>
<p>À l’aide de <code>windows.create()</code>, vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :</p>
<pre class="brush: js">var createData = {
type: "detached_panel",
url: "panel.html",
width: 250,
height: 100
};
var creating = browser.windows.create(createData);</pre>
<p>Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.</p>
<p>Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :</p>
<pre class="brush: js">document.getElementById("closeme").addEventListener("click", function(){
let winId = browser.windows.WINDOW_ID_CURRENT;
let removing = browser.windows.remove(winId);
});</pre>
<h2 id="Pages_d’extension_et_historique">Pages d’extension et historique</h2>
<p>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 {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur :</p>
<pre class="brush: js">function onVisited(historyItem) {
if (historyItem.url == browser.extension.getURL(myPage)) {
browser.history.deleteUrl({url: historyItem.url});
}
}
browser.history.onVisited.addListener(onVisited);</pre>
<p>Pour utiliser l’API historique, vous devez demander la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> « <code>history</code> » dans votre fichier <code><a href="/fr/Add-ons/WebExtensions/manifest.json">manifest.json</a></code>.</p>
<h2 id="Conception_des_pages_Web">Conception des pages Web</h2>
<p>Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le <a href="https://design.firefox.com/photon/index.html">système de conception Photon</a> et les <a href="/fr/Add-ons/WebExtensions/user_interface/Browser_styles">styles de navigateur</a>.</p>
<h2 id="Exemples">Exemples</h2>
<p>Le dépôt <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :</p>
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a> utilise les options pour créer une fenêtre</li>
</ul>
|
