web-dev-qa-db-fra.com

tabs.executeScript - Passage de paramètres et utilisation de bibliothèques?

J'écris une extension Chrome qui doit modifier les pages d'un domaine spécifique en fonction d'un paramètre donné, qui nécessite XSS pour être obtenue. Il est donc impossible d'utiliser un script de contenu. J'ai donc décidé d'injecter le script en utilisant tabs.executeScript.

Maintenant, j'ai besoin de savoir deux choses: Premièrement, comment puis-je passer des paramètres au script en utilisant executeScript? Je suppose que je peux utiliser des messages, mais n’existe-t-il pas un moyen plus direct de transmettre le paramètre lors de l’injection du script?

Deuxièmement, mon script utilise jQuery, je dois donc inclure jQuery en quelque sorte. C'est idiot, mais je ne sais pas comment le faire. Jusqu'ici, j'ai intégré jQuery à la page HTML que j'écrivais (par exemple background.html).

javascriptjquerygoogle-chromegoogle-chrome-extension
26
Gadi A

Si vous ne souhaitez pas utiliser la messagerie, alors:

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {code: "var scriptOptions = {param1:'value1',param2:'value2'};"}, function(){
        chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
            //all injected
        });
    });
});

(jquery.js doit être placé dans le dossier de l'extension). Les options de script seront disponibles dans la variable scriptOptions dans le script.js.

Avec la messagerie, rien de plus simple:

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
        chrome.tabs.sendMessage(tabId, {scriptOptions: {param1:'value1',param2:'value2'}}, function(){
            //all injected
        });
    });
});

Vous devez ajouter un écouteur de requête à script.js:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    var scriptOptions = message.scriptOptions;
    console.log('param1', scriptOptions.param1);
    console.log('param2', scriptOptions.param2);
    doSomething(scriptOptions.param1, scriptOptions.param2);
});
48
serg

En me basant sur la méthode directe ci-dessus, j'ai pu injecter du code dans un nouvel onglet directement à partir du script d'arrière-plan de mon extension Chrome. Toutefois, sachez que la section de code de la commande executeScript ne prendra pas simplement des variables, mais uniquement une chaîne. Par conséquent, après des essais, j'ai constaté que nous devions configurer la chaîne de commandes à l'avance et inclure les variables souhaitées. Comme ça:

var sendCode = 'document.getElementsByClassName("form-control n-gram")[0].value = "' + TMObj.brand + '";';

var TMUrl = "http://website.com";
chrome.tabs.create({ url: TMUrl }, function(tab){
            chrome.tabs.executeScript(null, {code: sendCode});
      });
});

Cela a bien fonctionné!

1
UltimatePeter

Meilleure façon d'inclure des dépendances

Ajoutez les bibliothèques dépendantes (et d’autres fichiers .js) aux scripts d’arrière-plan de votre manifest.json en: 

"background": {
  "scripts": [
    "jquery.js",
    "main.js"
]

Répertoriez les dépendances avant le code de l'application afin qu'elles soient chargées avant.

Référence: Register Background Scripts

Remarque: ceci effectuerait un chargement rapide des scripts, au lieu d'un chargement paresseux comme avec executeScript.

0
vedant