如何使用Tampermonkey移除首页关联详情页含指定标签的文章

场景1：浏览器用户自用（油猴脚本方案） #

直接在浏览器安装油猴脚本即可实现需求，无需修改站点代码，实现逻辑如下：

1. 页面加载完成后遍历所有首页文章条目
2. 异步拉取每个文章对应的详情页内容
3. 解析详情页DOM判断是否存在military标签
4. 匹配到标签的文章直接从首页移除

完整脚本代码：

// ==UserScript==
// @name         移除首页军事类文章
// @match        *://替换成你的首页域名/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';
    // 检测并移除文章的公共方法
    function checkAndRemoveArticle(article) {
        const detailLink = article.querySelector('a[rel="bookmark"]').href;
        GM_xmlhttpRequest({
            method: 'GET',
            url: detailLink,
            onload: function(res) {
                const doc = new DOMParser().parseFromString(res.responseText, 'text/html');
                const hasMilitary = !!doc.querySelector('a[title="military"][rel="tag"]');
                hasMilitary && article.remove();
            }
        });
    }

    // 页面加载完成后先处理已渲染的文章
    document.querySelectorAll('.NewsArticle').forEach(checkAndRemoveArticle);

    // 适配无限滚动加载的场景：监听新插入的文章节点
    const articleListContainer = document.body; // 建议替换成你站点实际的文章列表容器选择器，性能更好
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mut => {
            mut.addedNodes.forEach(node => {
                node.nodeType === 1 && node.classList.contains('NewsArticle') && checkAndRemoveArticle(node);
            })
        })
    });
    observer.observe(articleListContainer, { childList: true, subtree: true });
})();

注意事项 #

• 脚本内的@match规则需要替换成你实际访问的首页域名，否则脚本不会触发
• GM_xmlhttpRequest是油猴提供的跨域请求API，不受站点跨域策略限制，如果用普通fetch请求遇到跨域报错直接换成该API即可
• 建议将代码中的articleListContainer替换成站点实际的文章列表外层容器的选择器，减少监听范围提升性能

场景2：站点开发者原生实现方案 #

如果你是该站点的开发人员，更推荐直接在代码层面改造，性能远高于前端二次请求检测：

• 服务端渲染场景：渲染首页文章列表时直接关联查询每篇文章的标签，包含military标签的文章直接不输出对应DOM节点即可
• 前后端分离场景：后端在返回文章列表接口时，在每篇文章的返回字段中新增标签列表，前端渲染时直接过滤掉带military标签的文章即可，无需额外发起二次请求

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