1

I am not asking a question because I finally solved it, but I will publish it since I spent more han 3 hours trying to figure it out.

SITUATION

I am developing a Chrome Extension and want to allow the user to change Chrome settings through the "options.html" page.

The extension loads the Current Configuration as an Object options.js:

let myConfiguration = new Object()
myConfiguration = getCurrentConfig()

If I call my variable myConfiguration within my options.js, I get an empty Object:

console.log(myConfiguration)
// Output: {}

If I call my variable from devtools I get the Object:

console.log(myConfiguration)
// Output: {key1: value1, key2: value2,...}

This drove me nuts. See answer below.

Vitrvm
  • 17
  • 2
  • The console is async. This is a confusing concept. But essentially when you console log an object, your logging a reference. When your browser gets around to showing the log, it evaluates the contents of the object at that point, which is at minimum a full event loop later. https://stackoverflow.com/a/23392650/3389900 – Trevor Jan 16 '20 at 21:21
  • 1
    A hint how structure this question. Remove the solution part and put it in an answer instead. You can answer your own questions. – nalply Jan 16 '20 at 21:46
  • 1
    Welcome to StackOverflow dear @Vitrvm, please just ask your question and remove the solution part. – AmerllicA Jan 16 '20 at 21:49
  • Thank you for your help. Will fix the question/answer this afternoon. – Vitrvm Jan 17 '20 at 14:19

1 Answers1

0

Solution

The problem is that when I call the variable from the options.js file it still has not been assigned its value. But when I check the console on devtools my variable has an assigned value.

The solution is to call the function that assigns the variable its value from a new "js" file and place that file before de body tag on the options.html page.

I hope this helps somebody from spending 3 hours playing around with the javascript code.

Vitrvm
  • 17
  • 2