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

Question

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

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

Answer 1

打开标签页

选项页面始终位于选项卡中:
如果希望选项页面始终在选项卡中打开,则可以在manifest.json中为该键添加open_in_tab值为key 的属性:trueoptions_ui

"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')
});

不需要Web访问并加载JavaScript:
您不需要将文件声明为Web可访问.该网页在后台上下文,以便JavaScript是通过直接包括在文件加载运行src一个的<script>标签(例如<script src="/options.js">).这与弹出窗口相同. 此答案的扩展使用与弹出窗口和选项页面相同的HTML和JavaScript.但是,它实际上并没有将该页面作为选项卡打开,但可以使用上面的代码完成.

解决相对URL:
两个镀铬和Firefox的状态:

相对URL将相对于扩展中的当前页面.

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