Chrome 解决 CSDN 无法复制代码问题

Chrome CSS About 1,484 words

场景

CSDN在不登录的情况下,无法对代码块进行复制操作。

原因

该网站对<pre><code>标签添加了user-select: none-webkit-user-select: none等一系列*-user-select: none属性,不允许用户选择,这样就不能复制。

解决方法

方法一

打开控制台,对需要的代码块,选择<pre><code>标签,在Styles页面中,取消勾选user-select: none-webkit-user-select: none

说明:此方法需要分别对<pre><code>标签进行两次取消操作,还需定位标签,稍显麻烦。

方法二

打开控制台,在Console页下输入以下代码。

代码作用:查找出所有<pre><code>并遍历,添加或修改user-selecttext

document.querySelectorAll("pre,code").forEach(function (ele) {
    ele.style.userSelect = 'text';
});

如之后网站又对其他节点添加了该属性,可查找出所有节点,并添加。

Array.prototype.slice.call(document.all).forEach(function (ele) {
    ele.style.userSelect = 'text';
});

说明:此方法需要打开控制台,输入代码块,还有一些麻烦。

方法三(推荐)

Chrome插件方式(自己动手创建一个插件,超级简单,Microsoft Edge也适用)。

新建一个文件夹style(名字任意)。

创建文件:manifest.json(固定名称)

css填写将要创建的样式文件Custom.css(名字任意,.css结尾)。

matches填写CSDN的网址,*匹配所有子路径。

version填写插件版本,任意填写。

manifest_version固定填写3,目前插件版本是3

{
  "content_scripts": [
    {
      "css": ["Custom.css"],
      "all_frames": true,
      "matches": ["https://blog.csdn.net/*"]
    }
  ],
  "description": "CSDN 复制代码插件",
  "name": "CSDN 复制代码",
  "version": "1.0",
  "manifest_version": 3
}

Custom.css文件中填写样式,覆盖CSDN默认样式。

pre, code {
    user-select: text !important;
}

打开Chrome插件页面:

chrome://extensions/

或者Microsoft Edge插件页面:

edge://extensions/

打开开发者模式(Chrome104在插件页面右上角)。

再点击插件页面顶部左侧按钮加载已解压的扩展程序

选择新建的文件夹style,即可加载。

刷新CSDN网站可以看到能够正常选择并且复制了,一劳永逸(CSDN如果改了代码还是需要修改样式,^^!)。

插件注入的样式可以在Styles中搜索injected stylesheet查看。

Computed中可以看到属性最终的值。

Views: 3,126 · Posted: 2023-03-22

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh