如何将 Firefox WebExtension 选项页面作为选项卡打开，与 about:addons 分开

Question

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

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

Answer 1

打开标签

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

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

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

感谢BigBlutHat 提醒我这个选项。

当您的选项页面通常位于about:addons 内时，在标签中：
您可以使用 tabs.create 和 runtime.getURL 在扩展程序中打开一个新选项卡，其中包含您想要的任何 URL，包括您的选项页面。特别是对于与您的 manifest.json 位于同一目录中的 options.html 文件，以下工作：

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

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

解析相对 URL：
Chrome 和 Firefox 状态：

相对 URL 将相对于扩展程序中的当前页面。

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