1

Recently a friend of mine and I have been working on a Firefox extension. He handed the code to me today, and I've been trying to make it restartless. I used the tutorial from How to convert an overlay extension to restartless (on MDN). Since I don't have much experience working with JavaScript and extensions in general, I was wondering if anyone could help to understand what step number 6 means here in this tutorial. They are saying we can't use "no more XUL overlays", and I understand this. What I don't understand is that how to this part:

Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: document.getElementByID(), document.createElement(), Element reference, Node reference (DOM elements are also nodes).

I decided against using document.loadOverlay, since it's very buggy. I'm not sure if this helps much, but here is the code for our overlay.xul. Again, sorry if the question is really basic, any help is much appreciated. If I need to provide more code please let me know. At this point I thought only the code for our overlay.xul file is important.

<?xml version="1.0" encoding="UTF-8"?>
<overlay id="my-overlay" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/javascript;version=1.7" src="overlay.js"/>
</overlay>
Makyen
  • 31,849
  • 12
  • 86
  • 121
Ashkan Hosseini
  • 77
  • 5
  • This is a good article on bootstrap: https://developer.mozilla.org/en-US/Add-ons/Bootstrapped_extensions and check out these demo gists im a big supported of l10n now :P https://github.com/Noitidart/l10n/tree/xhtml-xul – Noitidart Mar 17 '15 at 07:25
  • 1
    Thank you so much this actually gave me a better understanding of bootstrap. – Ashkan Hosseini Mar 18 '15 at 00:20

1 Answers1

1

XUL overlays can be used for a wide variety of things in Firefox. Step 6: No more XUL overlays focuses more on UI elements than other possible uses of overlays (e.g. loading scripts, as you are doing).

In an XUL overlay extension, the UI elements are generally added by providing an XUL overlay file for each portion of the interface which is modified. The XUL overlay extension does not need to consider removal of the interface elements, as they are only removed when the extension is removed or disabled.

In a restartless extension, all UI elements are added programmatically each time the extension is started. Some UI elements are added once; and some must be added both to each open window and when each new window is opened. When the extension is disabled, or removed, the UI elements must be programmatically removed completely from Firefox.

The portion you quoted is attempting to describe the process of converting an actual XUL overlay (used to modify the Firefox UI) to programmatically inserting (and removing) the UI elements. The most common UI element is probably a toolbar button, but it could be anything. Because it could be anything, the description is relatively vague.

That entire section, Step 6: No more XUL overlays, could definitely use some expansion. I remember planning to do so based on the code I used when converting an extension from XUL to overlay. I had wanted to clean the code up a bit, and account for more cases. However, having an example in there would be helpful. I'll see if I can update it in the next week or so (if someone else does not beat me to it).

In your case:
Based on the overlay code which you included in your question, this section is not talking as directly about how you are using your XUL overlay as might be desired. The part you quoted:

Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: [document.getElementByID()][3], [document.createElement()][4], [Element reference][5], [Node reference][6] (DOM elements are also nodes).

is specifically talking about adding UI elements to Firefox, which is not what you are doing with your overlay.

What you are going to need to do is determine how you are going to apply your script, overlay.js, to whatever it is that you are adding it to. Remember, you also need to be able to remove it when your extension is disabled/removed/updated.

In order to provide more detailed information, we are going to need to know what it is that you are adding your script to. For this, we probably need you to include a copy of your chrome.manifest file. It might be helpful to know what your script does as the functionality may be more appropriately handled without applying the script in the way implied by an overlay. However, you should ask this as a new, separate question, not modify this question to ask something different.

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • 1
    Awesome, thank you so much for your detailed answer. Really appreciate it. Do you think moving the codes from overlay.js to bootstrap.js will do the job? Right now the overlay.js has an onLoad function. What I wanna do is to copy/paste all the code from overlay.js to bootstrap. And in my startup() method in bootstrap do something like this: win.document.addeventlistenerdocument.addEventListener("load", function(e) { extChrome.onLoad(); }, false); Where win is the next elements of Services.wm.getEnumerator("navigator:browser"). Will this work/do the job? – Ashkan Hosseini Mar 18 '15 at 00:20
  • @AshkanH, Without knowing what your `overlay.js` code does it is not really possible to provide an answer to what you should do with it. Your code could be being overlaid on *anything* in Firefox and be doing *anything*. It may, or may not, be appropriate for `bootstrap.js`. There is no way to comment without knowing what the code is overlaid upon and what it is trying to do. So we can provide good answers: please [make a new question](http://stackoverflow.com/questions/ask) including your `overlay.js` code and `chrome.manifest` file (which will say what you are overlaying with `overlay.js`). – Makyen Mar 18 '15 at 05:50