[Reposted] - Passing dynamic variable from background to content script - MV3

[Abdullah Al Naiem]

Summary: I want to send a value/variable/function from the background.js to execute.js (cs) and check in the console or retrieve that value/variable in execute.js

On the MV2 I was using my code like below in background.js

chrome.tabs.executeScript(tabId, {

code: 'var backg = ' + backg

}, function () {

chrome.tabs.executeScript(tabId, { file: '.execute.js' });

});

// Here the backg variable value is generated dynamically in the background.js

and I was getting the backg value in the execute.js with this method

if (typeof backg !== 'undefined'){

console.log(backg);

}

// It was working fine in MV2

________________________________________________

But the problem is I'm unable to achieve this on MV3

I tried the below method

// background.js

function backgFunc(backg) {

return backg;

}

chrome.scripting.executeScript({

target: { tabId: tabId, allFrames: true },

func: backgFunc,

args: [backg],

}, () => {

chrome.scripting.executeScript({ target: { tabId: tabId }, files: ['execute.js'] });

});

// execute.js

if (typeof backgFunc !== 'undefined'){

console.log(backgFunc());

}

In this case, it's not working. Can anyone help me to figure out this?

[Note: This post was previously posted. The reason I'm unable to paste the full code which is too long and that's why I tried to paste the code in a short and easier but made some mistakes in formatting and writing while I posting. I apologize for the mistake.]

[hrg...@gmail.com]

I think the  backgFunc  should be like this:

function backgFunc( _backg ){
    backg = _backg ; //creates the global variable `backg`, i.e. without the `var` keyword.
}

[Jackie Han]

There are two solutions for passing variables to a content script.

Method 1: First insert global variables, then insert js file that can access them.

// background.js
function backgFunc(backg) {
    window.backg = backg; // or globalThis.backg = backg;
}

// step 1: insert a global variable in content script

chrome.scripting.executeScript({

    target: { tabId: tabId },
    func: backgFunc,
    args: [backg],
}, () => {

    // step 2: insert a js file in content script

    chrome.scripting.executeScript({ target: { tabId: tabId }, files: ['execute.js'] });
});

// execute.js
console.log(backg); // backg exists now


Method 2: Move js file's code to a wrapper function in background.js , then pass a variable directly for this code.

// background.js

// step 1: insert all code in content script with args

// no global variable or function in content script
function executeJs(backg) {    // move all code from execute.js into this function

    ... lots of code.

    all code can access backg in this function

}
chrome.scripting.executeScript({
    target: { tabId: tabId },

    func: executeJs,
    args: [backg],
});

// no execute.js file, no step2.

Additional explanation: "executeScript(a function)" doesn't define this function in content script, it only executes this function with args.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/4c8d72ed-acbc-4b61-be78-e11da602d55fn%40chromium.org.

[Abhishek Sachdeva]

Thanks, Jackie for this solution.

I was stuck on some other problem and this solution helped me! Much better than the original documentation.