如何在内容脚本和插件之间共享代码?

时间:2011-06-21 13:17:01

标签: google-chrome-extension firefox-addon firefox-addon-sdk

我正在为Firefox 4+编写扩展程序。

我在名为utils.js的文件中有一些代码,我想从插件的main.jspage-mod的内容脚本中调用它。

是否可以从两者引用同一utils.js?如果是这样,怎么样?

编辑:更好的解决方案是允许我在Google Chrome扩展程序中使用相同的代码。

4 个答案:

答案 0 :(得分:2)

我遇到了同样的问题。你认为有一个明显的解决方案。这就是我为firefox所做的事情(没有使用过chrome):

我有一个文件lib / dbg.js,其中包含我想在任何地方使用的基本调试函数。

在main.js中的每个内容可编写脚本的模块中,我都有:

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

然后在main我有一个函数

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;
}

它基本上只是遍历导出的属性(变量,函数等),并使用像Function.toString()这样的东西来基本构建dbg模块的字符串化版本并将其作为内联内容脚本传递。这个函数可能不是很普遍,因为我只是编写它来处理简单的函数和字符串(我需要的只有两种数据类型)但是即使你只是做了像

这样的事情,也应该很容易应用这个原则。
contentScript: require('dbg').my_function.toString()

这显然有点像黑客,但到目前为止是一个相当可靠的黑客。那是你在找什么?

答案 1 :(得分:1)

我的解决方案是

  1. 将所有“逻辑”(以及我的“utils”模块)放入插件代码
  2. 使内容脚本尽可能简单
  3. 每当内容脚本需要需要utils模块的信息时,我在内容脚本(self.port.emit,self.on ...)和插件代码(worker.port.on ...)之间使用异步通信系统。 )
  4. 该解决方案可以更好地设计我的插件。但我不知道异步方法是否适用于您的情况。

答案 2 :(得分:0)

由于我找不到现有的解决方案,我现在只是将同一个文件复制到多个目录(作为构建/调试过程的一部分)。

这似乎最适合现在,特别是因为大部分源代码也会在扩展程序的Google Chrome实现中重复使用。

要使utils.js在Firefox内容脚本和Chrome中都可用(两者都没有CommonJS)我会像这样导入它:

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

utils.js的相关部分如下所示:

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

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

答案 3 :(得分:0)

感谢Mozilla的附加SDK参考站点上指向Implementing Reusable Modules的指针。我还不太清楚如何进行exports调用。在他们的示例中,它们对函数和文件使用相同的名称。因此,在exports.translate = translate;行中,左边的translate引用了函数translate(),而右边的引用了文件translate.js,或者反之亦然

上面的

magnoz'回复(由于caSE sENSITiVitY而导致函数名和文件名不同)似乎建议我应该只使用函数名两次并忽略文件名。是这种情况吗?