使用油猴脚本净化 CSDN

sxkk20082年前知识分享108

我报名参加金石计划 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语音识别更是一项重要且引人注目的技术。通过结合AI与语音识别技术,我们能够极大地...

AI识图技术的进步对社会的影响

AI识图技术的进步对社会的影响

  随着人工智能(AI)技术的迅猛发展,AI识图应用正逐渐渗透到我们的日常生活。AI识图作为其中的重要应用之一,正在改变着我们的工作方式、生活习惯以及社会结构。  AI识图是...

小米T300:革新技术的智能扫地机器人

小米T300:革新技术的智能扫地机器人

  随着科技的发展,智能家居产品正逐渐成为人们生活中的重要组成部分。其中,扫地机器人作为一种高效便利的清洁工具,深受人们的喜爱。而小米T300作为小米生态链旗下的智能扫地机器...

发表评论    

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