Question

In my Firefox add-on using the Add-on SDK, I’m trying to include two library files from the data directory in main.js, and it’s not working.

I have the following directory structure:

data
-- jquery-latest.min.js
-- pagemodscript.js
-- mylibrary.js

lib
-- main.js

pagemodscript.js uses jQuery, and that works (using contentScriptFile).

I also want to use jQuery and mylibrary.js in main.js, but that’s not working.

Various things I’ve tried result in error messages “ReferenceError: [class in mylibrary.js] is not defined”, “ModuleNotFoundError: unable to satisfy: require(mylibrary.js)”, and “has no authority to load”.

I tried moving mylibrary.js and copying jquery-latest.min.js to lib, but that resulted in one of those error messages.

What’s the best way to set this up?

Note: the reason I want to use jQuery in main.js is because – after an event generated by pagemodscript.js – I want main.js to add a div to the current page in which it will display a list of objects it created from another event generated by pagemodscript.js. Is the better practice to have pagemodscript.js create those objects and create the div? In that case, this would work: I’d load mylibrary.js into pagemodscript.js using contentScriptFile. In that case, pagemodscript.js would be creating objects of the class defined in mylibrary.js, and that doesn’t seem as good a design as the way I’d prefer to do things.

Answer 1

I also want to use jQuery and mylibrary.js in main.js

That won’t do you any good. jQuery expects to run in a window and works with the DOM. Extension files execute in an entirely different environment – there is no window to access and some typical window functions are unavailable. Also, extension files simply aren’t allowed to access the DOM, all web page access has to happen in content scripts.

I want main.js to add a div to the current page

You should send a message to your content script (pagemodscript.js) and let it create the div for you. That’s how it works with the Add-on SDK.