如何用UserScript移除广告？我的代码调用.remove()和display:none无效求排查

我帮你排查了代码里的几个关键问题，咱们一个个拆解：

1. 选择器语法错误 #

你代码里的几个querySelectorAll选择器写法有问题：

• 比如.abp abp-container left-abp，空格代表后代选择器，意思是找拥有.abp类的元素下的<abp-container>标签，再找这个标签下的<left-abp>标签——但显然你要找的是同时拥有这几个类的元素，正确写法应该是.abp.abp-container.left-abp（每个类前加.，不要空格）。
• 同理，.abp abp-container right-abp要改成.abp.abp-container.right-abp。

另外，document.getElementsByName('abp leaderboard-abp')你要确认目标元素的name属性确实是abp leaderboard-abp（带空格），如果是类属性的话，应该用document.getElementsByClassName('abp leaderboard-abp')或者document.querySelector('.abp.leaderboard-abp')。

2. 未处理元素不存在的情况 #

你直接通过[0]取元素，一旦目标元素不存在（比如选择器错了、元素还没加载），就会抛出Cannot set property 'style' of undefined的错误，导致后续代码全部终止执行。

正确的做法是先判断元素是否存在，再执行隐藏操作：

var adTop = document.getElementsByName('abp leaderboard-abp')[0];
if (adTop) { // 先确认元素存在
  adTop.style.display = "none";
}

3. 元素加载时机不匹配 #

很多网站的广告是动态加载的（比如通过AJAX异步渲染、延迟加载），如果你的UserScript在DOM完全加载前就运行了，自然获取不到还没生成的广告元素，设置样式也就无效。

解决方法有两种：

• 方法一：延迟脚本执行时机
  在UserScript的元数据里添加@run-at document-end，确保脚本在DOM加载完成后再执行：

// ==UserScript==
// ...其他元数据
// @run-at       document-end
// ==/UserScript==

• 方法二：监听DOM变化（应对动态加载的广告）
  用MutationObserver监听DOM的变化，当广告元素被添加到页面时，立刻执行隐藏操作：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查新增节点里的广告元素
    const adLeft = document.querySelectorAll('.abp.abp-container.left-abp')[0];
    if (adLeft) adLeft.style.display = 'none';
    
    // 同理处理其他广告元素
  });
});
// 监听body下所有子节点的变化
observer.observe(document.body, { childList: true, subtree: true });

修改后的完整代码示例 #

// ==UserScript==
// @name         Remove Website Ads
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove annoying ads from target website
// @author       You
// @match        https://你的目标网站域名/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 初始化隐藏已加载的广告
    const hideAds = () => {
        // 顶部广告
        const adTop = document.getElementsByName('abp leaderboard-abp')[0];
        if (adTop) adTop.style.display = 'none';

        // 底部广告
        const adBt = document.querySelectorAll('.profile-ads-container')[0];
        if (adBt) adBt.style.display = 'none';

        // 左侧广告（修复选择器）
        const adLeft = document.querySelectorAll('.abp.abp-container.left-abp')[0];
        if (adLeft) adLeft.style.display = 'none';

        // 右侧广告（修复选择器）
        const adRight = document.querySelectorAll('.abp.abp-container.right-abp')[0];
        if (adRight) adRight.style.display = 'none';
    };

    // 先执行一次，隐藏已加载的广告
    hideAds();

    // 监听DOM变化，处理动态加载的广告
    const observer = new MutationObserver(() => {
        hideAds();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();

内容的提问来源于stack exchange，提问作者benz