RequireJS dans une extension Chrome

Que vous avez accès au DOM de la page de l'Extension Chrome via un le contenu du scriptmais le contenu du script n'auront accès qu'à le JavaScript les objets créés par la le contenu du script lui-même.

Il existe de nombreuses façons d'inclure des scripts à partir d'une extension Chrome, comment vous incluez il sera basé sur ce que vous comptez faire avec elle.

Si vous le souhaitez dans le menu contextuel de la page d'un navigateur ou action de la page vous pouvez inclure du manifeste en tant que contenu de script ou de référence à l'aide d'une balise script dans le popup.html à partir d'une relative des ressources dans votre plugin.

De manifeste:

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

De popup.html:

<script data-main="scripts/bla" src="scripts/require-jquery.js>

Si vous le souhaitez dans la page d'arrière-plan vous pouvez référencer à partir de la page d'arrière-plan à l'aide d'une balise de script à partir d'une relative des ressources dans votre plugin.

De background.html

<script data-main="scripts/bla" src="scripts/require-jquery.js>

Si vous voulez qu'il soit inclus dans la page du navigateur lui-même alors vous devez utiliser la dynamique d'injection de script sur la page du DOM. Vous avez accès à la page du DOM à partir d'un le contenu du script. Veuillez noter que si vous chargez le JavaScript à l'aide de cette technique, vous plugin JavaScript (à partir d'un arrière-plan de la page, le contenu du script ou popup script) n'auront pas accès à elle.

Vous pouvez soit charger le requirejs de votre extension à l'aide de la chrome.extension.getURL de la méthode ou de la hébergé emplacement sur l'internet.

var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("async", true);
script.setAttribute("src", chrome.extension.getURL("require-jquery.js"));  
//Assuming your host supports both http and https
var head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
head.insertBefore(script, head.firstChild)

MODIFIER ci-dessous est encore vrai pour la plaine de vanille require.js mais trouvé une solution de contournement par bifurquer RequireJS

Github: https://github.com/jeroendelau/requirejs

Bower: bower install requirejs-par-navigateur-extensions

ORIGINAL POST

L'injecter dans le contenu du script est de loin le plus difficile. Et les réponses ci-dessus sont incomplètes ou incorrectes.

Arrière-plan et le menu Contextuel:

Aller avec auparavant répondre par @nafis, ils vont travailler

Contenu Du Script

C'est un très rusé, et cette partie de la description de l'api est la clé:

Environnement d'exécution

Le contenu des scripts s'exécutent dans un environnement spécial appelé un isolé du monde. Ils ont accès au DOM de la page, ils sont injectés dans, mais pas à n'importe JavaScript, des variables ou des fonctions créées par la page. Il semble à chaque contenu de script comme si il n'y a pas d'autres l'exécution de JavaScript sur la page qu'il est en cours d'exécution sur. L'inverse est tout aussi vrai: le code JavaScript s'exécutant sur la page ne peut pas appeler toutes les fonctions ou d'accéder à toutes les variables définies par des scripts de contenu.

Intuitivement, cela devrait être correct

le manifeste.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["requirejs.js", "myscript.js"]
    }
  ],
  ...
  "web_accessible_resources": [
     "js/*"
  ],
 ...
}

myscript.js

require(["myFancyModule"], function (FM) {
   ...
});

CELA NE FONCTIONNERA PAS

Le problème est que requirejs va procéder à la charge de tous vos dépendances, en injectant des <script> balises dans l'en-tête. Ces balises de script sont exécutées dans la PAGE d'environnement, et non pas dans la PROLONGATION de l'environnement. Et c'est important.

1. Dépendances ne parviennent pas à charger depuis requirejs n'est pas chargé dans la page
   environnement
2. Si le propriétaire du site web a alreay ajouté requirejs, il mlgh clash
3. Vous pouvez décider d'injecter require.js dans la page, comme @Adam suggère, mais dans ce cas, aucun de vos fonctions d'extension
   va travailler. de stockage, messagerie, cross-site request sont pas tous
   disponible

Donc, pour ceux à travailler, les modules chargés par requirejs besoin d'être injecté dans les extensions de l'environnement. Il est possible d'utiliser un requirejs plugin pour modifier le comportement de chargement.

Raison de la façon dont cela fonctionne, la solution est très inélégant, ET il empêche de voir les scripts dans le débogueur en vertu de scripts. Mais si vous êtes désespéré, ça fonctionne.

myscript.js

/**
 * Inject the plugin straight into requirejs
 */
define("Injector", {
  load: function (name, req, onload, config) {

    //Load the script using XHR, from background
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function () {

      //Find depenencies in the script, and prepend the
      //Injector! plugin, forcing the load to go through this
      //plugin.
      var modified = getDeps(oReq.response)

      //have requirejs load the module from text
      //it will evaluate the define, and process dependencies
      onload.fromText(modified);
    });
    oReq.open("GET", req.toUrl(name) + ".js");
    oReq.send();

    //Find dependencies and prepend Injector!
    function getDeps(script)
    {
      //extract the define call, reduced to a single line
      var defineCall = script.match(/define([\s\S])*?{/m)[0].split("\n").join("");
      //extract dependenceis from the call
      var depsMatch = defineCall.match(/\[([\s\S]*?)\]/);

      //if there are dependencies, inject the injectors
      if (depsMatch)
      {
        var deps = depsMatch[0];
        var replaced = deps.replace(/(\'|\")([\s\S]*?)/g, '$1Injector!$2$1');
        return script.replace(/define([\s\S]*?)\[[\s\S]*?\]/m, 'define$1' + replaced);
      }
      //no dependencies, return script
      return script;
    }
  }
});

/**
 * Call all your dependencies using the plugin
 */
require(["Injector!myFancyModule"], function (FM) {
      chrome.storage.local.get({something});
});