加载requireJS和骨干的多个实例 [英] Loading multiple instances of requireJS and Backbone

问题描述

我创建一个谷歌的Chrome扩展其中一个选项卡上激活时，加载一些自定义的code和一些新的意见纳入该窗口的文档。我想使用requireJS加载由扩展名为code的这些新的模块。不过，我担心如果应用程序/网站这个扩展叫上已经运行requireJS，我从头开始打电话，要么抹站点本地require.config或以其他方式造成一些未知的恶作剧可能发生冲突的可能或名称冲突。这将导致该网站打破我的每一个扩展就可以激活时间。

I am creating a google chrome extension which, when activated on a tab, loads some custom code and a few new views into the document of that window. I'd like to use requireJS to load these new modules of code called by the extension. However, I worried about a possible conflict or name collision that might occur if the app/website this extension is called on is already running requireJS, and my calling it from scratch either wipes the sites native require.config or otherwise causes some unknown mischief. This would cause the site to break every time my extension is activated on it.

那么，有没有办法来加载requireJS和backboneJS的全新和独立情况下，到可能已经拥有自己的实例上运行一个网站？如果没有，有没有办法调和我的要求和CONFIGS与目标应用程序？

So is there a way to load entirely new and "independent" instances of requireJS and backboneJS onto a site that MAY already have its own instances running? If not, is there a way to reconcile my requirements and configs with those of the target app?

编辑W /更多详情：好了，所以更详细一点上我的分机：我创建了网页的iframe，它有一个完全独特的文件空间。但我仍然需要的iFrame要注意的一些事情在原始文档中事（例如：当用户点击该文件在一定格，我想这个事件传递给iFrame的）。要做到这一点，我在原始文档的内容脚本通过各种对象，最多延长，回iframe的内容脚本，然后最后（使用window.onMessage），到iframe的JavaScript环境。我开发的过程大致是一个类似于描述这里。是的，这让我的头很疼。

EDIT W/ MORE DETAILS: Ok, so a little more detail on my extension: I am creating an iFrame on the page, which has a completely unique document space. But I still need the iFrame to be aware of certain things going on in the original document (ex: when the user clicks on a certain div in that document, I want this event to be passed to the iFrame). To do this, I pass various objects through the original document's content script, up to the extension, back to the iframe's content script, and then finally (using window.onMessage), on to the iFrame's javascript environment. The process I've developed is roughly similar to the one described here. And yes, it makes my head hurt.

总之，一切的一点是，我在iframe，扩展，和原来的源文件回事code的不少。所以，我想在这三个方面的要求实例。

Anyway, the point of all that is that I have a LOT of code going on in the iframe, the extension, and the original source document. So, I'd like to have a require instance in each of these contexts.

推荐答案

内容脚本在从页面的上下文的分离的上下文中运行。即如果页面声明了一个全局变量骨干，您的内容脚本不能直接读取或访问它。

Content scripts run in a context that is isolated from the page's context. I.e. if the page declares a global variable Backbone, your content script cannot directly read or access it.

删除以下code（刚刚写）在你的浏览器扩展程序（放后 require.js ），并且您将能够在使用RequireJS您内容脚本。

Drop the following code (just written) in your Chrome extension (put it after require.js), and you will be able to use RequireJS in your content scripts.

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();
};

在开发过程中，这种方法是比较理想的，因为行号会在你的code匹配的行。

During development, this method is quite ideal, because the line numbers will match the lines in your code.

在生产，我建议使用 r.js 来连接（和缩小）的code，因为输出将是一个大的JavaScript文件。 Chrome扩展程序内的资源，通常会加载在几毫秒内，但是如果你有相当多的模块，这些毫秒加起来的东西显著。并且每个请求是在开发工具网络选项卡为给定的标签，这只是噪音，谁使用您的扩展Web开发者不希望的副作用可见。

In production, I suggest to use r.js to concatenate (and minify) your code, because the output will be one big JavaScript file. Resources within a Chrome extension are typically loaded within a few milliseconds, but if you have quite a lot of modules, these milliseconds will add up to something significant. And each request is visible in the Network tab in the developer tools for the given tab, which is just noise, and an undesired side-effect for web developers who use your extension.

这篇关于加载requireJS和骨干的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！