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.

Answer 1

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

1. 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

2. 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.

3. 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".

Answer 2

This template HERE - _ff-addon-template-BootstrapWatchHostEventListenerInjectFiles shows how to inject files by setting contentaccessible=true in the chrome.manifest file.

Install that and then navigate to bing.com and scroll to the bottom you will see the inject iframe with blue background and injected image. You will also see the inject script run on load of bing, it will be an alert box.

However there is an issue with the template above, I can't set the src of the iframe to the chrome path it throws this security error:

Security Error: Content at http://www.bing.com/?FORM=Z9FD1 may not load or link to chrome://bootstrap-watch-host-event-listener-inject-files/content/_inject-website.htm.

This is weird and I don't understand it. The whole point of contentaccessible=true in the chrome.manifest is so this security error doesn't happen. Other devs reading this please help.