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

Question

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

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

Answer 1

打开标签页

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

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

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

感谢 BigBlutHat 提醒我这个选项。

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

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

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

解析相对URLs:
两者都Chrome and Firefox状态：

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

注意：对于所有不同的 chrome.* API 调用，Chrome 和 Firefox 并不总是以相同的方式解析相对 URL。例如，.

在每个浏览器中都是不同的

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

How to open a Firefox WebExtension options page as a tab, separate from about:addons

javascript

firefox

firefox-addon

firefox-addon-webextensions

打开标签页