7

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?

Makyen
  • 31,849
  • 12
  • 86
  • 121
Knight Yoshi
  • 924
  • 3
  • 11
  • 32

1 Answers1

11

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().

Community
  • 1
  • 1
Makyen
  • 31,849
  • 12
  • 86
  • 121
  • 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 – Knight Yoshi Nov 15 '16 at 16:29
  • @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](http://stackoverflow.com/a/39236352/3773011) includes a page that is used as both an options page and a popup. – Makyen Nov 15 '16 at 16:55
  • Thanks again! I'm quite new to the WebExtensions API, it's quite different than the SDK version. – Knight Yoshi Nov 15 '16 at 17:10
  • @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. – Makyen Nov 15 '16 at 17:39
  • 1
    There's also the `openOptionsPage()` method: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/openOptionsPage It is somewhat less widely supported (at present), but nice and clear about what it does. – BigBlueHat Nov 16 '16 at 15:23
  • @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. – Makyen Nov 16 '16 at 15:50
  • @Makyen 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. – BigBlueHat Nov 16 '16 at 15:53
  • @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`. – Makyen Nov 16 '16 at 16:06
  • It uses the `open_in_tab` options inside the `options` object in the manifest: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui#Syntax – BigBlueHat Nov 16 '16 at 16:13
  • @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. – Makyen Nov 16 '16 at 16:31
  • @BigBlueHat, I updated the Answer with that information. Thanks again for reminding me about it. – Makyen Nov 16 '16 at 16:45
  • Thanks for the shout-out in the updated answer @Makyen! :) Glad it was helpful info. – BigBlueHat Nov 16 '16 at 19:08