使用油猴脚本净化 CSDN

我报名参加金石计划 1 期挑战——瓜分 10 万奖池，这是我的第 1 篇文章，点击查看活动详情

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/maqi1520
// @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 事件，搞定啦。

大家可以通过这个地址下载安装，若你也想尝试开发脚本，可以看我的另一篇文章《油猴脚本开发教程》

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

目录