Accessing website variables with injected script through background.js

Question

I am building a Chrome Extension and when clicked on the toolbar icon, I am executing background.js, and in background.js I am running execute script. Like this:

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" })
});

In myScript.js, I can confirm that it has executed jQuery and running my script too.

---

myScript.js:

console.log('test');

$(document).ready(function() {
   console.log('jQuery test');
})

They both work

---

At this point, I am trying to achieve a variable that is inside the web page (not written by me); let's say it is var helloWorld = "the content".

If I try in the console (dev tools), console.log(helloWorld), it works. However, if I try in myScript.js, it says:

$(document).ready(function() {
    console.log(helloWorld)

    setTimeout(function() {
       console.log(helloWorld)
    }, 1500)
})

Uncaught ReferenceError: helloWorld is not defined

---

I have seen some workaround for content script approach, but I couldn't make it work for the executeScript approach. How can I access the helloWorld variable inside myScript.js?

---

I tried using Predator's approach. Here are the codes:

injected.js:

chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "test"});
// I tried returning a string first

background.js

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" })
});

chrome.runtime.onMessageExternal.addListener( function(message, sender, sendResponse){
    console.log(message.varName);
    if( message.varName !== undefined ){
        console.log(message.varName);
    }
});

manifest:

"background": { 
   "scripts": ["scripts/background.js"],
   "persistent": true
 },

according to your first answer, myScript.js:

$(document).ready(function() {
    setTimeout(function() {
        var s = document.createElement('script');

        s.src = chrome.extension.getURL('scripts/fetcher.js');
        s.onload = function() {
            this.remove();
        };
        (document.head || document.documentElement).appendChild(s);
    }, 500)
})

according to your updated answer, myScript.js:

function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); //run the script
    document.body.removeChild(script); //clean up
}

background.js is not catching the message

Answer 1

Your content script is run in a separate context, which means it cannot access the webpage's global scope. However I did managed previously to get around this by injecting codes via

location.href = "javascript: /* some messaging code */";

Probably not be the best practice, but it worked for me (and there might be newer APIs that lets you do without this.)

Answer 2

Like I said above in the comments after injecting the function or code from the content script to the website page you can externally send a message from that page to the background.js of your extension.

chrome.runtime.sendMessage("extensionIdHere", {varName: varValue});

After which you can have this code to listen to these external messages and respond to them or use the value that got sent.

chrome.runtime.onMessageExternal.addListener( function(message, sender, sendResponse){

    if( message.varName !== undefined ){
        //process the info
    }

});

Edit: First Try this and if it doesnt work read more below:

Add this at the bottom of your manifest.json and try again:

"externally_connectable": {
    "matches": [ "https://theSiteWhereYouAreInjectinTheCode.com/*" ]
}

If it still didn't work after that try adding this function to your content script that will inject that code to the web page.

//Injects functions directly into the dom
function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); //run the script
    document.body.removeChild(script); //clean up
}

And then call it there like so:

exec( function(){
    chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "helloWorld"});
});