使用TamperMonkey脚本净化 CSDN

本文最后更新于:2023年10月21日 晚上

前言

CSDN 的百度搜索权重很高,比如我们搜索一个关键词, 输入react 性能优化,第一个就是 CSDN 的链接,打开 CSDN 的链接,里面有很多广告,然后我们想复制里面的代码块,CSDN 会要求我们登录后才可以复制,直接用鼠标去选中文本是无法选中的。我们可以使用可以油猴脚本来完美解决,打开脚本,重新刷新页面,边上的广告消失了,一起来看代码块,“登录复制按钮”变成了“免登录复制”,也可以手动选中复制代码了。

下面我们来看下实现原理,打开 chrome dev tools 选中代码块,这里的 code 标签和 pre 标签 user-select 值是 none,所以鼠标是无法选中的。

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
65
66
67
68
69
70
71
// ==UserScript==
// @name CSDN 免登录复制
// @version 0.1
// @icon https://blog.csdn.net/favicon.ico
// @description CSDN 免登录复制,净化页面
// @namespace https://github.com/waahah
// @match *://*.csdn.net/*
// @license MIT
// @grant GM_registerMenuCommand
// @grant GM_openInTab
// @grant GM_addStyle
// ==/UserScript==

(function () {
"use strict";

GM_addStyle(
`pre,
code {
user-select: auto !important;
}
#blogExtensionBox,
.hide-article-box,
.insert-baidu-box,
.signin,
.wwads-horizontal,
.wwads-vertical,
.blog-top-banner,
.blog_container_aside,
.programmer1Box,
.recommend-box,
.recommend-nps-box,
.template-box,
.hide-preCode-box {
display: none !important;
}
main {
width: 100% !important;
}
#article_content,
main div.blog-content-box pre.set-code-hide {
height: auto !important;
}
`);
// 删除暗黑皮肤样式
$("link").each((index, item) => {
if ($(item).attr("href").indexOf("skin") > -1) {
$(item).remove();
}
});

// 免登录复制
$(".hljs-button").removeClass("signin");
$(".hljs-button").attr("data-title", "免登录复制");
$(".hljs-button").attr(
"onclick",
"hljs.copyCode(event);setTimeout(function(){$('.hljs-button').attr('data-title', '免登录复制');},3500);"
);
// 去除剪贴板劫持
$("code").attr("onclick", "mdcp.copyCode(event)");
try {
Object.defineProperty(window, "articleType", {
value: 0,
writable: false,
configurable: false,
});

csdn.copyright.init("", "", "");
} catch (err) {}
})();

我们来看下脚本代码,注入一段样式, code 标签和 pre 标签的user-select 值改为 auto, 以及其他一些标签和广告标签,样式改为 display none, 使用 Jquery 将复制按钮的登录样式去除。文本改成“免登录复制”,修改onclick 事件,搞定啦。

大家可以通过这个地址下载安装。

以上就是本文全部内容,如果对你有帮助,可以评论一下,这对我真的很重要,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

扩展