记一次对可恶站点的抗争

背景

有些网站本身有挺多高质量的内容，但非得走上让人恶心 🤮 的道路，所以在这里记录一下跟他们抗争的历程。

某书

最近想查一些树形结构存储方案，看到一篇某书上的文章，打开一看，简直是震惊啊龙几十年！

用几个词来形容： 内容被忽视，广告粗劣，小黄文占领了主体……

大致如下：

之前某书是一个多么干净、沉浸的文字平台啊，很多程序猿、小文艺都喜欢在上面写写文章，如今……

但无可奈何，这个平台上还是有一些知识遗产，之前积累起来的中文搜索关键词还被这个平台占据着，有时候搜索一些东西还是会被引导这个平台上来，所以……得净化一下……

简单的净化方案

uBlock

这是一个 chrome 插件，可以用于 元素过滤、脚本过滤、多媒体过滤等

插件地址： uBlock Origin

  • 使用元素选择器，把一些恶心的模块干掉

这种方式对 顶部广告、底部广告、底部恶心推荐 都很有效。

但是对右侧的 热门故事 模块几乎无效。因为选择器直接选择时候的选择器是 class 选择器，而 class 名经常可能会发生变化，导致失效，所以我们得找一个更好的元素选择路径。

  • 扒一下前端页面的结构

可以发现，这个网站的生成应该是 next.js 做的服务端渲染，结构很鲜明，role=”main” 的块为页面主体， aside 为侧边栏。

  • 于是我们可以这样操作

选择器为 ##div[role=main] > aside ，效果是这样的：

  • 探索一下另一条路

由于页面的主体是静态的，而页面的推荐内容是动态的，也就意味着一定会发送对应的请求出去，那么 block 这些请求也是一个不错的方式。

于是扒了一下页面请求：

可以发现，这些就是我们最不喜欢的东西，有广告的、恶心推荐的、行为上报的……

之后可以玩一下接口过滤

一番操作下来，舒服多了…… 可以继续看文章了

  • 后记

uBlock 很强大，默认会做一些关键词过滤，例如 ad ，但这个粒度相对较大，有时候会误把一些需要的信息给屏蔽掉，导致个别网站访问失败，或者操作报错 之类的，一般发现你的浏览器 和 别人的浏览器 对某个页面的表现不一致时，建议把 uBlock 关上试试，如果真是因为 uBlock 过滤的问题，那就把这个站点加个白名单。

另外，也可以用下面这种方式 👇👇👇

TamperMonkey

油猴是一个页面脚本管理工具，可以自定义任何的 js， 这需要写一些简单的 js 代码，实现的逻辑和 uBlock 一样，去除一些页面特定的元素。

找了一下油猴的脚本社区，搜了一下，发现之前有一个哥们儿用 jquery + class 选择器做的，估计已经用不了了，我顺手写一个吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// ==UserScript==
// @name         RemoveJianShuNauseaThings
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  简书之堕落，让人遗憾，哀其不幸，怒其不争，为了不让广大作者的资产跟着陪葬，去除污染源，以正视听。 简书去广告。简书。广告。去除热门推荐。jianshu。JianShu。
// @author       longalong
// @match        *://www.jianshu.com/p/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=jianshu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function do_track() {
        // remove baidu ads
        document.querySelectorAll("iframe").forEach(i => {
            document.querySelectorAll("iframe").forEach(i => {
                if (i.src.includes("pos.baidu.com")) {
                    i.style.display = "none";
                }
            });
        });

        // remove aside recommend
        let asideModle = document.querySelector("div[role=main] > aside > div");
        if (asideModle) {
            asideModle.style.display = "none";
        }

        // remove under recommend
        let unserModle = document.querySelector("div[role=main] > div > section:nth-child(2)");
        if (unserModle) {
            unserModle.style.display = "none";
        }
    }

    try {
        let message_box = document.querySelector("div#__next");
        // listen element change
        let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        if (MutationObserver) {
            let MutationObserverConfig = {
                childList: true,
                subtree: true,
            };
            let observer = new MutationObserver(function (mutations) {
                do_track();
            });
            observer.observe(message_box, MutationObserverConfig);
        } else if (message_box.addEventListener) {
            message_box.addEventListener("DOMSubtreeModified", function (evt) {
                do_track();
            }, false);
        } else {
            let timer = setInterval(function () {
                do_track();
            }, 1000);
        }
    } catch (error) {
        console.log("listen event fail", error);
    }

})();

这个也发布到 Greasy Fork 社区了，有同样诉求的同学可以自行获取。

某SDN

……目前用了 uBlock 做推荐拦截，用了 简悦 做 copy ，先解决了问题，以后有什么特别的恶心的地方再做梳理吧……

某书后续

  • 外链跳转优化
  • 生成文章目录层级

We can only learn to love by loving.
— Iris Murdoch