音頻不會使用JavaScript靜音 - 消除音頻標籤與mutationobserver需要

Question

我試着用以下userscript從某個網站上刪除所有音頻：

// ==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而不是superslow querySelectorAll
• 不要使用@grant none合併，它運行在您的userscript頁面上下文，除非您確實需要直接訪問頁面的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.children && node.children[0]) { 
      for (const child of node.getElementsByTagName('audio')) { 
      audio.muted = true; 
      } 
     } 
     } 
    } 
    }).observe(document, {subtree: true, childList: true}); 
}