打开位于 Firefox 网络扩展中的 html 页面

Question

我在 Firefox 网络扩展中有一些 html 文件，我想在浏览器操作事件（单击工具栏图标）上打开这些文件。我在 chrome 中的做法是：

var appId = chrome.app.getDetails().id;
var tabUrl = "chrome-extension://" + id + "/src/index.html";

chrome.windows.getCurrent(function (currentWindow) {
    chrome.tabs.create({
        url: tabUrl
    });
});

对于 firefox，我想做的是：

//firefox doesnt support chrome.app, so I have hard coded the app id in manifest under applications.gecko.id
var id = chrome.runtime.getManifest().applications.gecko.id;
var tabUrl = "moz-extension://" + id + "/src/index.html";
//I have tried chrome-extension:// also above

browser.tabs.create({
    url: tabUrl,
    active:true
});

它只是打开一个带有 url 的新选项卡，但页面未加载。关于我做错了什么的任何建议

Answer 1

在 Firefox 中，URL 被构造为 moz-extension://[some GUID here]/，而不是 chrome-extension://[extension ID here]。 GUID 不可预测。

为 Firefox（和 Chrome）获取 URL 的正确方法是使用 chrome.runtime.getURL:

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

另一种获得绝对 URL 的方法是（仅当代码在扩展页面的上下文中运行时，而不是在内容脚本中运行）：

chrome.tabs.create({
    url: location.origin + '/src/index.html')
});

你也可以传递一个亲戚URL给chrome.tabs.create:

chrome.tabs.create({
    url: '/src/index.html'
});

请注意，当您使用相对 URLs 时，请确保指定完整路径（以 / 开头）。这是因为 Firefox 和 Chrome 解析相对 URL 的方式不同。例如，如果您在附加组件的子目录“/html/”中的页面中有脚本运行，那么 Firefox 将解析相对于子目录的 URL，而Chrome 将解析相对于扩展根的 URL。所以：

// Running at moz-extension://[guid]/html/page.html
//     or at chrome-extension://[id]/html/page.html

chrome.tabs.create({url: 'newpage.html'});
// Firefox: Opens moz-extension://[guid]/html/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html

chrome.tabs.create({url: '/newpage.html'});
// Firefox: Opens moz-extension://[guid]/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html

打开位于 Firefox 网络扩展中的 html 页面

Open a html page located inside Firefox web extension

google-chrome

google-chrome-extension

firefox-addon-webextensions