javascript - 如何将 Firefox WebExtension 选项页面作为选项卡打开，与大约 :addons 分开

Question

所以，我查看了 WebExtensions API，但我一直无法弄清楚如何打开与 about:addons 分开的 HTML 页面以获取选项。在附加 SDK 中，您可以拥有 resource://ext-id-/path/to/file.html。我试过制作一个可通过网络访问的目录并在其中放置一个 HTML 文件，但这似乎不起作用。

有谁知道如何使用 WebExtensions 在它自己的选项卡中打开选项 HTML 文件？

Answer 1

打开标签页

选项页面总是在标签中:
如果您希望您的选项页面始终在选项卡中打开，您可以添加属性 open_in_tab值为 true到 options_ui在您的 manifest.json 中键入:

"options_ui" : {
  "page": "options.html",
  "open_in_tab":true
}

这将导致您的选项页面始终在选项卡中打开。两者都从 about:addons 中单击您的扩展程序的“选项”并使用 runtime.openOptionsPage() 将导致您的选项页面在选项卡中打开。

感谢BigBlutHat提醒我这个选项。

在选项卡中，通常您的选项页面在 about:addons 内:
您可以使用您想要的扩展程序中的任何 URL 打开一个新选项卡，包括您的选项页面，使用 tabs.create 和 runtime.getURL .专为 options.html文件位于与您的 manifest.json 相同的目录中，以下工作:

chrome.tabs.create({
    url: chrome.runtime.getURL('/options.html')
});

不需要网络访问和加载 JavaScript:
您不需要将文件声明为可通过网络访问。该页面在后台上下文中运行，因此通过直接包含 src 中的文件来加载 JavaScript的 <script>标签(例如 <script src="/options.js"> )。这与您对弹出窗口所做的相同。 This answer有一个扩展，使用相同的 HTML 和 JavaScript 作为弹出页面和选项页面。但是，它实际上并没有显示以选项卡形式打开该页面，但可以使用上述代码完成。

解析相对 URL:
两者 Chrome和 Firefox状态:

Relative URLs will be relative to the current page within the extension.

注意:对于所有不同的chrome.* API 调用、Chrome 和 Firefox 并不总是以相同的方式解析相对 URL。例如， chrome.executeScript() 在每个浏览器中都是不同的.