Firefox Extension -- Load page in menu bar?

Question

I am not sure if this is possible, partly because I have no clue what the terminology would be...

I want to create an extension that, among other things, will have a feature where, when the user clicks on the status bar icon a small window will slide out and inside that window will be a website login page. They would then login as normal, of course, and any cookies or authentications would be handled as usual.

I'm not sure what to Google to find the right overlay/chrome functions/namespaces. Also, I don't want to AJAX the source of the page, I want the actual page to load, straight from the server (for security reasons) BUT, I also want to intercept what the user see's ON the page (sort of greasemonkey style, I guess) so that only the form fields and head show up, not any of the "did you forget your password" and what not info. ALSO (and I'm sure if any of the above is possible, this should be as well), I want to intercept the server's response so that, after it does what it needs to do (which I don't want to mess with and probably can't without getting into trouble) the user sees something like "You did it!" in that same slide out window, rather than the server's usual output. (The server actually outputs a javascript alert which won't blend well in the extension and then redirects the user to a home page which I also don't want. But I'm pretty confident that if I can learn how to intercept the output I can just kill those bits.)

So I guess the question(s) are: Is there a way to :

1. Have a NON-MENU window slide out onclick,
2. Load a live web page in that window, and
3. Mod the live page's output while still having it be on the site?

The login page is encrypted and the login/password is considered pretty top secret, so I have to respect security as much as possible and not try much simpler techniques like ajax or cookie-moding.

thanks!

Answer 1

For #1, look for the code which shows "Should Firefox remember this password?"

I'm not sure about #2, but since the main HTML window in Firefox is XUL, too, I don't see why that shouldn't be possible.

Number 3 is a bit tricky. First of all, web sites change all the time, so how do you plan to know which part to filter out? There is no problem to change the DOM as the page loads (look at Greasemonkey for an example, it does just that).

Answer 2

This is an example:

First create a xul overlay (login.xul) that contains an iframe element that will display your Login page:

<?xml version="1.0"?>
<overlay id="login-window-vb" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;

    <window id="main-window">
       <vbox>
         <iframe id="login-frame" src="http://yoursite.com/custom-login" style="display:none;">

        </iframe>
       </vbox>
    </window>

</overlay>

Note that I set the display style to "none" so that we can display the iframe only when the user click the Login icon from the status bar.

then register this overlay in your manifest file:

content     yourextension    chrome/content/
overlay chrome://browser/content/browser.xul chrome://yourextension/content/login.xul

then add another overlay that will display the login icon in the status bar:

    <?xml version="1.0"?>
    <overlay id="login-status" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;

<script type="application/x-javascript">
function ShowLogin() {
// get the login iframe and display it
var loginBox = document.getElementById('login-frame');
loginBox.style.display = "";
loginBox.height = "200px";
}
</script>

    <statusbar id="status-bar">
        <statusbarpanel id="login-icon" image="" label="Login" oncommand="ShowLoginBox()" />
    </statusbar>

    </overlay>

and register this overlay the same way you did for the previous one.

Now the iframe will disply your login page from the server and it will register the cookie .And I think any Greasmonkey script will reach this iframe too.