Question

我正在创建一个Google Chrome扩展程序，必须在访问过的网站上添加内容（如工具箱）。

我必须使用RequireJS和BackboneJS（卓别林），一切正常，除非我使用RequireJS（和Backbone）访问网站，但问题似乎来自RequireJS冲突）。（这是当我使用内容脚本包含一个包含RequireJS的-script-标签时。）

如果我直接在页面中添加内容，我认为发生冲突是正常的，所以我在这里尝试了解决方案：Loading multiple instances of requireJS and Backbone

它似乎工作（现在），但网站试图重新加载他自己的RequireJS文件（与他的路径，但在我的扩展名）加载我的之前，我担心它可能会导致意外的行为。另外，我必须在requirejs.config中确定我的文件路径，或者它在Bitbucket源（cloudfront）中寻找它们。（也许这是正常的）

bitbucket示例：

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.

＆lt; ---------这个文件是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'});
});

例如，它适用于gooogle.com，但我得到了

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" ] }], ... }

Chrome扩展程序使用RequireJS，Backbone（卓别林）冲突

1 个答案: