Question

我在Firefox Web扩展中有一些html文件，我想在Browser Action事件上打开（单击工具栏图标）。我在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 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中，网址构建为moz-extension://[some GUID here]/，而不是chrome-extension://[extension ID here]。 GUID是不可预测的。

获取Firefox（和Chrome）网址的正确方法是使用chrome.runtime.getURL：

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

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

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

您还可以将相对网址传递给chrome.tabs.create：

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

请注意，使用相对URL时，请确保指定完整路径（从/开始）。这是因为Firefox和Chrome以不同方式解析相对URL。例如，如果您在子目录中的页面中运行脚本＆＃34; / 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 Web扩展内的html页面

1 个答案: