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

Question

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

我在一个名为utils.js 的文件中有一些代码，我想从插件的main.js 和page-mod 的内容脚本中调用这些代码。

是否可以从两者引用相同的utils.js？如果有，怎么做？

编辑：更好的解决方案是让我也可以在 Google Chrome 扩展程序中使用相同的代码。

Answer 1

我遇到了同样的问题。你会认为会有一个明显的解决方案。这是我一直在为 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()

这显然是一个小技巧，但到目前为止相当可靠。这就是你要找的东西吗？

Answer 2

我的解决方案是

1. 将所有“逻辑”（以及我的“实用程序”模块）放入插件代码中
2. 使内容脚本尽可能简单
3. 每当内容脚本需要需要 utils 模块的信息时，我都会在内容脚本（self.port.emit、self.on...）和插件代码（worker.port.on...）之间使用异步通信系统。 )

该解决方案使我的插件设计得更好。但我不知道异步方法是否适用于您的情况。

Answer 3

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

这似乎目前效果最好，尤其是因为大部分源代码也在扩展的 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;

Answer 4

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

magnoz 上面的回复（其中函数名和文件名因大小写敏感而不同）似乎建议我应该只使用两次函数名并忽略文件名。是这样吗？