0

Here is my code in a content script, with MV3:

var checkVariable;

chrome.storage.sync.get('mykey', function(result) {
    checkVariable = result.mykey; 
    alert ("1: " + checkVariable);
});

alert ("2: " + checkVariable);

if (checkVariable === true) {
 // Various stuff
}

The second alert message executes first and returns undefined then the first alert executes returning, the correct value. The problem is that the if condition also executes before retrieving the correct value from storage.

What's the way to run this sequentially?

Costas
  • 459
  • 3
  • 15
  • Use the async+await syntax instead of callbacks. – wOxxOm Dec 24 '21 at 16:19
  • I used async and it did work. I have to ask: Is this the standard method for checking users' options in a Chrome extension or is there another way that monitors the settings in order to act according to their values? I'm asking because in a content script the settings' values won't get rechecked until reloading the page, so they don't take effect immediately. – Costas Dec 24 '21 at 17:19
  • Use chrome.storage.onChanged listener. – wOxxOm Dec 24 '21 at 17:24
  • For calling the async function or without the async function in the case I use the listener? – Costas Dec 24 '21 at 17:29
  • Use the listener in addition to your current code. The listener runs only on change. – wOxxOm Dec 24 '21 at 17:31
  • It works only when changing the variable to true. For some reason setting it from false to true does not take any effect. Do I have a mistake? `myAsyncFunction(); // Called for initial execution` `chrome.storage.onChanged.addListener((changes, area) => { if (area === 'sync' && changes.myKey) { myAsyncFunction(); } });` – Costas Dec 24 '21 at 18:13
  • It means your code in myAsyncFunction is incorrect. – wOxxOm Dec 24 '21 at 18:46
  • That's what I also thought, but when I refresh the page everything happens as expected. All my code in async is wrapped in an if statement: `if (checkVariable === true) { //Doing stuff. }`. When the setting turns to false nothing should happen. Am I wright? Or is the call of the async function before the listener the one that causes the problem? – Costas Dec 24 '21 at 18:50
  • You didn't show the entire code e.g. the part that sets checkVariable. – wOxxOm Dec 24 '21 at 18:54
  • `const readOption = async(key) => { return new Promise((resolve, reject) => { chrome.storage.sync.get([key], function (result) { if (result[key] === undefined) { reject(); } else { resolve(result[key]); } }); }); };` And here is the async function: `async function myAsyncFunction() { let checkVariable = await readOption('mykey'); if (checkVariable === true) { // Doing what should be done. } }` Then I call it twice as I wrote previously. 2nd time in the listener. – Costas Dec 24 '21 at 19:00
  • Seems fine. Use devtools debugger: set a breakpoint inside the listener and change the option, then run the code line by line and see what happens. – wOxxOm Dec 24 '21 at 19:05
  • I used breakpoints. When changing the relevant setting to false, triggered by the onChanged listener the `if (checkVariable === true)` line is executed without running the code in the if statement. There is another listener though in the async function in the if statement that executes on `selectionchange` that gets triggered even when the variable is false. This only happens when I change the setting, without reloading the page. Here's the listener `document.addEventListener('selectionchange', function (e) { //Code }, false);` How do I remove it in the onChanged, when variable's false? – Costas Dec 26 '21 at 09:43
  • It's impossible to tell judging by the comments so ask a new question with a proper [MCVE](/help/mcve). – wOxxOm Dec 26 '21 at 11:09

0 Answers0