動手寫個 Youtube “自動按讚”插件吧!

簡介

覺得影片都要點讚很麻煩嗎? 沒問題，這插件為你解決這個問題，讓這世界充滿更多的歡樂與愛，只要進到影片的頁面，這個插件就會幫你自動點讚 👍

功能說明

• 剛進到影片頁面 or 於Youtube頁面中點擊任一影片
• 在一段時間後(此教學範例為3秒)為該影片自動點讚

程式詳解

• 先寫設定

const WAIT_FOR_ELEMENTS_LOADING_TIMEOUT = 3000; // 3000毫秒的等待，等元件加載完

• 註冊監聽網址的變化

  關於這部分的解說，可以看這篇文章:
  https://phpcoder.tech/detect-url-change-in-javascript-without-refresh/

(() => {
  let prevUrl = location.href;
  const observer = new MutationObserver(() => {
    console.log('document elements changed')
    const currentUrl = location.href;
    if (prevUrl !== currentUrl) {
      window.dispatchEvent(new CustomEvent('locationchange', {
        detail: {
          currentUrl,
        },
      }))
      prevUrl = currentUrl;
    }
  }).observe(document, {
    subtree: true,
    childList: true,
  })
})();

• 找尋youtube影片的按讚按鈕的元件

function findYTLikeButton() {
  const menuContainer = document.getElementById('menu-container');
  const buttonWrapper = menuContainer.getElementsByTagName('ytd-toggle-button-renderer')[0];

  if (!buttonWrapper) return null;
  const button = buttonWrapper.querySelector('button#button');
  return button;
}

• 檢查使用者是否已經按過讚

function checkIsLiked(buttonEl) {
  const pressed = buttonEl.ariaPressed;
  if (pressed === 'true') return true;
  return false;
}

• 統整以上之"主功能”

function main() {
  const likeButtonEl = findYTLikeButton();
  if (!likeButtonEl) return;

  const isLiked = checkIsLiked(likeButtonEl);
  if (isLiked) return;

  likeButtonEl.click();
  console.log(likeButtonEl);
  console.log('Auto liked :)')
}

• 最後，監聽網頁之載入 以及 網頁之切換

const timeoutLikeVideo = () => {
  setTimeout(() => {
    main();
  }, WAIT_FOR_ELEMENTS_LOADING_TIMEOUT)
}

window.addEventListener('locationchange', timeoutLikeVideo)
window.addEventListener('popstate', timeoutLikeVideo)
window.addEventListener('load', timeoutLikeVideo)

完整範例

const WAIT_FOR_ELEMENTS_LOADING_TIMEOUT = 3000;

(() => {
  let prevUrl = location.href;
  const observer = new MutationObserver(() => {
    console.log('document elements changed')
    const currentUrl = location.href;
    if (prevUrl !== currentUrl) {
      window.dispatchEvent(new CustomEvent('locationchange', {
        detail: {
          currentUrl,
        },
      }))
      prevUrl = currentUrl;
    }
  }).observe(document, {
    subtree: true,
    childList: true,
  })
})();

function findYTLikeButton() {
  const menuContainer = document.getElementById('menu-container');
  const buttonWrapper = menuContainer.getElementsByTagName('ytd-toggle-button-renderer')[0];

  if (!buttonWrapper) return null;
  const button = buttonWrapper.querySelector('button#button');
  return button;
}

function checkIsLiked(buttonEl) {
  const pressed = buttonEl.ariaPressed;
  if (pressed === 'true') return true;
  return false;
}

function main() {
  const likeButtonEl = findYTLikeButton();
  if (!likeButtonEl) return;

  const isLiked = checkIsLiked(likeButtonEl);
  if (isLiked) return;

  likeButtonEl.click();
  console.log(likeButtonEl);
  console.log('Auto liked :)')
}

const timeoutLikeVideo = () => {
  setTimeout(() => {
    main();
  }, WAIT_FOR_ELEMENTS_LOADING_TIMEOUT)
}

window.addEventListener('locationchange', timeoutLikeVideo)
window.addEventListener('popstate', timeoutLikeVideo)
window.addEventListener('load', timeoutLikeVideo)