Open a html page located inside Firefox web extension

Question

I have some html files inside a Firefox web extension which I want to open on Browser Action event (Click on the tool bar icon). The way I was doing it in chrome was:

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

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

What I am trying to do fir firefox is:

//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
});

Its just opening a new tab with the url but the page is not loading. Any suggestion on what I am doing wrong

See [chrome.runtime.getURL](https://developer.chrome.com/extensions/runtime#method-getURL). Also you don't need full URL in tabs.create. See the documentation. — wOxxOm, Jun 12 '17 at 08:16
Possible duplicate of [Show HTML file contained within the extension](https://stackoverflow.com/questions/40837213/show-html-file-contained-within-the-extension) — Makyen, Jun 12 '17 at 16:50

score 2 · Accepted Answer · answered Jun 12 '17 at 12:49

In Firefox the URL is constructed as moz-extension://[some GUID here]/, not chrome-extension://[extension ID here]. The GUID is not predictable.

The right way to get the URL for Firefox (and Chrome) is to use chrome.runtime.getURL:

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

Another method that works for getting an absolute URL is (only when the code runs in the context of your extension page, not in content scripts):

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

You can also pass a relative URL to chrome.tabs.create:

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

Note that when you use relative URLs, make sure that you specify the full path (starting with /). This is because Firefox and Chrome resolve relative URLs differently. For example, if you have a script running in a page in a subdirectory "/html/" in your add-on, then Firefox will resolve the URL relative to the subdirectory, whereas Chrome will resolve the URL relative to the extension root. So:

// 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

that solved my problem. I have one separate question though, how can I get the app GUID in firefox because `chrome.app.getDetails().id` doen't work in firefox. — BiJ, Jun 12 '17 at 18:09
@BiJ The GUID is only meaningful when it is part of the URL, and you can retrieve it via `new URL(chrome.runtime.getURL('')).host`. Knowing the GUID serves no purpose though. If you want to know the extension ID, just use `chrome.runtime.id`. — Rob W, Jun 12 '17 at 18:51

Open a html page located inside Firefox web extension

1 Answers1