Question

I am still trying to save a user email entered in options.html to the extension_user variable in background.html as suggested in this answer. I hope someone can help.

In options page I have a textarea id="getEmail" that takes the user email and saves the entered email to localStorage:

//save entered gmail address
document.getElementById("save").addEventListener(
    "click", function ()
    {
        var user = document.getElementById("getEmail").value;
        localStorage.setItem("user", user);
        console.log("gmail id saved as " + user);
    } , false)

Now I want to pick up this email in background.html and save it as “extension_user”. In background.html I have

if (localStorage.getItem("user"))
{
    user = localStorage.getItem("user")
    //localStorage.clear()
    console.log("if(!user): " + user)
    //...    
    // run normal program
    //...
}
else
{
    chrome.tabs.create({url: "/options.html"});
    console.log("options page opened as new tab");
}

What happens is that background page sees the saved “user” only if I reload the extension after I saved the email in options page.

What am I missing?

And is it better to use message passing and send the user email saved in options directly to background page? I appreciate any suggestions to save this user email in background page permanently with or without localStorage. Thanks!

UPDATE by serg’s answer

background.html

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

user = localStorage.getItem("user");
if (!user)
{
    refreshUser(); 
    //user is not defined outside refreshUser()
    console.log("user outside of refreshUser function" + user);
    //run the rest of code here
    //...
}
else
{
    user = localStorage.getItem("user"); 
    console.log("this is the else close")
    //run the rest of code here
    //...

}

UPDATE

@serg I updated the code as follows but I still see that newUser is updated inside the function refreshUser() but it is null outside the function. What am I doing wrong?

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

Update

Following serg’s answer, this works:

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

...

formData.append("extension_user", newUser);

Answer 1

Background page gets loaded when browser starts and remains loaded all the time. When you saved user inside options page, background page doesn’t know that localstorage value has changed, so you need to notify it somehow.

The easiest approach would be calling some method inside background page once user is updated:

//options
localStorage.setItem("user", user);
chrome.extension.getBackgroundPage().refreshUser();

//bg page
function refreshUser() {
    //user in localStorage is updated, read it
}