initial commit

1 files changed, 96 insertions, 0 deletions

diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html
new file mode 100644
index 0000000000..713741a26b
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html
@@ -0,0 +1,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">&lt;img&gt;</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">&lt;img&gt;</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://&lt;extension-UUID&gt;/images/my-image.png"</pre>
+
+<p><code>&lt;extension-UUID&gt;</code> 不是应用 ID，它随机生成，对应每个浏览器实例，以防网页查看浏览器安装的扩展应用来获取信息。</p>
+
+<div class="blockIndicator note">
+<p>Chrome 的 <code>&lt;extension-UUID&gt;</code> 是不变的。某资源如果由<code>web_accessible_resources</code> 写明，那么它可通过 <code>chrome-extension://&lt;your-extension-id&gt;/&lt;path/to/resource&gt;</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>