0

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

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

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

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

4

1 回答 1

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 开发人员来说是不希望的副作用。

于 2013-10-03T09:06:28.437 回答