使用油猴脚本净化 CSDN

sxkk20082年前知识分享112

我报名参加金石计划 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 事件,搞定啦。

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

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

相关文章

华为AI音箱:实现人与科技更亲近

华为AI音箱:实现人与科技更亲近

  近年来,随着智能音箱的普及,人机交互的方式发生了翻天覆地的变化。作为智能音箱领域的佼佼者之一,华为AI音箱以其出色的技术与服务,在用户中广受好评。不仅如此,它还为人们带来...

图片公式识别:人工智能技术解放人类的智慧

图片公式识别:人工智能技术解放人类的智慧

  随着人工智能技术的不断进步,图片公式识别正逐渐成为当今科技领域的热门话题。通过计算机视觉技术,图片中的数学公式可以被准确而高效地识别出来,为学术研究、教育培训等领域带来了...

图片识人在线:探索人工智能技术与人类互动的可能

图片识人在线:探索人工智能技术与人类互动的可能

  随着科技的不断进步和智能化的发展,图片识人在线成为了当今社会中一个备受关注的话题。利用人工智能与图像识别技术,图片识人在线为我们提供了更加便捷和高效的人脸识别服务,广泛应...

AI接口:未来科技的关键突破口

AI接口:未来科技的关键突破口

  随着科技的不断发展,人工智能(AI)作为当代最炙手可热的技术之一,已经在各个领域展现出了强大的潜力。而AI接口作为人工智能技术的核心,正成为驱动未来科技发展的关键突破口。...

什么是智能家居-探索未来乐趣与便利

什么是智能家居-探索未来乐趣与便利

  随着人工智能技术的逐渐发展和应用,智能家居已经成为一个越来越受人们欢迎的新型家居生活方式。什么是智能家居?它的存在究竟给我们带来哪些便利和乐趣?在本文中,我们将探索智能家...

华为人工智能标准:构建智能世界的引领者

华为人工智能标准:构建智能世界的引领者

  人工智能技术在当今世界中扮演着越来越重要的角色,其广泛应用将推动人类社会向更加智能化的方向发展。华为作为全球领先的信息与通信技术供应商,一直致力于推动人工智能的发展,并以...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。