Как настроить громкость видео на Youtube?

Question

Я создаю расширение, которое отключает автовоспроизведение видео при переходе на канал Youtube. Он может выполнять content.js при переходе на канал Youtube и выбирать видео, но как я могу установить громкость видео? Установка video.volume = 0 работает не так, как я думал.

Фоновый скрипт:

'use strict';

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

    if (changeInfo.status == 'complete') {
        const site = tab.url.split('/');

        let domain = site[2];
        let page = site[3];

        if (page === 'channel' || page === 'user') {
            chrome.tabs.sendMessage(tab.id, {'message': 'loaded_channel_page'});
        }
    }
});

Контентный скрипт:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if (request.message === 'loaded_channel_page' || document.readyState != 'loading') {

        let newVolume = 0;

        document.addEventListener('yt-navigate-finish', () => {
            setTimeout(mute, 2000);
        });

        function mute() {
            let video = document.querySelector('.html5-main-video');
            video.volume = newVolume;
        }
    }
})

Answer 1

Youtube не отслеживает прямые изменения свойств видеоэлемента DOM, он использует свою собственную оболочку для элемента #movie_player, который предоставляет функцию регулировки громкости в контексте страницы , к которой мы не можем получить прямой доступиз скрипта контента, поэтому нам нужно запустить его в элементе <script>:

// direct call
inPage(setVolume, 0);
// delayed call
setTimeout(inPage, 2000, setVolume, 0);

// range is 0 - 100
function setVolume(vol) {
  document.getElementById('movie_player').setVolume(vol);
}

function inPage(fn, ...args) {
  const script = document.createElement('script');
  script.textContent = `(${fn})(${JSON.stringify(args).slice(1, -1)})`;
  document.documentElement.appendChild(script);
  script.remove();
}