Chrome扩展使用RequireJS，Backbone(Chaplin)冲突

Question

我正在创建一个Google Chrome扩展，它必须在访问的网站上添加内容（就像工具箱一样）。

我必须使用RequireJS和BackboneJS（Chaplin），除了当我访问一个使用RequireJS（和Backbone，但问题似乎来自RequireJS冲突）的网站时，一切都很好。（这是当我使用内容脚本来包含一个包含RequireJS的-script标记时。）

我想如果我直接在页面中添加内容，发生冲突是正常的，所以我在这里尝试了解决方案：加载requireJS和Backbone 的多个实例

这似乎有效（目前），但网站正在尝试在加载我的RequireJS文件之前重新加载他自己的RequireJS（带有他的路径，但在我的扩展名中），我担心这可能会导致意外行为。此外，我必须在requirejs.config中精确定位我的文件路径，否则它将在Bitbucket源代码（cloudfront）中查找它们。（也许这很正常）

位桶示例：

Denying load of chrome-extension://mgncmiffelpdhlbkkmmaedbodabdchea/https://d3oaxc4q5k2d6q.cloudfront.net/m/7aaf1677069c/amd/build/main.js?8uxr. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

<--------这个文件是Bitbucket的RequireJS，尽管，Bitbucket仍然运行良好

还有其他我还没有找到的解决方案吗？还是我做错了？我是RequireJS（以及Chrome ext.和Backbone…）的初学者，所以我可能错过了一些东西。

这是manifest.json 中的内容脚本部分

"content_scripts": [
{
  "matches": ["https://*/*", "http://*/*"],
  "js": ["bower_components/requirejs/require.js",
  "extension/init-app.js",
  "extension/main.js"]
}],

init-app.js是Rob的脚本

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

和main.js包含requirejs.config+app

// Configure the AMD module loader
requirejs.config({
  skipDataMain: true,
  // The path where your JavaScripts are located
  baseUrl: 'extension',
  // Specify the paths of vendor libraries
  paths: {
    jquery: '../bower_components/jquery/jquery',
    underscore: '../bower_components/lodash/dist/lodash',
    backbone: '../bower_components/backbone/backbone',
    handlebars: '../bower_components/handlebars/handlebars',
    text: '../bower_components/requirejs-text/text',
    chaplin: '../bower_components/chaplin/chaplin',
    application: '/extension/application',
    routes: '/extension/routes',
  },
  // Underscore and Backbone are not AMD-capable per default,
  // so we need to use the AMD wrapping of RequireJS
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    handlebars: {
      exports: 'Handlebars'
    }
  }
  // For easier development, disable browser caching
  // Of course, this should be removed in a production environment
  //, urlArgs: 'bust=' +  (new Date()).getTime()
});

// Bootstrap the application
require(['application', 'routes'], function(Application, routes) {
  new Application({routes: routes, controllerPath: 'scripts/controllers/', controllerSuffix: '-controller'});
});

例如，它在谷歌网站上有效，但我得到了

GET chrome-extension://ccgfmmmnebacpnbdpdnphmnmicaooddg/extension/Home.js?9zfr net::ERR_FILE_NOT_FOUND

在https://www.cloud9trader.com（使用RequireJS的网站），因为它有

<script data-main="/0.2.59/scripts/Home.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>

在其来源中。总之，我只需要脚本忽略"当前"网站所需的文件。

Answer 1

加载require.js时会同步检查skipDataMain选项。在加载require.js之后设置此变量对加载程序不再有任何影响，因为此时数据主扫描已经运行。

跳过data-main的正确方法是在加载require.js之前声明配置，如下所示：

// extension/config.js
var require = {
    skipDataMain: true
};

manifest.json:

{
    ...
    "content_scripts": [{
        "matches": ["https://*/*", "http://*/*"],
        "js": [
            "extension/config.js",
            "bower_components/requirejs/require.js",
            "extension/init-app.js",
            "extension/main.js"
        ]
    }],
    ...
}