Chrome擴展使用RequireJS，骨幹（卓別林）衝突

Question

我正在創建一個谷歌瀏覽器擴展，它必須在訪問過的網站上添加內容（如工具箱）。我不得不使用RequireJS和BackboneJS（卓別林），除了當我訪問使用RequireJS（和Backbone，但問題似乎來自RequireJS衝突）的網站時，一切都可以。 （這是我使用的內容腳本包括-script-標籤包括RequireJS。）

我想這是正常的有衝突，如果我直接在頁面中添加內容，所以我在這裏嘗試瞭解決方案：Loading multiple instances of requireJS and Backbone

這似乎工作（現在），但該網站正試圖重新加載他自己的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. 

< ---------這個文件到位桶的RequireJS，到位桶仍然工作正常，雖然

是否有另解決方案我沒有找到？還是我做錯了？我是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是羅布的腳本

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 +應用

// 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後設置這個變量對加載器沒有任何影響，因爲數據主掃描已經在那個時候運行了。

跳過數據主要的正確方法是前裝載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" 
     ] 
    }], 
    ... 
}