0

アクセスした Web サイト (ツールボックスなど) にコンテンツを追加する必要がある Google Chrome 拡張機能を作成しています。

RequireJS と BackboneJS (Chaplin) を使用する必要があり、RequireJS (および Backbone を使用していますが、問題は RequireJS の競合に起因するようです) を使用して Web サイトにアクセスしている場合を除いて、すべて問題ありません。(これは、コンテンツ スクリプトを使用して、RequireJS を含む -script- タグを含める場合です。)

ページにコンテンツを直接追加すると競合が発生するのが普通だと思うので、ここで解決策を試しました：requireJSとBackboneの複数のインスタンスをロードする

（今のところ）動作しているように見えますが、ウェブサイトは自分の RequireJS ファイルをロードする前に自分の 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 スクリプト部分は次のとおりです。

"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 を使用する Web サイト)で

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

そのソースで。要約すると、「現在の」Web サイトの 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 に答える