Firefox XUL Extension Calls Function in Injected Script?

Question

Two part question:

1) How do you inject a script (for example 'library.js') to the HTML DOM when making an XUL extension?

2) I currently have a toolbar button which I want to call a function in 'library.js' when the button is clicked.

Here is my current XUL for the toolbar button

<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="myextension-button" 
    class="toolbarbutton-1"
    image="chrome://xulschoolhello/skin/favicon.png"
      oncommand="doStuff();"
    label="label" tooltiptext="tooltip" />
</toolbarpalette>

Here is library.js (which will be injected into the DOM). Library.js will have a bunch of functions modifying the DOM. Here is one example:

function changeTheDOM(){
     document.body.innerHTML = 'I changed it';
}

I want doStuff() to somehow call the function changeTheDOM(), which is in the HTML DOM. Let me know if that makes sense.

With all these different namespaces/context, its very difficult for me as a beginner to grasp how to interact between my application code and the DOM.

Noitidart Noitidart · Accepted Answer · 2014-03-07T08:36:10

User reached out to me. They created an overlay extension. So this solution is different from the bootstrap demo I showed in my other solution submited, as bootstrap addons don't support resource in chrome.manifest. ("resource" is needed because it is accessible by content, in bootstrap you have to set "contentaccessible=true" to the chrome package)

The repository of the test addon created by blee908 is HERE@GitHub

I forked this addon and made the updates HERE@GitHub. So it now injects a script that alert's "hey" on the current website in the tab when this widget is clicked. (If you don't see it when install addon you have to customize toolbars and drag from there to either addonbar or toolbar)

There were three steps to do this as seen in commit history of the updated addon

Create test.js

Created a folder which I will expose to resource later on and created the script file with code I want to inject
Update chrome.manifest

Create a resource out of the content/injectable/ folder, this way anything in that folder can be injected into sites without "Permission Security" exceptions.
Update browserOverlay.js

We defined in our chrome.manifest file that the location to the folder with our script is "resource://xulschoolhello-injections/" so lets tell it to inject the script file from. I also edited out the innerHTML being set to "rawr".

Firefox XUL Extension Calls Function in Injected Script?

2 Answers

There were three steps to do this as seen in commit history of the updated addon