Open vieyahn2017 opened 4 months ago
上面的js代码在控制台执行之后,所有的代码片段右上角都会变成“免登录复制”,点击即可复制代码
我之前的方法是直接把代码的outerText在控制台打印出来,然后复制,不够直接,还得去先找code元素的选择器
var selector = "#content_views > pre > code"; console.log(Array.prototype.slice.call(document.querySelectorAll(selector)).map(x => x.outerText).join("\n"));
本文这个方法来自
CSDN 的百度搜索权重很高,比如我们搜索一个关键词, 输入react 性能优化,第一个就是 CSDN 的链接,打开 CSDN 的链接,里面有很多广告,然后我们想复制里面的代码块,CSDN 会要求我们登录后才可以复制,直接用鼠标去选中文本是无法选中的。我们可以使用可以油猴脚本来完美解决,打开脚本,重新刷新页面,边上的广告消失了,一起来看代码块,“登录复制按钮”变成了“免登录复制”,也可以手动选中复制代码了。
下面我们来看下实现原理,打开 chrome dev tools 选中代码块,这里的 code 标签和 pre 标签 user-select 值是 none,所以鼠标是无法选中的。
// ==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 事件,搞定啦。
大家可以通过这个地址下载安装。
以上就是本文全部内容,如果对你有帮助,可以评论一下,这对我真的很重要,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。
上面的油猴脚本处理了很多,我只挑了几部主要的,测了一下也能使用
方法:
document.querySelectorAll('.hljs-button').forEach(x => x.classList.remove('signin')); document.querySelectorAll('.hljs-button').forEach(x => x.setAttribute('data-title', '免登录复制')); document.querySelectorAll('code.prism.language-c.has-numbering').forEach(x => x.setAttribute('onclick', 'mdcp.copyCode(event)'));