0

I have been reading tons and tons but certain things I am just not seeming to be able to grasp my head around. Its almost as if chrome extensions break standard javascript.

So I am trying to call variables in one function that have been defined globally and set within another function. It should be standard js 101 type stuff and yet its not working.

Example:

// define global variables
var username;

// create a function that sets the variables to a value
function sessionCheckup() {
  chrome.storage.sync.get(['username'], function(data){ 
    username = data.username;
  });
}

// a function that should return the variables. 
function returnVariables () {
  chrome.tabs.query({active: true,currentWindow: true}, function(tabs) {
    sessionCheckup();
    console.log(username);
  });
}
returnVariables(); //console.log returns undefined

However if I do this it works just fine.

// define global variables
var username;

// create a function that sets the variables to a value
function sessionCheckup() {
  chrome.storage.sync.get(['username'], function(data){ 
    username = data.username;
  });
}
sessionCheckup();

// a function that should return the variables. 
function returnVariables () {
  chrome.tabs.query({active: true,currentWindow: true}, function(tabs) {
    console.log(username);
  });
}
returnVariables(); //console.log returns the username variable value

Then continuing on with what I perceive as weird behavior this also doesn't work.

// define global variables
var username;

// create a function that sets the variables to a value
function sessionCheckup() {
  chrome.storage.sync.get(['username'], function(data){ 
    username = data.username;
  });
}

// a function that should return the variables. 
function returnVariables () {
  chrome.tabs.query({active: true,currentWindow: true}, function(tabs) {
    chrome.storage.sync.get(['username'], function(data){ 
      username = data.username;
    });
    console.log(username);
  });
}
returnVariables ();//console.log returns undefined

In standard javascript (not chrome extension) all three of these would return the same result.

So as the topic suggests I am really trying to understand this and get my head around it. How exactly do I return the variable definitions from the first function inside the second function?

Bruce
  • 1,039
  • 1
  • 9
  • 31
  • *"In standard javascript (not chrome extension) all three of these would return the same result."* What would you expect it to return? I don't think you can make that claim. It looks like `chrome.storage.sync.get` is an asynchronous call, so it seems reasonable that you get `undefined` in the first and second case (`username` isn't set yet at the time `console.log` is called). The reason why the second case works is likely due how these API use the event loop (i.e. the callback in `sessionCheckup` is added before the callback in `returnVariables`). – Felix Kling Mar 02 '21 at 20:06
  • https://jsfiddle.net/eawq69yp/ I would expect it to act more like this. The third one is what is really perplexing to me, as I am not sure I understand how I can set variables in one function and call them in another if even nesting doesn;t work. – Bruce Mar 02 '21 at 20:16
  • Keep in mind that you are setting the variable not inside `sessionCheckup` but in a function that you pass to `chrome.storage.sync.get`. You don't know when that function will be called! Maybe [my post](https://felix-kling.de/blog/2019/javascript-callbacks-misconceptions.html) will help with understanding callbacks. Here is a more appropriate example for your case: https://jsfiddle.net/9wk0v4st/. If you make the corresponding adjustments you can replicate all three scenarios. This demonstrates that this is an issue with not handling async code properly, not Chrome extensions. – Felix Kling Mar 02 '21 at 20:23
  • ty I have much to read. :) – Bruce Mar 02 '21 at 20:24

0 Answers0