JavaScript 不会使音频静音 - 需要使用 mutationobserver 删除音频标签

Question

我尝试使用以下用户脚本从某个网站删除所有音频：

// ==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 正是我需要更好地应对此问题的方法。

这个变异观察器怎么写？我从来没有写过一个突变观察者，我觉得这个例子会很短而且很基础，这正是我需要体验我刚刚描述的逻辑的代码上下文的东西，我非常感谢任何愿意的人尝试向我和其他遇到类似问题的人展示它。

Answer 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});
}

JavaScript 不会使音频静音 - 需要使用 mutationobserver 删除音频标签

Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed

javascript

html5-audio

mutation-observers