How to overlay an XUL file from another extension in a bootstrapped add-on (or otherwise modify the DOM of the XUL file)?

2
votes

I want to add some DOM elements to another extension's XUL file.

That extension allows itself to be "opened" by clicking on a toolbar button that it adds to Firefox. Clicking on this button opens a new tab with the chrome address of an XUL file that is part of the extension.

I have already created some DOM elements dynamically and added them to elements on the Firefox window (e.g. the previously mentioned toolbar) by both adding them when my add-on is loaded and using window "load" event listeners for windows opened after my add-on is loaded (using document.createElement() and element.appendChild()), but I am not sure about the best way to add dynamic elements to this XUL file that can be opened and closed multiple times in the same window.

Is there any way to overlay the XUL file one time per session (I am guessing not)? Otherwise, do I need to set up some kind of page load listener that fires every time a page loads and then checks the address to see if it matches the XUL file's address and does the overlay if so? Is it possible to listen for a specific address?

1
firefox-addonxul

1 Answers

1
votes

I ended up adding a load listener to gBrowser to listen for page loads. The listener checks event.originalTarget.location for the chrome XUL file address and adds the DOM elements on a match. When my add-on is enabled, I use gBrowser.browsers.length and gBrowser.getBrowserAtIndex() to loop through all open tabs in a window to check if the XUL is already open.

For clean up, I store a reference to each DOM element added to the XUL file in a addedByMyAddon array property that I add to the tab's content document. When my add-on is disabled, I loop through the open tabs again looking the for the XUL file and then delete everything in the addedByMyAddon property and then delete the addedByMyAddon property.