blob: 713741a26b0aba587cea8eecc071d4ddd453bf4d (
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
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
|
---
title: web_accessible_resources
slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
tags:
- 扩展应用
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%;">类型</th>
<td><code>Array</code></td>
</tr>
<tr>
<th scope="row">是否必需</th>
<td>No</td>
</tr>
<tr>
<th scope="row">示例</th>
<td>
<pre class="brush: json no-line-numbers">
"web_accessible_resources": [
"images/my-image.png"
]</pre>
</td>
</tr>
</tbody>
</table>
<h2 id="描述">描述</h2>
<p>你有时想将资源（如图片、HTML、CSS 或 JavaScript）与你的扩展应用合并打包，让网页能够访问它们。</p>
<p>举个例子，<a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">Beastify example extension</a> 将用户选择的野兽图片来替换网页，这些图片与应用是经过合并打包的。该应用添加 <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code>，其 <code>src</code> 指向图片，这样就使选中的图片可见了。网页要载入图片的话，这些图片就必须可经访问。</p>
<p>通过 <code>web_accessible_resources</code>， 你列出资源，让它们可经网页访问。这些资源路径相对于 manifest.json 文件.</p>
<p>注意，这其中不必包括 content scripts。</p>
<p>如果你的应用要用 {{WebExtAPIRef("webRequest")}} 来重定向公共 URL(如 HTTPS) 到一个该应用中的页面, 那么应用必须将该页面列入<code>web_accessible_resources</code>。</p>
<h3 id="使用_web_accessible_resources">使用 web_accessible_resources</h3>
<p>例如，如果你的应用含有图片，路径为 images/my-image.png，如下所示：</p>
<pre class="no-line-numbers">my-extension-files/
manifest.json
my-background-script.js
images/
my-image.png</pre>
<p>如果要使网页能够从元素 <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> 的属性 <code>src</code> 指向该图片，你得写明<code>web_accessible_resources</code>，如下所示：</p>
<pre class="brush: json no-line-numbers">"web_accessible_resources": ["images/my-image.png"]</pre>
<p>之后，图片可通过 URL 来访问，如下所示：</p>
<pre class="no-line-numbers">moz-extension://<extension-UUID>/images/my-image.png"</pre>
<p><code><extension-UUID></code> 不是应用 ID，它随机生成，对应每个浏览器实例，以防网页查看浏览器安装的扩展应用来获取信息。</p>
<div class="blockIndicator note">
<p>Chrome 的 <code><extension-UUID></code> 是不变的。某资源如果由<code>web_accessible_resources</code> 写明，那么它可通过 <code>chrome-extension://<your-extension-id>/<path/to/resource></code> 来访问。 </p>
</div>
<p>要获得资源的 URL，推荐用 <code><a href="/en-US/Add-ons/WebExtensions/API/runtime/getURL">runtime.getURL</a></code> 向参数传递 manifest.json 的相对路径，比如：</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>这会返回正确的 URL，不受应用运行的浏览器影响。</p>
<h3 id="通配符">通配符</h3>
<p><code>web_accessible_resources</code> 中的条目还可以有通配符。比如，下面的条目匹配“images/my-image.png”：</p>
<pre class="brush: json no-line-numbers"> "web_accessible_resources": ["images/*.png"]</pre>
<h3 id="安全">安全</h3>
<p>注意，如果你部署了一个页面，那么任一网页可能会链接或重定向至该页面，因而它应认为任意输入（比如 POST data）的来源不可信任，这与通常网页的做法一样。</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>
|
