Firefox Extensions: Adding Functionality to Existing Chrome XUL Elements

Question

I am trying to write an extension for Firefox. Just very simple. I looked through the tutorials that I found, and I have the base application "Hello, World".

What I would like to do is add an event listener to an existing element in browser Firefox DOM application (i.e. tabs). So far, all the resources that I could find show how to add a new element to the application and then add action to it using Javascript. I tried several ways to add a Javascript function (which I know works since I successfully added elements using the function) to existing elements.

My last attempt at this is structured as follows:

<?xml version="1.0"?> <!-- in myExtension.xul --> <overlay id="myExtension" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript"> var tabs = document.getElementsByTagName("tabbrowser-tab") var len = tabs.length; for (var i = 0; i < len; i++) { tabs[i].ondblclick = function() { alert('bam!'); } }; </script> </overlay> 

None of this works. As I said, I am completely new to this business, and I was a little inspired by the weekend project. Maybe there is some way to make sure that I am accessing a Chrome document, not a page document? Although, when I try to get page elements (that is, "p") using this technique, this also does not work, so it's probably a dead end.

[edit] To try to resolve some confusion:

By browser DOM, I mean elements that are part of the Chrome interface, not web page elements. I'm talking about placing an event listener specifically for an element that already exists as part of the user interface of a Firefox application, such as a tab (not the contents of the tab, but the tab itself) or, say, the Home button. I want to override the behavior of parts of the graphical interface of a Firefox application.

Say, for example, that I wanted to add a warning every time someone clicked the "New Tab" button or the "Close Tab" button. Or, if I wanted to redefine the Reload button to redirect the current tab to the domain root, and not just reload the page. These are all existing parts of Firefox, and I want to override them / overwrite them through an extension, in particular by adding a javascript action to them.

[/edit]

[sidenote] Is embedded JavaScript allowed in xul? Or should it be in a separate file? [/ Sidenote]

Anyone have any advice on this?

Answer 1

The javascript code in the overlay code does not work, because it works earlier than gbrowser contains any tabs.

In Firefox (or Thunderbird) extensions, you usually start the extension in the download event listener:

 window.addEventListener("load", pinfresh.init, false); 

Then, the init function should register event listeners for various tab events:

  pub.init = function() { var container = gBrowser.tabContainer; container.addEventListener("TabOpen", tabOpened, false); container.addEventListener("TabClose", tabRemoved, false); }; 

When a new tab is opened, we register another listener that activates the reload of the tab when the user double-clicks the tab:

  tabOpened = function(e) { var tab = e.target; tab.addEventListener("dblclick", tabDoubleClicked, false); } tabDoubleClicked = function(e) { gBrowser.reloadTab(e.target); } 

The full code is as follows:

 <overlay id="pinfresh" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript"> pinfresh = function() { var pub = {}; tabOpened = function(e) { var tab = e.target; tab.addEventListener("dblclick", tabDoubleClicked, false); } tabRemoved = function(e) { var tab = e.target; tab.removeEventListener("dblclick", tabDoubleClicked, false); } tabDoubleClicked = function(e) { gBrowser.reloadTab(e.target); } pub.init = function() { var container = gBrowser.tabContainer; container.addEventListener("TabOpen", tabOpened, false); container.addEventListener("TabClose", tabRemoved, false); }; return pub; }(); window.addEventListener("load", pinfresh.init, false); </script> </overlay> 

For snippets of code for working with tabs, I recommend the Tab Browser page in the Mozilla Development Center.

I recommend putting the Javascript code in your own file, and not including it in the XUL file. Errors in external Javascript files are displayed in the Firefox console, which simplifies debugging.

Answer 2

To get the page element of the currently viewed tab, you first need to get the document itself using gBrowser.selectedBrowser.contentDocument

So, if you have an element <p id='test'>blah</p> and you want to process it, you can do var p = gBrowser.selectedBrowser.contentDocument.getElementById('test'); and then do whatever you want with it.

Regarding "adding an event listener to an existing element in the browser DOM (for example, tabs)", I'm sorry, but I don’t understand what you want, you want to manipulate the browser graphical interface (for example, add a navigation bar button) or you want to control the contents of the DOM on a tab (i.e. a viewed site)? (basically a “browser” can mean a lot of things :)).