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
|
---
title: web_accessible_resources
slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
tags:
- Add-ons
- Extensões
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%;">Tipo</th>
<td><code>Array</code></td>
</tr>
<tr>
<th scope="row">Obrigatório</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Exemplo</th>
<td>
<pre class="brush: json no-line-numbers">
"web_accessible_resources": [
"images/my-image.png"
]</pre>
</td>
</tr>
</tbody>
</table>
<h2 id="Descrição">Descrição</h2>
<p>As vezes, você precisa empacotar recursos — por exemplo, imagens, HTML, CSS ou Javascript — com a sua extensão e fazê-la acessível para as páginas web.</p>
<p>Por exemplo, a <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">extensão de exemplo Beastify</a> substitui uma página por uma imagem de um animal selecionado pelo usuário. As imagens foram empacotadas com a extensão. Para fazer visível a imagem selecionada, a extensão adiciona elementos <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> cujo atributo <code>src</code> aponta para a imagem do animal. Para que a página da web possa carregar as imagens, elas devem estar disponíveis na extensão.</p>
<p>With the <code>web_accessible_resources</code> key, you list all the packaged resources that you want to make available to web pages. You specify them as paths relative to the manifest.json file.</p>
<p>Note that content scripts don't need to be listed as web accessible resources.</p>
<p>If an extension wants to use {{WebExtAPIRef("webRequest")}} to redirect a public URL (e.g., HTTPS) to a page that's packaged in the extension, then the extension must list the page in the <code>web_accessible_resources</code> key.</p>
<h3 id="Using_web_accessible_resources">Using web_accessible_resources</h3>
<p>For example, suppose your extension includes an image file at images/my-image.png, like this:</p>
<pre class="no-line-numbers">my-extension-files/
manifest.json
my-background-script.js
images/
my-image.png</pre>
<p>To enable a web page to use an <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element whose <code>src</code> attribute points to this image, you would specify <code>web_accessible_resources</code> like this:</p>
<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre>
<p>The file is then available using a URL like:</p>
<pre class="no-line-numbers">moz-extension://<extension-UUID>/images/my-image.png"</pre>
<p><code><extension-UUID></code> is <strong>not</strong> your extension's ID. This ID is randomly generated for every browser instance. This prevents websites from fingerprinting a browser by examining the extensions it has installed.</p>
<div class="blockIndicator note">
<p>In Chrome, an extension's ID is fixed. When a resource is listed in <code>web_accessible_resources</code>, it is accessible as <code>chrome-extension://<your-extension-id>/<path/to/resource></code>. </p>
</div>
<p>The recommended approach to obtaining the URL of the resource is to use <code><a href="/en-US/Add-ons/WebExtensions/API/runtime/getURL">runtime.getURL</a></code> passing the path relative to manifest.json, for example:</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>This approach gives you have the correct URL regardless of the browser your extension is running on.</p>
<h3 id="Wildcards">Wildcards</h3>
<p><code>web_accessible_resources</code> entries can contain wildcards. For example, the following entry would also work to include the resource at "images/my-image.png":</p>
<pre class="brush: json no-line-numbers"> "web_accessible_resources": ["images/*.png"]</pre>
<h3 id="Security">Security</h3>
<p>Note that if you make a page web-accessible, any website may link or redirect to that page. The page should then treat any input (POST data, for examples) as if it came from an untrusted source, just as a normal web page should.</p>
<h2 id="Example">Example</h2>
<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre>
<p>Make the file at "images/my-image.png" web accessible.</p>
<h2 id="Browser_compatibility">Browser compatibility</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>
|
