0

I am writing a Google Chrome extension. I don't know JavaScript and I'm trying to identify whether the "dislike" button is active (means blue, because it has been clicked by me at some point and therefore marks that I don't like the video) element in a YouTube video page.

I tried various ways but I am hopeless. A few of my attempts:

//result = document.querySelector("path[d]");
    //var something = document.querySelector('[d=M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" class="style-scope yt-icon]');

Can somebody help me? Interestingly I only find this attribute when inspecting the page, if I look at the page source it't not even present in the page (I have no web development knowledge, I suspect it's some dynamic trick?).

Edit: I use the following at the beginning of my chrome extension background script to make sure the page is loaded:

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {  

if (changeInfo.status == 'complete') {
    if (tab.url.indexOf("youtube.com") != -1) {
Arturas M
  • 4,120
  • 18
  • 50
  • 80

2 Answers2

1

As long as YouTube doesn't change things, you can take advantage of the aria-label attribute of button elements.
The one you are looking for starts with "dislike" ("dislike this video along with 89 other people" - the number will probably vary, the rest - probably not).
Try this:

for(var btn of document.getElementsByTagName("button"))
  if(btn.getAttribute("aria-label"))
    if(btn.getAttribute("aria-label").includes("dislike"))
      console.log(btn);

Instead of console.log(btn) you can use btn.click().

iAmOren
  • 2,760
  • 2
  • 11
  • 23
0

Try this:

var dislikeButtonElement = document.querySelector("#top-level-buttons > ytd-toggle-button-renderer").nextElementSibling;
if(dislikeButtonElement.classList.contains("style-default-active")){
    //Dislike button active
    alert("Disliked Video");
}

Be aware that this will only work after the page has fully loaded as YouTube loads almost everything dynamically. On a slower connection, the video may be playing before these buttons have loaded

Dcdanny
  • 469
  • 2
  • 8
  • Thanks so far. This looks really promising, but somehow it won't find anything with the query. I tried var document.querySelector(".ytd-menu-renderer"); and document.querySelector("#top-level-buttons"); but still null. I think I am ensuring the page is loaded - I updated my post to show the code snipped I'm using to check if the page is loaded. But somehow it's missing that part and won't find anything. What's the trick here? – Arturas M Jul 18 '20 at 19:55
  • Try opening dev tools whilst on a youtube video and paste this into the console. If it works for you there too, its likely your code is trying to find the button before it exists – Dcdanny Jul 18 '20 at 20:04
  • Yep, it's definitely not null when done from the console. Thanks for showing me the console btw. Hmm, I enhanced the condition with tab checking if (changeInfo.status == 'complete' && tab.status == 'complete') - but still the same. I guess I'll have to search a bit more on how to limit it on properly loaded. Thanks so far. In case you also happen to know how to do that, let me know, thx. – Arturas M Jul 18 '20 at 20:19
  • This would probably be useful for that: https://stackoverflow.com/questions/32810912/event-fired-by-youtube-when-video-page-is-loaded – Dcdanny Jul 18 '20 at 21:33