Расширение Chrome с использованием требований RequireJS, Backbone (Chaplin)

Question

Я создаю расширение Google Chrome, которое должно добавлять контент на посещаемые веб-сайты (например, набор инструментов).

Я должен использовать RequireJS и BackboneJS (Chaplin), и все в порядке, за исключением случаев, когда я посещаю веб-сайт с использованием RequireJS (и Backbone, но проблема, похоже, исходит из конфликтов RequireJS). (это когда я использую скрипты содержания, чтобы включать -script- тег, который включает в себя RequireJS.)

Я полагаю, что это нормально, чтобы иметь конфликты, если добавить содержимое непосредственно в страницу, поэтому я попытался решение здесь: 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. 

< --------- Этот файл RequireJS Bitbucket, в 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 является сценарий Роба

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

Параметр skipDataMain синхронно проверяется при загрузке require.js. Установка этой переменной после загрузки 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" 
     ] 
    }], 
    ... 
}