1, Introduction
This article is only for reference and learning, and the content is written according to the test results.
As we all know, some articles of CSDN have been criticized by everyone all the time. This article will introduce how to use u monkey as an introduction 1 Script to solve the login and replication restrictions of some articles in CSDN, and connect the browser F9 to enter the reading mode to realize the focused reading mode of CSDN articles.
2, Oil monkey Foundation
2.1 matching sites
Add the following code to the customized script to match the regular support of the site 2
Note: but it does not fully comply with all regular syntax
//@match *://*.blog.csdn.net/*；
2.2 configuration information
name, namespace and version are required.
// ==UserScript== // @Name < script name > // @Namespace < namespace [similar to the introduction of C + +] > // @Version < version number > // @Match < site [url] > // @Icon < script icon [url] > // @Description < description > // @Author < author > // @Grant < built in library method [eg. gm_xhrhttprequest] > // ==/UserScript==
2.2 closure
The body of the template code is similar to a closure 3 , the scope is the entire page.
3, Implementation steps
3.1 cancel: login replication restrictions
Solve the properties and listening events bound on the corresponding DOM element.
-
Lifting restrictions
The logic of prohibiting copying is mainly through the CSS attribute field user select: none on the DOM element. The user cannot select the principle restriction of copying. We can remove the copying restriction by modifying the attribute value of this field on the element to auto or deleting. -
Hot copy
Hot copy means one click Copy. After clicking, the corresponding code content will be automatically formatted and copied to the clipboard. The main logical codes can be searched online, but there are many logical business methods copied on the Web. Of course, most of them are the same processing technology as the author: clipboard JS.
At the beginning, I also thought that external resource files need to be introduced through CDN. However, the main logic of hot copy implemented in this paper does not need to introduce additional ClipboardJS resources. You can copy through the browser's built-in onCopy method to realize hot copy
/*
@name copy
@func
modifyCopyPriviledge: Modify permissions
copy: Copy logic
*/
modifyCopyPriviledge(codeElem,signElem){
//Code container modification
codeElem.removeAttribute('onclick');
codeElem.style.setProperty('user-select','auto');
codeElem.setAttribute('id','code-'+i);
codeElem.parentNode.style.setProperty('user-select','auto');
// Login container modification
try{
signElem.removeAttribute('onclick');
signElem.setAttribute('data-title','Click Copy');
signElem.removeAttribute('data-report-click');
// Adapt the binding of clipboardJS on DOM elements
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){ // Parent node
throw new EvalError('Value error');
}
}catch(err){// Sibling node
codeelem = signElem.previousElementSibling;
}
// Copy logical business
addCodeContent2Clipboard(innerText);
signElem.setAttribute('data-title','Copy succeeded');
signElem.style.cssText += 'background-color: green';
// animation
setTimeout(()=>{ // Delay 1000ms first, and then execute the callback function
signElem.setAttribute('data-title','Click Copy');
signElem.style.removeProperty('background-color','green');
},1000);
};
3.2 add: focused reading mode (including directory)
The idea of adding this mode originated from enjoying the minimalist style after using via browser. However, the original CSDN article page is full of various plates that affect minimalist reading. Here's why I specially emphasize the inclusion of directories, because the sidebar directory of CSDN is a real conscience and easy to read, emmmm. At the beginning, I wanted to only preserve the main body of the article, but if I removed the directory with the function of automatic review and jump, wouldn't it be superfluous, and then I retained the directory.
Note: after knowing that F9 entered the reading mode, it almost gave up. However, F9 only retains the effect on response.text # plain text in the process of crawler, and cannot be hot copied or read.
-
Add focus mode switch
Here, I deleted the three buttons in the lower right corner of the original page and added an icon button I defined - little Feixia icon. Click to enter the focus mode, and click again to return to the default initial page. -
Adjust page layout
To delete unnecessary sections, you need to rearrange the sections of the page, and only keep the two necessary sections of the article body and the directory. According to the problem of not giving too much load to the page, the main business principle is to copy the article body and directory nodes, and switch the display through dynamic modification with the original attribute display value.
/*
@name Focus mode
@func
modifyFocusPriviledge: Modify focus permissions
showFocusModel: Expand focus mode
*/
modifyFocusPriviledge(mainBox, main, catalog){
// Modify 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"; // Remove the dynamic loading event on the initial mouse
focusSwitch.removeChild(focusSwitch.lastElementChild);
toolbar.replaceChildren(focusSwitch);
// Article body content retention business logic
storeMainContent(mainBox, main);
// Directory retention suspended business logic
storeCataLlogAndFloat(_catalog);
return {
a: focusSwitch,
b: _catalog
};
};
showFocusModel(status, mainBox, main,catalog){
if(status===0){ // Enter focus mode
console.log(`----${status}: Focus mode----`)
mainBox.style.display = 'none';
mainBox.nextElementSibling.style.display = 'none';
main.style.display = 'block';
catalog.style.display = 'block';
console.log('Body visible\n All invisible')
}else{
console.log(`----${status}: Initial mode----`);
mainBox.style.display = 'block';
mainBox.nextElementSibling.style.display = 'block';
main.style.display = 'none';
catalog.style.display = 'none';
console.log('The body is not visible\n All visible');
}
}
4, Display effect
Playing with CSDN replication and focused reading