将 Chrome 扩展程序移植到 Firefox、Safari、IE答案

【问题标题】：Port Chrome Extension to Firefox, Safari, IE将 Chrome 扩展程序移植到 Firefox、Safari、IE
【发布时间】：2015-08-08 10:16:12
【问题描述】：

我想开始制作跨浏览器扩展。我了解每个浏览器的所有 API 和结构都不同，但是有什么通用的做法可以遵循吗？

我在 Stackoverflow 上进行了搜索，但没有一个问题提供了生成跨浏览器扩展的通用解决方案。

【问题讨论】：

【解决方案1】：

根据我的经验，最好的解决方案是使用将调用浏览器 api 的适配器类。通过使用正确的适配器，您可以获得适用于每个浏览器的代码。

例如，在后台脚本中，Firefox 没有 setTimeout/setInterval，但 chrome 有。你可以有这样的代码

Core.js

this._browserAdapter.setTimeout(function(){...}, 1000);

ChromeAdapter.js

setTimeout: function (callback, time) {
        return setTimeout(callback, time);
}

FirefoxAdapter.js

setTimeout: function(callback, time) {

        var {setTimeout} = require("sdk/timers");
        return setTimeout(callback, time);
},

您可以使用这种方式做任何事情，因此您将能够拥有超过 90% 的共同代码。

编辑

它适用于 firefox 和 safari。对于 IE，它完全不同，但有了新的 microsoft EDGE，我认为有可能拥有这样的东西。等着瞧！

【讨论】：

这与我在这里提出的解决方案相同。确保获得所有内容有点棘手，但我们使用 UMD JS (github.com/umdjs/umd) 模块格式来构建代码。我们使用 RequireJS (requirejs.org) 在 Chrome 中加载模块，而 Firefox 扩展使用 Mozilla 的 Common JS 实现。