How to share code between content script and addon?

I'm writing an extension for Firefox 4+.

I have some code in a file named utils.js which I'd like to call from both the addon's main.js and from the page-mod 's content script.

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

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

---

I've run into this same problem. You'd think there'd be an obvious solution. Here's what I've been doing for firefox (haven't worked with chrome):

I have a file lib/dbg.js containing my basic debug functions that I want to use everywhere.

In each content scriptable module in my main.js, I have this:

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

and then in main 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 makes use of things like Function.toString() to basically build a stringified version of the dbg module and pass it as an inline content script. This function probably isn't hugely general as I just wrote it to handle simple functions and strings (the only two data types I needed) but the principle should be easily applied even if you were to just do something like

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

It's clearly a bit of a hack but a pretty reliable one so far. Is that what you were looking for?

---

My solution was to

put all the "logic" (and my "utils" module) in the addon code

keep the content script as simple as possible

and whenever content script needs information that would require the utils module I use the asynchronous communication system between content script (self.port.emit, self.on...) and addon code (worker.port.on...)

The solution has lead to a better design of my addon. But I don't know if the async approach would work in your situation.

---

Since I couldn't find an existing solution I'm now just copying the same file to multiple directories (as part of the build/debug process).

This seems to work best for now especially since most part of the source code is reused in a Google Chrome implementation of the extension, too.

To make utils.js usable in Firefox content scripts and in Chrome (both have no CommonJS) I'm importing it like this:

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

The relevant parts of utils.js look like this:

function initUtils() {
    var result = {
        // ..define exported object...
    };
    return result;
};

// Chrome
var Utils = initUtils();
var exports = exports || {}; 
// Firefox
exports.Utils = Utils;

链接地址: http://www.djcxy.com/p/7986.html

上一篇: 如何在iOS项目中实现CHCircularBuffer？

下一篇: 如何在内容脚本和插件之间共享代码？