2

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);
3
  • I would recommend the message passing method
    – wong2
    Oct 26, 2011 at 3:38
  • @wong2 ok, do you mind sketching roughly who will be passing the message? Do I need to create a content script? Thanks.
    – Zeynel
    Oct 26, 2011 at 3:48
  • I don't think you need to create content script, they're used to modify the DOM of a web page.
    – wong2
    Oct 26, 2011 at 7:26

1 Answer 1

4

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
}
6
  • thanks, now I am trying to do the same without using localStorage and passing the saved email from options page to background page with chrome.extension.getBackgroundPage() but I could not solve the scope of the returned variable which stays inside the function in background page. I will ask another question about this. Thanks again with your help.
    – Zeynel
    Oct 26, 2011 at 14:19
  • I am back using your answer but in the background page the "user" variable coming from options page is inside the refreshUser() so it is local to that function. But that defeats the purpose because I need to use the "user" outside the refreshUser(). Do you know how I can do this.
    – Zeynel
    Oct 26, 2011 at 17:50
  • 1
    @Zeynel In your update it is global, it would be local if you wrote var user=.... You code is not clear, what are you trying to achieve? Why are you calling refresh() from background page if it is supposed to be called from options?
    – serg
    Oct 26, 2011 at 18:03
  • serg, thanks for your comment. I updated the code. Now when options page calls refreshUser() newUser variable inside the function is updated but outside the function newUser is still null. What am I doing wrong?
    – Zeynel
    Oct 27, 2011 at 14:50
  • 1
    @Zeynel background page is executed when your extension gets enabled, so code outside is executed before refresh() is called from options. You would probably want to wrap outside code that needs user into some other function and call it inside refresh() so user is set.
    – serg
    Oct 27, 2011 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.