0

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

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

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

它似乎工作（目前），但该网站正在尝试在加载我的之前重新加载他自己的 RequireJS 文件（使用他的路径，但在我的扩展中），我担心它可能会导致意外行为。另外，我必须在 requirejs.config 中精确我的文件路径，或者它正在 Bitbucket 源（云端）中寻找它们。（也许这很正常）

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.

<--------- 这个文件是 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>

在它的源头。总而言之，我只需要脚本来忽略“当前”网站 Require 文件。

4

1 回答 1

0

skipDataMain加载 require.js 时会同步检查该选项。在加载 require.js 之后设置这个变量不再对加载器产生影响，因为此时数据主扫描已经运行。

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

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

清单.json：

{
    ...
    "content_scripts": [{
        "matches": ["https://*/*", "http://*/*"],
        "js": [
            "extension/config.js",
            "bower_components/requirejs/require.js",
            "extension/init-app.js",
            "extension/main.js"
        ]
    }],
    ...
}
于 2014-10-20T13:45:29.987 回答