tabs.executeScript - passing parameters and using libraries?

Question

I am writing a Chrome extension that needs to modify pages in a specific domain according to some given parameter, which needs XSS in order to be obtained, so simply using a content script seems impossible. So, I've decided to inject the script using tabs.executeScript.

Now I need to know two things: First, how can I pass parameters to the script when using executeScript? I guess I can use messages, but isn't there a more direct way to pass the parameter while injecting the script?

Second, my script uses jQuery, so I need to include jQuery somehow. It's silly, but I'm not sure how to do it. So far, I embedded jQuery in the HTML page I was writing (for example background.html).

Solution 1

If you don't want to use messaging then:

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 should be placed into extension folder). Script options will be available inside scriptOptions variable in the script.js.

With messaging it is just as easy:

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

You would need to add a request listener to 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);
});

Solution 2

Building off the direct method above, I was able to inject code into a new tab directly from the background script on my Chrome Extension. However, be advised that the code section of the executeScript command will not simply take variables, but only a string. Therefore, after experimenting, I found we need to setup the string of commands beforehand and include the variables we want. Like this:

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

This worked well!

Solution 3

Better way to include dependencies

Add the dependant libraries (and other .js files) to the background scripts in your manifest.json by:

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

List the dependencies before app code so that they are loaded before.

Reference: Register Background Scripts

Note: this would perform eager-loading of the scripts, instead of lazy-loading as with executeScript.