加载 requireJS 和 Backbone 的多个实例

Question

我正在创建一个谷歌浏览器扩展程序，当在选项卡上激活时，它会将一些自定义代码和一些新视图加载到该窗口的文档中。 我想使用 requireJS 来加载扩展调用的这些新代码模块。 但是，我担心如果调用此扩展的应用程序/网站已经在运行requireJS，并且我从头开始调用它要么擦除站点本机require.config，要么导致一些未知的恶作剧，则可能发生冲突或名称冲突。 这将导致每次在其上激活我的扩展程序时，站点都会中断。

那么有没有办法将 requireJS 和 backboneJS 的全新和"独立"实例加载到可能已经运行自己的实例的站点上？ 如果没有，有没有办法将我的需求和配置与目标应用程序的要求和配置进行协调？

编辑更多细节：好的，关于我的扩展的更多详细信息：我正在页面上创建一个iFrame，它具有完全独特的文档空间。 但我仍然需要 iFrame 来了解原始文档中发生的某些事情(例如：当用户单击该文档中的某个div 时，我希望将此事件传递给 iFrame(。 为此，我将各种对象通过原始文档的内容脚本传递到扩展名，返回到 iframe 的内容脚本，最后(使用 window.onMessage(传递到 iFrame 的 javascript 环境。 我开发的过程与此处描述的过程大致相似。 是的，这让我头疼。

无论如何，所有这一切的重点是我在iframe，扩展和原始源文档中有很多代码。 因此，我希望在每个上下文中都有一个必需的实例。

Answer 1

内容脚本在与页面上下文隔离的上下文中运行。 即，如果页面声明了一个全局变量Backbone，您的内容脚本无法直接读取或访问它。

将以下代码(刚刚编写(放在Chrome扩展程序中(放在require.js之后(，您将能够在内容脚本中使用RequireJS。

require.load = function(context, moduleName, url) {
    url = chrome.extension.getURL(url);
    var x = new XMLHttpRequest();
    // Append Math.random()... to bust the cache
    x.open('GET', url + '?' + Math.random().toString(36).slice(-4));
    x.onload = function() {
        var code = x.responseText;
        x += 'n//@ sourceURL=' + url; // Optional, for debugging.
        window.eval(code);
        context.completeLoad(moduleName);
    };
    x.onerror = function() {
        // Log error if you wish. This is usually not needed, because
        // Chrome's developer tools does already log "404 Not found"
        // errors for scripts to the console.
    };
    x.send();
};

在开发过程中，此方法非常理想，因为行号将与代码中的行匹配。

在生产中，我建议使用 r.js 来连接(和缩小(你的代码，因为输出将是一个大的 JavaScript 文件。Chrome 扩展程序中的资源通常会在几毫秒内加载，但如果您有相当多的模块，这些毫秒将加起来很重要。每个请求都显示在给定选项卡的开发人员工具的"网络"选项卡中，这只是噪音，对于使用扩展的 Web 开发人员来说是一种不希望的副作用。