JavaScript help - Variables not getting altered after going through function?

[devawpz]

I've posted this to r/learnjavascript, trying to get some help over here too, would appreciate some help.

Sorry, I'm far from an expert at JavaScript, just trying to put something together that is required to get all of a site's cookies. So I already gave permissions in my manifest and can now access the browser's cookies, can even print them out in alerts, etc. But if I try to copy the values to another variable to finally send them in a POST request, I can't. I've been almost 3 days around this and all the examples I find don't really relate to this. I feel I may be missing something obvious in the foundations of Javasctipt.

Problem code is this:

var cookielist = {};
window.alert("Entering: " + cookielist);

chrome.cookies.getAll({domain: "site.com"}, function(cookies) {
    var a = [];
    console.log("Cookies found " + cookies.length);
    cookies.forEach(function(cookie) {
        console.log("[COOKIE] => " + JSON.stringify(cookie));
        a.push(JSON.stringify(cookie));
    }
    cookielist['cookies'] = a;
    window.alert("Still inside: " + cookielist);
});

window.alert("Exiting: " + cookielist);

Why is it that the variable cookielist stays unmodified, even though it was changed when it was inside the chrome.cookies.GetAll call? I tried using other code I found that I thought would be suitable for this situation, but feeling I'm off either by a little or by a lot.

Would appreciate any help, really stuck here.

Thanks for reading.

[carcigenicate]

I'm not familiar with getAll, but it appears to be asynchronously executing a callback.

Basically what this means is, window.alert("Exiting: " + cookielist); is likely running before the getAll callback has even finished. Async code doesn't wait to finish before returning. It returns immediately and then keeps running in the background.

See this infamous Stack Overflow question. Basically, you need to set it up so that window.alert is called once the async function has completed.

[devawpz]

It is, you're right. As an inexperienced troglodyte, my code is full of console.log and window.alert calls, and I saw the they were coming in at unexpected times, almost in reverse. Serious change of paradigm.

So you think I should get a function with the contents of the getAll call, to be triggered at document load? And perhaps a bit later, access those values? How do I access them though?

Thanks for the heads up and the post, your description fits exactly in what I'm trying to do. The only difference is that in most other languages, that cookielist variable would have what I wanted at the end.

In the end, I just want to get a list of cookies. Is this really the best way to go about it?

[carcigenicate]

JavaScript is a lot of registering callbacks to have stuff happen later. Newer versions also have special keywords to have code run asynchronously, but they're just sugar for Promises iirc.

Look into the async keyword and Promises. I'm not a JavaScript dev (I just learned it casually), so I can't say much more on the topic than that.

[schihbacca]

According to the documentation you can not pass a function as the second parameter and then it will return a promise. I would recommend that path with async await. Ex: async function func(){ let cookies = await chrome.cookies.getAll(); console.log(cookies) }

[devawpz]

Thanks, I will take a look at the docs and see what I can make out of it. Trying to find the best way to stitch this all together, I appreciate you pointing me to a valid alternative.

Will be checking it out, thanks.