Звук не будет отключен с помощью JavaScript — необходимо удалить аудиотеги с мутациейobserver.

Я попытался использовать следующий пользовательский скрипт, чтобы удалить все аудио с определенного веб-сайта:

// ==UserScript==
// @name        addicto
// @namespace   nms
// @include     http://*
// @include     https://*
// @version     1
// @grant       none
// ==/UserScript==

addEventListener('DOMContentLoaded', ()=>{
  let sites = ['mako.co.il'];
  let href = window.location.href;
  for (let i = 0; i < sites.length; i++) {
    if (href.includes(sites[i])) {
      Array.prototype.slice.call(document.querySelectorAll('audio')).forEach((audio)=>{
        audio.muted = true;
      });
    }
  }

  // If href includes the value of the iteration on the "sites" array, do stuff.
});

Этот код не работал, и я предполагаю, что наблюдение за всеми случайными тегами audio и изменение DOM — это именно то, что мне нужно, чтобы лучше справиться с этим.

Как можно написать этого наблюдателя мутаций? Я никогда не писал наблюдатель мутаций, и я чувствую, что этот пример будет очень коротким и очень простым, и именно это мне нужно, чтобы получить представление о контексте кода логики, которую я только что описал, и я был бы сердечно благодарен всем, кто это сделает. попробуйте показать это мне и другим людям, у которых есть похожая проблема.


person fayalikt    schedule 20.10.2017    source источник
comment
Это может не быть проблемой, но обратите внимание, что ваш скрипт не отключит все возможные источники звука, которые могут быть распространены вкладкой, а только те, которые добавлены внутри DOM как HTMLAudioElement. Он пропустит все HTMLAudioElements, которые не находятся в DOM, все видеоэлементы, все AudioContexts и все вышеперечисленное + добавлено к DOM, если оно находится внутри iframe. Если можно использовать реальное расширение, то может быть проще использовать API chrome.tabs с методом update(tabId, {muted:true})   -  person Kaiido    schedule 20.10.2017


Ответы (1)


  • Перечислите mutations и addedNodes каждой мутации.
  • Перечисление дочерних элементов узла, поскольку мутации объединяются во время загрузки страницы с использованием сверхбыстрого getElementsByTagName вместо сверхмедленного querySelectorAll
  • Не используйте @grant none, который запускает ваш пользовательский скрипт в контексте страницы, если вам действительно не нужен прямой доступ к объектам JavaScript страницы.
  • Используйте @run-at document-start для отключения звука во время загрузки страницы

// ==UserScript==
// @name     addicto
// @include  *
// @run-at   document-start
// ==/UserScript==

const sites = ['mako.co.il'];
if (sites.some(site => location.hostname.includes(site))) {
  new MutationObserver(mutations => {
    for (const m of mutations) {
      for (const node of m.addedNodes) {
        if (node.localName == 'audio') {
          audio.muted = true;
        } else if (node.firstElementChild) {
          for (const child of node.getElementsByTagName('audio')) {
            audio.muted = true;
          }
        }
      }
    }
  }).observe(document, {subtree: true, childList: true});
}
person wOxxOm    schedule 20.10.2017
comment
Мне очень интересно читать, и я собираюсь прочитать еще как минимум 2 или 3 раза, прежде чем внедрять. У меня есть 2 вопроса, пожалуйста. Почему (node.children && node.children[0])? Я имею в виду, если в первой части (node.children) вы переходите ко всем дочерним элементам, почему вы отмечаете первый из них (0) сразу после этого? - person fayalikt; 21.10.2017
comment
Кроме того, что касается // @run-at document-start, это обязательно? Я никогда не использовал его ни в одном из 20 написанных мной сценариев. Я понимаю, что это поведение по умолчанию в любом случае, но, возможно, я ошибаюсь. - person fayalikt; 21.10.2017
comment
1. Текстовые узлы не имеют children, поэтому первая проверка их пропускает, children[0] означает наличие хотя бы одного дочернего элемента 2. document-start означает, что скрипт обрабатывает страницу, так как она все еще загружается. - person wOxxOm; 21.10.2017
comment
Извините, текстовые узлы? Вы имеете в виду textContent? Клянусь, я упускаю этот смысл. - person fayalikt; 21.10.2017
comment
textContent — это удобный метод доступа к фактическим текстовым узлам. - person wOxxOm; 21.10.2017