web_accessible_resources

有时您希望将资源（例如图像、HTML、CSS 或 JavaScript）与您的扩展包捆绑在一起，并使它们可供网页和其他扩展使用。

例如，Beastify 示例扩展 将网页替换为用户选择的动物图像。动物图像与扩展捆绑在一起。为了使选定的图像可见，扩展会添加<img> 元素，其 src 属性指向动物的图像。为了使网页能够加载图像，必须使它们可供 Web 访问。

使用 web_accessible_resources 键，您可以列出要使网页可用的所有捆绑资源。您可以将它们指定为相对于 manifest.json 文件的路径。

请注意，内容脚本不需要被列为可供 Web 访问的资源。

如果扩展想要使用 webRequest 或 declarativeNetRequest 将公共 URL（例如 HTTPS）重定向到扩展中捆绑的页面，则扩展必须将该页面列在 web_accessible_resources 键中。

在清单 V2 中，可供 Web 访问的资源作为键下的数组添加，如下所示

"web_accessible_resources": [
  "images/my-image.png"
]

在清单 V3 中，web_accessible_resources 键是一个对象数组，如下所示

{
  // …
  "web_accessible_resources": [
    {
      "resources": ["test1.png", "test2.png"],
      "matches": ["https://web-accessible-resources-1.glitch.me/*"]
    },
    {
      "resources": ["test3.png", "test4.png"],
      "matches": ["https://web-accessible-resources-2.glitch.me/*"],
      "use_dynamic_url": true
    }
  ]
  // …
}

每个对象都必须包含一个 "resources" 属性，以及以下属性中的 "matches" 或 "extension_ids" 属性

假设您的扩展在 images/my-image.png 处包含一个图像文件，如下所示

my-extension-files/
    manifest.json
    my-background-script.js
    images/
        my-image.png

要使网页能够使用 src 属性指向该图像的 <img> 元素，您需要像这样指定 web_accessible_resources

"web_accessible_resources": ["images/my-image.png"]

然后可以使用类似以下的 URL 访问该文件

moz-extension://<extension-UUID>/images/my-image.png"

<extension-UUID> 不是您的扩展 ID。此 ID 是针对每个浏览器实例随机生成的。这可以防止网站通过检查已安装的扩展来对浏览器进行指纹识别。

获取资源 URL 的推荐方法是使用 runtime.getURL，传递相对于 manifest.json 的路径，例如

browser.runtime.getURL("images/my-image.png");
// something like:
// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png

这种方法无论您的扩展在哪个浏览器上运行都能提供正确的 URL。

web_accessible_resources 条目可以包含通配符。例如，以下条目也可以用于包含 "images/my-image.png" 处的资源

  "web_accessible_resources": ["images/*.png"]

如果使页面可供 Web 访问，任何网站都可以链接或重定向到该页面。然后，页面应将任何输入（例如 POST 数据）视为来自不可信来源，就像普通网页一样。

可供 Web 访问的扩展资源不受 CORS 或 CSP 的阻止。由于这种绕过安全检查的能力，扩展应尽可能避免使用可供 Web 访问的脚本。可供 Web 访问的扩展脚本可能会被恶意网站意外滥用，从而削弱其他网站的安全。通过避免在网页中注入 moz-extension:-URLs 以及确保第三方库是最新的，请遵循安全最佳实践。

"web_accessible_resources": ["images/my-image.png"]

使 "images/my-image.png" 处的文件可供任何网站和扩展访问 Web。

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "extension_ids": ["*"],
    "matches": [ "*://*/*" ]
  }
]

使 "images/my-image.png" 处的文件可供任何网站和扩展访问 Web。

建议仅在需要时指定 extension_ids 或 matches。例如，如果资源只需要可供 example.com 的网页访问

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "matches": [ "https://example.com/*" ]
  }
]

• beastify
• dnr-redirect-url