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.
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()], [document.createElement()], [Element reference], [Node reference] (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.
©2020 All rights reserved.