Turn Off Youtube Annotations Using JavaScript

Question

There’re currently three ways I know of, to disable annotations in youtube videos:

1. You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
2. You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
3. You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).

Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.

I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.

Answer 1

Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.

var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created

var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
  if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
    all_labels[i].click(); // and in that case, click it
  }
}