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

场景

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-select为text。

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中可以看到属性最终的值。