Home/ Questions/Q 6737687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:16:43+00:00

This question is about a similar javascript scope problem that I asked yesterday .

  • 0

This question is about a similar javascript scope problem that I asked yesterday. I hope you can help me resolve this issue.

I am working with a Chrome extension. options.html saves to localStorage a new user email as “user” and calls refreshUser() function in background.html:

//save entered gmail address
document.getElementById("save").addEventListener(
    "click", function ()
    {
        var user = document.getElementById("getEmail").value;
        localStorage.setItem("user", user);
        chrome.extension.getBackgroundPage().refreshUser();
    } , false)

Then I save the email as “newUser” in background.html. The problem is that newUser is updated inside refreshUser() but it is null outside refreshUser():

newUser = localStorage.getItem("user");
console.log("first newUser " + newUser);
//newUser=null

function refreshUser () 
{
    newUser = localStorage.getItem("user");
    console.log("newUser inside of refreshUser function " + newUser);
    //newUser is updated with saved email in localStorage
}

console.log("newUser after refreshUser() " + newUser);
//newUser=null

Why is newUser local to refreshUser() while it is defined without the var keyword? Thanks for your help!

Update

In response to pimvdb’s answer I copy the code for my background.html. If I want to use newUser in formData as indicated which function do I need to call inside refreshUser()? Thanks.

<html>
<script>

newUser = localStorage.getItem("user");
console.log("first newUser " + newUser);

function refreshUser () 
{
    newUser = localStorage.getItem("user");
    console.log("newUser inside of refreshUser function " + newUser);
}

console.log("newUser after refreshUser() " + newUser);

//I want to user newUser below in formData  
chrome.browserAction.onClicked.addListener(function(tab) 
{
    chrome.tabs.getSelected(null, 
    function(tab) 
    {
        // Send a request to the content script.
        chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, 
        function(response) 
        {
            var firstParagraph = response.dom;

            var formData = new FormData();
            formData.append("url", tab.url);
            formData.append("title", tab.title);
            formData.append("pitch", firstParagraph);
            formData.append("extension_user", "abc@gmail.com");
            //I want to user newUser here:
            //formData.append("extension_user", newUser);
            console.log("newUser inside formData: " + newUser)

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
            xhr.onreadystatechange = 
            function (aEvt) 
            {
                if (xhr.readyState == 4) 
                {
                    if (xhr.status == 200)
                    { 
                        console.log("request 200-OK");
                        chrome.browserAction.setBadgeText ( { text: "done" } );
                        setTimeout(function () 
                        {
                            chrome.browserAction.setBadgeText( { text: "" } );
                        }, 2000);
                    }
                    else
                    {
                        console.log("connection error");
                        chrome.browserAction.setBadgeText ( { text: "ERR" } );
                    }        
                }        
            };
            xhr.send(formData);
        }); //chrome.tabs.sendRequest
    });
});


</script>
</html>

Update to answer pimvdb’s comment:

The problem I am having is that background.html is loaded when the browser is opened, but the email is saved in options.html afterwards. So refreshUser() tells background.html to get the newUser from localStorage. Then I need to use “newUser” in formData like this: 

formData.append("extension_user", newUser);

But the way I have it now “newUser” outside refreshUser() is null. What am I missing?

Update to clarify why some logs are not showing in console

This is what I do:

1. I reload the extension and start with localStorage empty
2. I use the extension to save a bookmark
3. all 3 logs are null as expected

 first newUser null
 newUser after refreshUser() null
 newUser inside formData: null
 request 200-ok

4. now I save user email in options as abc@gmail.com
5. now I use the extension again to save a bookmark
6. now refreshUser is executed and the log inside the function says abc@gmail.com and formData log says abc@gmail.com

newUser inside of refreshUser function abc@gmail.com
newUser inside formData: abc@gmail.com
request 200-OK

7. but what confuses me is that now the first 2 logs do not show in the console. Why?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s global, but you’re accessing it at the wrong time.

    function refreshUser () { ... } is just a function declaration; nothing is really executed. Both logs outside that declaration run immediately, at which point the localStorage item has not been set (i.e. is null).

    Your wording “newUser after refreshUser()” is rather ambigious. It’s indeed executed after the declaration, but newUser has not been changed at all, so both logs outside the function log null. You cannot access it at the time it has not been set yet what you seem to be expecting.

    The following should log it fine, since the global variable has been updated. Just call it after setting it inside refreshUser.

    function otherFunction() {
    // logs the global variable 'newUser', which is thus indeed global
    console.log("newUser inside otherFunction: " + newUser);
}

function refreshUser () 
{
    newUser = localStorage.getItem("user");
    otherFunction();
}
    • 0