如何打开浏览器扩展中包含的 html 文件？答案

【问题标题】：How do I open an html file included in my browser extension?如何打开浏览器扩展中包含的 html 文件？
【发布时间】：2021-08-19 02:22:46
【问题描述】：

我在打开一个包含在我的扩展程序中的简单 html 文件时遇到了一些奇怪的问题。例如，我可以使用 browserAction 打开 HTML 页面，但其他任何操作都不起作用。

我尝试将其设置为选项 ui

"options_ui": {
    "page": "form.html",
    "open_in_tab": true,
    "browser_style": true,
    "chrome_style": true
  },

然后我尝试运行runtime.openOptionsPage()，但出现错误

openOptionsPage() is not a function

好的，接下来我尝试使用window.open 打开一个新标签

window.open(addon.extension.getURL('form.html'))

它会打开一个标签，但很遗憾我收到文件被阻止的消息

iheelllncchdclcmfojmeajmcdolpjdf is blocked
Requests to the server have been blocked by an extension. Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT

我现在没有主意了。我真的找不到任何关于我执行此操作所需的任何特定权限的信息。似乎没有人遇到过“不是函数”错误，这可能是这一切中最奇怪的事情。

有人知道我可以做些什么来实现这一目标吗？

【问题讨论】：

标签： javascript google-chrome options

【解决方案1】：

引用：https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/

Web 可访问资源是扩展程序内的文件，可以通过网页或其他扩展程序访问。 [...]

默认情况下，没有任何资源可通过网络访问；只有从扩展程序源加载的页面或脚本才能访问该扩展程序的资源。扩展作者可以使用 web_accessible_resources 清单属性来声明公开哪些资源以及哪些来源。

这些资源可通过 URL chrome-extension://[PACKAGE ID]/[PATH] 在网页中使用，可以使用 runtime.getURL 方法生成。资源使用适当的 CORS 标头提供，因此可通过 XHR 等机制获得。

除非资源被列为网络可访问，否则从网络源到扩展资源的导航将被阻止。

假设您的扩展程序正在添加指向扩展程序本身的链接，那么您必须在清单中明确添加以下策略：

{
  "version": "1.0",
  "manifest_version": 3,
  "web_accessible_resources": [
    {
      "resources": [
        "form.html"
      ],
      "matches": [
        "https://*/*" // ...probably more strict than this
      ]
    }
  ],
  // ... rest of manifest
}

【讨论】：