Question

I have a simple addon that adds a button to toolbar.

I want this toolbar to open a tab that shows a local html page that uses javascript to fetch some urls, process data and then display things on screen based on that data. I want this to happen on usual browser tab, not some extension window.

I want the extension to be portable on multiple platforms (by using html file and javascript) so I want just to have a tab with the html page that accesses javascript file on the same directory.

I use this on my button that opens the tab:

var win = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
  .getInterface(Components.interfaces.nsIWebNavigation)
  .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
  .rootTreeItem
  .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
  .getInterface(Components.interfaces.nsIDOMWindow);

var tab = win.gBrowser.addTab();
win.gBrowser.selectedTab = tab;

What should I add after this to show a local, extension packaged (I have no idea where to package it) html page that will access a separate javascript file.

(this might be a very simple question but mozilla documentation is a gigantic mess with old information that doesn’t work.)

Answer 1

First of all, your fancy tricks with nsIInterfaceRequestor seem to be unnecessary – it’s a very complicated way of writing:

var win = window;

What you wrote there is necessary to get from a content page to the browser window – normal window.top won’t work because of a security boundary between content and chrome. But your button already is in the browser window.

Since you already have a button – you must be using an overlay meaning that you registered a chrome:// namespace. To open your page you can use loadOneTab method (this has the advantage that you don’t need to select the tab explicitly):

window.gBrowser.loadOneTab("chrome://myextension/content/page.html", {inBackground: false});

Of course you should change myextension here, it should be your chrome namespace. page.html should be put into the same directory where you have your overlay (typically chrome/content/). You can just use the regular script tag to load JavaScript files located in the same directory:

<script type="text/javascript" src="script.js"></script>