Accessing a variable defined in a function, outside the function

Question

MDGM 22 Posting Whiz in Training

15 Years Ago

Hi all,

I'm making some changes to a google chrome extension I made and am having some trouble.

Heres my code on a content script page (removeAttr.js) :

chrome.extension.sendRequest({greeting: "whitelist"}, function(response) {
    var whitelist = response.whitelist;
    console.log(response.whitelist);//working
});
alert(whitelist);//alerts "undefined"

How do I acess the whitelist variable from outside the sendrequest() function?

Iv tried saving it to a window.var variable with no luck. Iv tried creating a div and assigning it's innerHTML as the whitelist variable and getting it later with no luck.

The fact that it's a chrome extension complicates things because i dont actually know if i can create elements from where the script is located.

Can anybody help me?

Max.

google:chrome-os javascript

Edited 13 Years Ago by Dani because: Formatting fixed

4 Contributors
7 Replies
4K Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Dani AI

Generated 1 Year Ago

You are seeing undefined because sendRequest is asynchronous: code after it runs before the callback assigns whitelist. The fix is to continue your logic inside the callback or use a promise/await pattern. Also note that chrome.extension.sendRequest is deprecated; use chrome.runtime.sendMessage instead. See the official migration table and messaging guide. Replace unsupported APIs. Message passing.

Example with a content script and background/service worker:

// content script
(async () => {
  const { whitelist } = await chrome.runtime.sendMessage({ type: "whitelist" });
  // Use whitelist here (not outside)
  alert(whitelist);
})();

// service worker or background page
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === "whitelist") {
    // If you need async work (e.g., read from storage/fetch), do it and then call sendResponse.
    // Return true ONLY when responding asynchronously to keep the channel open.
    // return true;

    sendResponse({ whitelist: ["example.com"] });
  }
});

Avoid trying to stash the value on window or in a DOM node; content scripts run in an isolated world and do not share JS state with the page. That does not solve the timing problem anyway. Content scripts isolated world.

If you want to reuse the value later, persist it and read it asynchronously with chrome.storage:

chrome.storage.local.get("whitelist", ({ whitelist }) => { /* use it */ });

All 7 Replies

qazplm114477 14 Junior Poster

15 Years Ago

Hi all,
I'm making some changes to a google chrome extension I made and am having some trouble.
Heres my code on a content script page () :
chrome.extension.sendRequest({greeting: "whitelist"}, function(response) {
	var whitelist = response.whitelist;
	console.log(response.whitelist);//working
});
alert(whitelist);//alerts "undefined"
How do I acess the whitelist variable from outside the sendrequest() function?
Iv tried saving it to a window.var variable with no luck. Iv tried creating a div and assigning it's innerHTML as the whitelist variable and getting it later with no luck.
The fact that it's a chrome extension complicates things because i dont actually know if i can create elements from where the script is located.
Can anybody help me?
Max.

to use a variable outside a function you need to declare the variable outside a function and run that function.

this short tutorial should help.

PS. please wrap you code with the CODE tags so that it's more easier to read. thanks

qazplm114477 14 Junior Poster

15 Years Ago

you're welcome, I don't think I'll be much help anymore, my knowledge in OOP in javascript is severely minimal. sorry and good luck.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MDGM 22 Posting Whiz in Training · Answer 1 · 2010-09-19T21:23:59+00:00

Hi,

Thanks for the reply. I know about variable scope, i just needed help getting round it.

In the end I just put the rest of my code for the page inside the same function, it required quite a lot of changes to the script but it's all I could do to work around it.

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-09-22T15:55:35+00:00

Max,

Do exactly what qazplm said.

var whitelist; 

chrome.extension.sendRequest({greeting: "whitelist"}, function(response) {
	whitelist = response.whitelist;
	console.log(response.whitelist);//working
});

alert(whitelist);//alerts "undefined"

Airshow

Troy III 272 Posting Pro · Answer 3 · 2010-09-23T01:25:35+00:00

Hi all,
I'm making some changes to a google chrome extension I made and am having some trouble.
Heres my code on a content script page () :
chrome.extension.sendRequest({greeting: "whitelist"}, function whtlst(response) {
var whitelist = response.whitelist;
console.log(response.whitelist);//working
});
alert(whitelist);//alerts "undefined"
How do I acess the whitelist variable from outside the sendrequest() function?
Iv tried saving it to a window.var variable with no luck. Iv tried creating a div and assigning it's innerHTML as the whitelist variable and getting it later with no luck.
The fact that it's a chrome extension complicates things because i dont actually know if i can create elements from where the script is located.
Can anybody help me?
Max.

local variables closures or private variables are ment not to be able to access them globaly but a workaround would be to return the one you need...

chrome.extension.sendRequest({greeting: "whitelist"}, function whtlst(response) {
	var whitelist = response.whitelist;
	console.log(response.whitelist);//working
return whitelist});
//alert(whitelist);//alerts "undefined"

alert(whtlst())

MDGM 22 Posting Whiz in Training · Answer 4 · 2010-09-23T03:09:53+00:00

Ahhh of course, didnt think of that! :) I'll do that in the future. Thanks everybody for the help - it's been a while since I'v used javascript and maintained my chrome extensions :)

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 5 · 2010-09-23T04:42:24+00:00

Inner functions have access to all outer members (and outer-outer, outer-outer-outer, etc. etc. right up to global members) providing their names have not been overridden by a var declaration at any stage in the scope nesting.

This is one of the basic tenets of javascript that must be grasped if we wish to avoid name conflicts and to realise the benefit of closures.

Accessing a variable defined in a function, outside the function

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers