tabs.executeScript - передача параметров и использование библиотек?

Question

Я пишу расширение Chrome, которое должно модифицировать страницы в определенном домене в соответствии с некоторым заданным параметром, для которого требуется XSS, поэтому простое использование скрипта контента кажется невозможным. Итак, я решил добавить скрипт, используя tabs.executeScript.

Теперь мне нужно знать две вещи: во-первых, как передать параметры в сценарий при использовании executeScript? Я думаю, что могу использовать сообщения, но разве нет более прямого способа передачи параметра при внедрении скрипта?

Во-вторых, мой скрипт использует jQuery, поэтому мне нужно как-то включить jQuery. Это глупо, но я не уверен, как это сделать. До сих пор я встраивал jQuery в написанную мной HTML-страницу (например, background.html).

Answer 1

Если вы не хотите использовать обмен сообщениями, то:

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 следует поместить в папку расширений). Параметры сценария будут доступны внутри переменной scriptOptions в script.js.

С обменом сообщениями это так же просто:

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
        });
    });
});

Вам необходимо добавить прослушиватель запросов к 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);
});

Answer 2

Используя вышеописанный прямой метод, я смог внедрить код в новую вкладку прямо из фонового скрипта на моем Chrome Extension.Однако имейте в виду, что раздел кода команды executeScript будет принимать не просто переменные, а только строку.Поэтому после экспериментов я обнаружил, что нам нужно предварительно настроить строку команд и включить нужные нам переменные.Вот так:

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});
      });
});

Это сработало хорошо!

Answer 3

Лучший способ включить зависимости

Добавьте зависимые библиотеки (и другие файлы .js) в фоновые сценарии в вашем manifest.json с помощью:

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

Перечислите зависимости перед кодом приложения, чтобы они загружались до.

Ссылка: зарегистрировать фоновые сценарии

Примечание: при загрузке сценариев выполняется быстрая загрузка, а не отложенная загрузка, как при executeScript.