What to do if the content script from the extension does not work as it should?

Question

JavaScript

The content script of my extension for the Google Chrome browser looks like this:

document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
console.log(document.getElementsByClassName("audio_page_player_title_performer")[0].childNodes[0].innerHTML);

My extension should work on the vk.com website . The first two lines of this code should "initialize" the dropdown menu with the music playlist,
opening and immediately closing it. This is necessary in order to access the name of the current artist, which I do in the third line.

The problem is that when I open VK , the following error is displayed in the console (everything works only on the music tab ):

Whereas if you sequentially enter these commands into the console, everything works fine:


Please help me solve this problem.
Thanks in advance!

Answer 1

It looks like your third line is called before the handler from the first two has completed.
Set the delay to half a second.

document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
setTimeout(() => {
  console.log(document.getElementsByClassName("audio_page_player_title_performer")[0].childNodes[0].innerHTML);
}, 500);