Question

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

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

编辑W / MORE DETAILS：好的，关于我的扩展程序的更多细节：我在页面上创建了一个iFrame，它有一个完全独特的文档空间。但我仍然需要iFrame知道原始文档中发生的某些事情（例如：当用户点击该文档中的某个div时，我希望将此事件传递给iFrame）。为此，我将各种对象传递到原始文档的内容脚本，直到扩展，返回到iframe的内容脚本，然后最后（使用window.onMessage）传递到iFrame的javascript环境。我开发的过程大致类似于here所描述的过程。是的，它让我头痛。

无论如何，重点是我在iframe，扩展程序和原始源文档中有很多代码。所以，我想在每个上下文中都有一个require实例。

Answer 1

内容脚本run in a context that is isolated from the page's context。即如果页面声明了全局变量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开发人员来说是一个不受欢迎的副作用。

加载requireJS和Backbone的多个实例

1 个答案: