How to share code between script content and addon?

Question

I am writing an extension for Firefox 4+.

I have code in a file called utils.js that I would like to call from the main.js addon and from the page-mod content script.

Is it possible to refer to the same utils.js from both? If so, how?

Edit: Even better would be a solution allowing me to use the same code in the Google Chrome extension.

Answer 1

I ran into this problem. You think there will be an obvious solution. Here is what I did for firefox (didn't work with chrome):

I have a lib / dbg.js file containing my main debugging features that I want to use everywhere.

In every module supporting content in my main.js, I have the following:

 contextMenu.Item({ ... contentScript: export_internals(require('dbg')), contentScriptFile: my-actual-scripts.js ... 

and then basically I have a function

 function export_internals(module) { var code = ''; for (name in module) { var val = module[name]; if (val.constructor === String) code += name + ' = "' + val + '";'; else code += val; } return code; } 

which basically just cycles through the exported properties (variables, functions, etc.) and uses things like Function.toString () to basically build a gated version of the dbg module and pass it as inline content script. This function is probably not extremely general, as I just wrote it to handle simple functions and strings (only for the two data types that I need), but the principle should be easily applied, even if you just do something like

 contentScript: require('dbg').my_function.toString() 

This is clearly a bit hacky, but pretty reliable. Is this what you were looking for?

Answer 2

My solution was to

• put all the "logic" (and my "utils" module) in the addon code
• keep script content as simple as possible
• and whenever the contents of the script require information that will require the utils module, I use an asynchronous communication system between the content of the script (self.port.emit, self.on ...) and the addon code (worker.port. on ... )

The solution led to a better design of my addon. But I don't know if an asynchronous approach will work in your situation.

Answer 3

Since I could not find an existing solution, now I just copy the same file into several directories (as part of the build / debug process).

This seems to work best now, because most of the source code is reused in the implementation of the Google Chrome extension.

To make utils.js suitable for use in Firefox content scripts and in Chrome (both do not have CommonJS), I import it as follows:

 var Utils = Utils || require('utils').Utils; 

The relevant parts of utils.js are as follows:

 function initUtils() { var result = { // ..define exported object... }; return result; }; // Chrome var Utils = initUtils(); var exports = exports || {}; // Firefox exports.Utils = Utils; 

Answer 4

Thanks for the pointer. Implementing reusable modules on the SDK support site on the Mozilla site. I still don't quite understand how to make an exports call. In their example, they use the same name for the function and file. So, in the line exports.translate = translate; translate on the left refers to the translate() function, and on the right, the translate.js file, or maybe vice versa?

magnoz 'above (in which the function name and file name differ due to caSE sENSITiVitY), it seems I should just use the function name twice and ignore the file name. Is this the case?