一、介绍

本文章仅供参考学习，内容皆通过测试开发出来的结果编写。
众所周知，CSDN部分文章一直饱受大家的诟病，本文便入门般地介绍一下如何通过u猴^[1]脚本来解决CSDN中部分文章的登录复制限制，以及对接浏览器F9进入阅读模式的功能实现CSDN文章的专注阅读模式。

二、油猴基础

2.1 匹配站点

在自定义的脚本中添加如下代码，匹配站点支持正则^[2]
注：但不完全符合正则的所有语法

//@match        *://*.blog.csdn.net/*；

2.2 配置信息

其中 name、namespace、version 三个字段为必填。

// ==UserScript==
// @name        <脚本名称>
// @namespace     <命名空间[类似C++的引入]>
// @version         <版本号>
// @match        <站点[URL]>
// @icon        <脚本图标[URL]>
// @description   <描述>
// @author        <作者>
// @grant        <内置库方法[eg. GM_xhrHttpRequest]>
// ==/UserScript==

2.2 闭包

模板代码主体类似闭包^[3]，作用域是整个页面。

三、实现步骤

3.1 撤销：登录复制限制

解决绑定在对应DOM元素上的属性和监听事件。

解除限制
禁止复制的逻辑主要是通过 DOM元素上的CSS属性字段user-select: none设置的用户不可选中复制的原理限制，我们可以通过修改元素上的该字段属性值为auto或者删除即可解除复制限制。
热复制
热复制即一键点击复制，点击后自动将对应的代码内容格式化的复制到剪贴板上。主要逻辑代码可以网上搜索，但是网上关于Web上复制的逻辑业务方法有许多种，当然大多数也是与作者一样的处理技术：ClipboardJS。
一开始我也以为需要通过CDN的方式引入外部资源文件，不过本文实现的热复制的主要逻辑并不需要引入外步额外的ClipboardJS资源，可以通过浏览器内置的onCopy方法进行复写，进而实现热复制

/*
@name    复制
@func
    modifyCopyPriviledge: 修改权限
    copy: 复制逻辑
*/
modifyCopyPriviledge(codeElem,signElem){
    //代码容器修改
    codeElem.removeAttribute( onclick );
    codeElem.style.setProperty( user-select , auto );
    codeElem.setAttribute( id , code- +i);
    codeElem.parentNode.style.setProperty( user-select , auto );
    // 登录容器修改
    try{
        signElem.removeAttribute( onclick );
        signElem.setAttribute( data-title , 点击复制 );
        signElem.removeAttribute( data-report-click );
        
        // 适配clipboardJS在DOM元素上的绑定
        bindAttribute2DOM(signElem);
        
        signElem.style.position =  inherit ;
        signElem.style.display = "block";
        signElem.style.setProperty( max-width , 65px );
        return true
    }catch(e){
        return false
    }
};
copy(signElem) {
    let codeelem = null;
    try{
        codeelem = signElem.parentNode;
        if(codeelem.id.indexOf( code )===-1){ // 父节点
            throw new EvalError( 值错误 );
        }
    }catch(err){// 兄弟节点
        codeelem = signElem.previousElementSibling;
    }
    
     // 复制逻辑业务
    addCodeContent2Clipboard(innerText);
    
    signElem.setAttribute( data-title , 复制成功 );
    signElem.style.cssText +=  background-color: green ;
    // 动画
    setTimeout(()=>{ // 先延时1000ms，再执行回调函数
        signElem.setAttribute( data-title , 点击复制 );
        signElem.style.removeProperty( background-color , green );
    },1000);
};

3.2 添加：专注阅读模式（含目录）

添加此模式的想法是起源于使用via浏览器后，享受那种极简的风格，不过原本的CSDN文章页面充斥着各种影响极简阅读的板块。这里说明一下为什么特意强调含目录呢，由于CSDN的侧边栏目录是真的良心，阅读很方便，emmmm，一开始我还想仅仅实现保留文章主体的效果，但是仔细一想具有自动审阅与跳转的功能的目录要是被我摘除了，岂不是多此一举，然后我就保留了目录。
注：知道F9进入阅读模式后差点实现到一半放弃，不过F9仅仅保留类似爬虫过程中对response.text #纯文本的效果，不可热复制也不可阅读目录。

添加专注模式开关
这里我删除了原本的页面右下角的三个按钮，添加了我自定义的一个图标按钮——小飞侠图标，点击即可进入专注模式，再次点击即可回到默认初始页面。
调整页面布局
删除不必要的板块需要对页面的板块重新布局，仅保留文章主体和目录两个必要板块。根据不给页面过多的负载问题，主要业务原理通过复制文章主体和目录节点并通过与原始的属性display值的动态修改切换显示。

/*
@name 专注模式
@func
    modifyFocusPriviledge: 修改专注权限
    showFocusModel: 展开专注模式
*/
modifyFocusPriviledge(mainBox, main, catalog){
    // 修改toolbar
    let toolbar = document.querySelector( .csdn-side-toolbar );
    let focusSwitch = document.querySelector( .option-box ).cloneNode(true);
    focusSwitch.firstElementChild.src =  https://s1.aigei.com/src/img/png/05/055f0df239ef4451a25be1e5c4617f96.png?imageMogr2/auto- +
         orient/thumbnail/!199x199r/gravity/Center/crop/199x199/quality/85/&e=1735488000& +
         token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:pxpJ0L3fOUppABVi15gOFs94eqk= ;
    focusSwitch.style.background = "rgba(0,0,0,0.1)";
    focusSwitch.firstElementChild.style.width = "200%";
    focusSwitch.firstElementChild.style.display = "block"; // 去除初始鼠标放上有动态加载事件
    focusSwitch.removeChild(focusSwitch.lastElementChild);
    toolbar.replaceChildren(focusSwitch);
    
    // 文章主体内容保留业务逻辑
    storeMainContent(mainBox, main);
    
    // 目录保留悬挂业务逻辑
    storeCataLlogAndFloat(_catalog);
    
    return {
        a: focusSwitch,
        b: _catalog
    };

};
showFocusModel(status, mainBox, main,catalog){
    if(status===0){ // 进入专注模式
        console.log(`----${status}: 专注模式----`)
        mainBox.style.display =  none ;
        mainBox.nextElementSibling.style.display =  none ;
        main.style.display =  block ;
        catalog.style.display =  block ;
        console.log( 主体可见
全体不可见 )
    }else{
        console.log(`----${status}: 初始模式----`);
        mainBox.style.display =  block ;
        mainBox.nextElementSibling.style.display =  block ;
        main.style.display =  none ;
        catalog.style.display =  none ;
        console.log( 主体不可见
全体可见 );
    }
}