Knight Yoshi Knight Yoshi - 21 days ago 5
Javascript Question

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

So, I've looked through the WebExtensions API, but I haven't been able to figure out how to open an HTML page separate from

about:addons
for options. In the Add-on SDK you could have
resource://ext-id-/path/to/file.html
. I've tried making a directory web accessible and putting an HTML file in there, but that didn't seem to work.

Does anyone know how I can open the options HTML file in it's own tab with WebExtensions?

Answer

You can open a new tab with whatever URL from within your extension you desire using tabs.create and runtime.getURL . Specifically for options.html located in the same directory as your manifest.json, the following works:

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

You do not need the files to be declared as web accessible. The page runs in the background context so JavaScript is loaded by directly including the files in the src of a <script> tag (e.g. <script src="/options.js">). This is the same as you would do for a popup. This answer has an extension that uses the same HTML and JavaScript as both a popup and an options page. It does not, however, actually show opening that page as a tab, but it could be done with the above code.

Both Chrome and Firefox state:

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

Note: Chrome and Firefox do not always resolve relative URLs in the same way for all chrome.* API calls. For example, it is different in each browser for chrome.executeScript().