Getting variables outside executeScript in chrome extension

Question

I am trying to code a chrome extension, and I have a background.html with this code:

var x = "test";

function tabChanged(id, info, tab){
    if(info.status == 'complete'){
        chrome.tabs.executeScript(id, {code:"try{alert(x);}catch(e){alert(e);}"}, null);
    }
}

chrome.tabs.onUpdated.addListener(tabChanged);
chrome.tabs.getAllInWindow(null,function(tabs){
    for(var index=0; index < tabs.length; index++){
        chrome.tabs.executeScript(tabs[index].id, {code:"try{alert(x);}catch(e){alert(e);}"}, null);
    }
});

But variable "x" is always undefined inside executeScript.

How can I get/set x from executeScript? Without using messaging.

KAdot · Accepted Answer · 2012-05-22 19:52:11Z

3

Content scripts executes in context of web page. See Content Scripts section in Chrome docs for more information.

If you want to pass string variable from background page to chrome.tabs.executeScript you must do something like this:

var x = "test";
chrome.tabs.executeScript(id, {code:"var x = '"+x+"'; try{alert(x);}catch(e){alert(e);}"},null);

If you want to modify variable, you have only one way - messaging:

var x = 1;
console.log('x=' + x);

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    console.log(request);
    if(request.command == 'setVar') {
        window[request.name] = request.data;
    }
});

chrome.browserAction.onClicked.addListener(function() {
    var code = "chrome.extension.sendRequest({command: 'setVar', name: 'x', data: 2});";
    chrome.tabs.executeScript(null, {code:code});
    window.setTimeout(function(){console.log('x=' + x);}, 1000);
});

edited May 22, 2012 at 19:52

answered May 22, 2012 at 18:51

KAdot

2,09714 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Harzs Over a year ago

Do you have any sample on how to modify the variable?

James Harzs Over a year ago

Well you said is the only way so yes.

KAdot Over a year ago

Check it, but i think it's better to create content script and communicate with background page from it.

Carson · Accepted Answer · 2021-10-01 05:56:55Z

0

For chrome Chrome 92+, you can use args

chrome.tabs.query({active: true, currentWindow: true}).then(([tab])=>{
  const para = "Hello world!!!"
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: (args) => {
      alert(args)
    },
    args: [para]
  })
})

or you can use the chrome.storage

{
  "manifest_version": 3,
  "permissions": [
    "storage",
    "activeTab",
    "scripting"
  ]
}

chrome.storage.sync.set({msg: "hello world"})
chrome.tabs.query({active: true, currentWindow: true}).then(([tab])=>{
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: () => {
      chrome.storage.sync.get(['msg'], ({msg})=> {
        console.log(`${msg}`)
        alert(`Command: ${msg}`)
      })
    }
  })
})

Update for pass functions in args is OK?

You can't

Neither Storage nor Args, they both can't accept the function parameter.

Example:

const myObj = {
  msg: "Hi",
  myNum: 1,
  myFunc: ()=>{return "hi"},
  myFunc2: function() {return ""}
}

chrome.storage.sync.set({
  msg: "my storage msg",
  myObj,
})

chrome.tabs.query({active: true, currentWindow: true}).then(([tab])=>{
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: (para1, para2MyObj) => {
      console.log(para1) // Hello
      console.log(JSON.stringify(para2MyObj)) // {"msg":"Hi","myNum":1} // myFunc, myFunc2 are missing. You can't get the variable if its type is function.
      chrome.storage.sync.get(['msg', "myObj"], ({msg, myObj})=> {
        console.log(`${msg}`) // "my storage msg"
        console.log(JSON.stringify(myObj)) // {"msg":"Hi","myNum":1}
        alert(`Command: ${msg}`)
      })
    },
    args: ["Hello", myObj]
  })
})

edited Oct 1, 2021 at 5:56

answered Aug 2, 2021 at 13:42

Carson

8,8902 gold badges62 silver badges62 bronze badges

3 Comments

xjlin0 Over a year ago

can we pass functions in args like args: [function1, function2] and expect functions working there?

Carson Over a year ago

Hi @xjlin0, I updated my answer hope it will be helpful for you.

xjlin0 Over a year ago

Thanks, I ended up writing those functions as well as my main function in a separated js file, and include that js file by files: ['filename.js'] under executeScript instead of function: mainFunction.

Partial Science · Accepted Answer · 2014-08-24 20:09:25Z

-1

The reason your variable is undefined is because you are referencing your variable inside of a string so you can just simply do this:

var yourVar = "your variable"
   //define your variable
chrome.tabs.executeScript({code: 'Your code here' + yourVar + ';}'})
   //then format it like this ({code: "Your code as a string" + your variable + "code"})

and if you want to change the variable later than just do the same thing but with your new variable, it's pretty straight forward

edited Aug 24, 2014 at 20:09

answered Aug 21, 2014 at 20:57

Partial Science

3282 silver badges6 bronze badges

1 Comment

Partial Science Over a year ago

I don't see how that would solve the issue even remotely, and for the same reason the problem exists in the first place. When you use chrome.tabs.executeScript anything in ({code: }) is run in the page and if you simply use a variable it will check the current website for the variable not your script so my work around was to create a string with my variable then eval that so its is no longer a variable but rather part of the string which is then run

Collectives™ on Stack Overflow

Getting variables outside executeScript in chrome extension

3 Answers 3

3 Comments

Update for pass functions in args is OK?

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Update for pass functions in args is OK?

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related