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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: web_accessible_resources
slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
tags:
- Add-ons
- Extensions
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
---
<p>{{AddonSidebar}}</p>
<table class="fullwidth-table standard-table">
<tbody>
<tr>
<th scope="row" style="width: 30%;">Type</th>
<td><code>Tableau</code></td>
</tr>
<tr>
<th scope="row">Obligatoire</th>
<td>Non</td>
</tr>
<tr>
<th scope="row">Exemple</th>
<td>
<pre class="brush: json no-line-numbers">
"web_accessible_resources": [
"images/my-image.png"
]</pre>
</td>
</tr>
</tbody>
</table>
<h2 id="Description">Description</h2>
<p>Parfois, vous souhaitez associer certaines ressources - par exemple, images, HTML, CSS ou JavaScript - avec votre extension pour les mettre à la disposition des pages Web.</p>
<p>Par exemple, l'<a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">extensions d'exemple "beastify"</a> remplace une page web par une image d'une bête sélectionnée par l'utilisateur. Les images de la bête sont emballées avec l'extension. Pour rendre visible l'image sélectionnée, l'extension ajoute <code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/img"><img></a></code> des éléments dont l'attribut <code>src</code> pointe sur l'image de la bête. Pour que la page Web puisse charger les images, elles doivent être rendues accessibles sur le Web.</p>
<p>Avec la clé <code>web_accessible_resources</code> liste toutes les ressources packagées que vous souhaitez mettre à la disposition des pages Web. Vous les spécifiez comme chemins relatifs dans le fichier manifest.json.</p>
<p>Notez que les scripts de contenu n'ont pas besoin d'être listés comme ressources accessibles sur le Web.</p>
<p>Si une extension veut utiliser {{WebExtAPIRef("webRequest")}}} pour rediriger une URL publique (par exemple, HTTPS) vers une page qui est packagée dans l'extension, alors l'extension doit lister la page dans la clé <code>web_accessible_resources</code>.</p>
<h3 id="Utiliser_web_accessible_resources">Utiliser web_accessible_resources</h3>
<p>Par exemple, supposons que votre extension inclut un fichier image sur images images/my-image.png, comme ceci :</p>
<pre class="no-line-numbers">my-extension-files/
manifest.json
my-background-script.js
images/
my-image.png</pre>
<p>Pour permettre à une page Web d'utiliser un élément <code><a href="/fr/docs/Web/HTML/Element/img"><img></a></code> dont l'attribut <code>src</code> pointe sur cette image, vous pouvez spécifier "web_accessible_resources" comme suit :</p>
<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre>
<p>Le fichier sera alors disponible en utilisant une URL comme :</p>
<pre class="no-line-numbers">moz-extension://<extension-UUID>/images/my-image.png"</pre>
<p><code><extension-UUID></code> n'est <strong>pas</strong> l'identifiant de votre extension. Il est généré de manière aléatoire pour chaque instance de navigateur. Ceci empêche les sites Web de prendre les empreintes digitales d'un navigateur en examinant les extensions qu'il a installées.</p>
<div class="blockIndicator note">
<p>Dans Chrome, l'ID d'une extension est fixe. Quand une ressource est listée dans <code>web_accessible_resources</code>, elle est accessible comme <code>chrome-extension://<your-extension-id>/<path/to/resource></code>. </p>
</div>
<p>L'approche recommandée pour obtenir l'URL de la ressource est d'utiliser <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/getURL">runtime.getURL</a></code> en passant le chemin relatif à manifest.json, par exemple :</p>
<pre class="brush: js no-line-numbers">browser.runtime.getURL("images/my-image.png");
// something like:
// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png</pre>
<p>Cette approche vous donne l'URL correcte quel que soit le navigateur sur lequel votre extension est lancée.</p>
<h3 id="Caractères_génériques">Caractères génériques</h3>
<p><code>web_accessible_resources</code> peuvent contenir des caractères génériques. Par exemple, l'entrée suivante fonctionnera également pour inclure la ressource à "images/my-image.png":</p>
<pre class="brush: json no-line-numbers"> "web_accessible_resources": ["images/*.png"]</pre>
<h3 id="Sécurité">Sécurité</h3>
<p>Notez que si vous créez une page accessible sur le Web, n'importe quel site Web peut alors lier ou rediriger vers cette page. La page doit ensuite traiter toute entrée (données POST, par exemple) comme si elle provenait d'une source non fiable, tout comme une page Web normale.</p>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre>
<p>Crée un fichier dans "images/my-image.png" accessible sur le web.</p>
<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("webextensions.manifest.web_accessible_resources")}}</p>
|
