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

Question

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?

Nitwit

developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/… – Haerle

That doesn't talk about opening a page from the extension in the tab. The options.html page inside the extension is what I want to open in a tab. – Nitwit

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

Thanks for that, missed that one little line. :p – Nitwit

Answer 1

Opening a tab

Options page always in a tab:
If you want your options page to always open in a tab, you can add the property open_in_tab with a value of true to the options_ui key in your manifest.json:

"options_ui" : {
  "page": "options.html",
  "open_in_tab":true
}

This will result in your options page always opening in a tab. Both clicking on your extension's "Options" from within about:addons and using runtime.openOptionsPage() will result in your options page opening in a tab.

Thanks to BigBlutHat for reminding me of this option.

In a tab when normally your options page is within about:addons:
You can open a new tab with whatever URL from within your extension you desire, including your options page, using tabs.create and runtime.getURL. Specifically for an options.html file located in the same directory as your manifest.json, the following works:

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

Does not need to be web accessible and loading JavaScript:
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.

Resolving Relative URLs:
Both Chrome and Firefox state:

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

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

Embus

Quick question. How can I get a content script to run on it. Specifying moz-extension://... in the matches array causes the extension to be invalid. Trying to set the scripts to be web-accessible and calling it inside of <script> tags also doesn't work. – Nitwit

@KnightYoshi, The page is not loaded in the content context. It is in the background page context. Thus, scripts are included directly as paths (not moz-extension://, but just /options.js) similar to what you would do with a popup page. This answer includes a page that is used as both an options page and a popup. – Embus

Thanks again! I'm quite new to the WebExtensions API, it's quite different than the SDK version. – Nitwit

@KnightYoshi, I'm glad I am able to help. Something I noticed I did not address from your question: You do not need to declare the resources as web accessible. I have added the info from my comments to the Answer. – Embus

There's also the openOptionsPage() method: developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/… It is somewhat less widely supported (at present), but nice and clear about what it does. – Responser

@BigBlueHat, Yes, that is the normal method of opening an options page. However, the question was specifically about how to open an options page in a tab, "separate from about:addons". openOptionsPage() opens the options page within about:options. Thus, it was specifically not what the OP was looking for as an answer to this question. – Embus

@Embus I've used the openOptionsPage() method with a brower_action click event setup in a background script and it opens in a new tab completely outside of the about:options space--which is why I mentioned it. – Responser

@BigBlueHat, Interesting. I have used openOptionsPage() before, and just tested it again prior to posting my earlier comment. In all my use/testing, while it does open a new tab, that tab is to the extension's options page within about:addons (multiple versions of Firefox tested, just now). Please describe in more detail exactly what you did to get it to open outside of about:addons. – Embus

It uses the open_in_tab options inside the options object in the manifest: developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/… – Responser

@BigBlueHat, Strange, I thought I had tested that previously (some time ago, don't remember which version) and not had it work. Thanks for pointing out that it is working. – Embus

@BigBlueHat, I updated the Answer with that information. Thanks again for reminding me about it. – Embus

Thanks for the shout-out in the updated answer @Makyen! :) Glad it was helpful info. – Responser