Auth redirect - opening a local HTML document in a new tab in a Firefox extension

Question

I am currently trying to port a Chrome extension to Firefox.

The Chrome extension has a "Login" page, which is opened in a new tab as an HTML document. The HTML document is stored in the local directory with other extension files. The user inputs a URL which should represent a server running our application, where the user will be asked to login. After a successful login, the user is redirected back to the options.html page, which is updated to show the user's preferences.

I would like to duplicate this in the Firefox extension, i.e. I would love to avoid writing anything in XUL to build an options page.

I tried opening a new tab with my HTML page like this:

var url = "chrome://myextension/content/options.html";
        var win = Components.classes['@mozilla.org/appshell/window-mediator;1']
                    .getService(Components.interfaces.nsIWindowMediator)
                    .getMostRecentWindow('navigator:browser');
        win.gBrowser.selectedTab = win.gBrowser.addTab(url);

But I don't like this for a few reasons: 1) The navbar in the new tab displays the "chrome:// ..." URL, and 2) it breaks the authentication process. The authentication is done using an OAuth type system, and the current URL is passed into the API so that the user can be redirected back upon successful authentication. The authentication fails with "chrome://" as part of the URL.

Just out of curiosity, I tried hardcoding the URL like this:

http://myextension/content/options.html

And the user is actually successfully authenticated, but then the redirect obviously fails afterward.

The Chrome extension seems to work with no problems or weird hacks. From what I can tell, opening it works like this:

chrome.tabs.create({"url":chrome.extension.getURL("options.html"), "selected":true});

And referencing the URL of the tab later so we can be redirected back to it just works like this:

var options_url = chrome.extension.getURL('options.html');

So, I'm wondering: what is the best way to open a local HTML document in a new tab with a Firefox extension, without using the "chrome://" "protocol"? Is there a similar way to how it can be done with Google Chrome extensions?

UPDATE 23/5/12

So this article says that chrome:// URLs are not accessible from the web, only locally.

http://adblockplus.org/blog/web-pages-accessing-chrome-is-forbidden

I think this could be the reason why my authentication was failing. I'm definitely looking for a way for my extension to display a local HTML file in a window or tab without using chrome://.

UPDATE 07/6/12

Here is my (hopefully temporary) solution:

The user enters the URL of the server running our application. He/she is redirected to the application login page, but instead of passing "chrome://myextension/content/options.html" as the URL to be redirected back to after authentication, I pass a phony URL, i.e. "http://myextension/thisis/madeup.html".

In my extension's overlay.js, I set up an HTTP request listener which listens for the phony URL being requested. When a GET happens for the phony URL, I cancel the request, and open the real, locally stored page at "chrome://myextension/content/options.html".

See the following references:

https://developer.mozilla.org/en/XPCOM_Interface_Reference/nsIObserver https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads#HTTP_Observers

I think you cannot avout that "chrome://", since even the built-in stuff like downloads list and extensions list shows this. — Rodrigo

Bryan Clark Bryan Clark · Accepted Answer · 2012-07-18T00:32:43

If you're trying to do this redirect for an OAuth call you should try using OAuthorizer from Mozilla instead of doing the redirect work yourself. Hope that helps!

Auth redirect - opening a local HTML document in a new tab in a Firefox extension

1 Answers