你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式
你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式
你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式
你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式
你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式
你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式
(我已經安裝了使用者樣式管理器,讓我安裝!)
// ==UserScript==
// @name 51CTO博客沉浸式阅读
// @namespace http://tampermonkey.net/
// @version 2.1
// @description 51CTO博客 免登录(不可用)复制 一键复制 沉浸式阅读 护眼模式
// @author white
// @match https://blog.51cto.com/*
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAQCAYAAAD0xERiAAAAAXNSR0IArs4c6QAAAVFJREFUOE+NVEFywjAMlDyF6SMKDSeSV5S8pPAS2pfAT6CvCD3VE/qITihWK9fyOEak+JSJN6uVdhUEAHifjjcEsOTngWPLtpsF/FrD481kRPvyeKoZf5iOPwCgyApbT3aYjHaAuBiShQDbedutAhnlWL7/I8sq8UUOdkRv1fG0bYr7wjj3zMrSVnWypJ0hpc1ktETEjWCIaCXKUtkWiCyDENGKopw4N+0amSbIkjF1Zb98Ec00MmaGPAN0jt3578RoaHOOZHA+95w0iE9ajsi5uvr83muOlm2Hfmba0RT/gl/mbfd6QRZM822ms0iJ8/xJ1pqHuwUasxOsvEd2BQCsVBRAUMYfxKSzYz5rWSwiWRJYS0S+BYP4GGbWWxkeMnehZYyL4JU9U+ORLHrvxyCKbyXrxeIisEGxN4Cj4eNAVISFj+EM8/DtJ4Fdp7OUH8AP7ara7/cMNWcAAAAASUVORK5CYII=
// @grant none
// @run-at document-start
// @license MIT
// ==/UserScript==
(function () {
"use strict";
class Wonderful {
constructor() {
this.backgroundColor = "#557F43";
// 需要拦截的黑名单事件
this.winBlackEvenName = ["scroll", "wheel"];
this.docBlackEvenName = ["scroll", "wheel"];
this.log = false;
this.domTreeChange = [
() => {
document.querySelector(".Header")?.remove();
document.querySelector("header")?.remove();
document.querySelector(".detail-content-right")?.remove();
document.querySelector(".action-aside")?.remove();
document.querySelector(".action-box")?.remove();
document.querySelector("article>section")?.remove();
document.querySelector("aside.minmenu")?.remove();
document.querySelector("div.Footer")?.remove();
document.querySelector("div.comment-textarea")?.remove();
document.querySelector("#comment")?.remove();
},
];
this.style = `.copy_btn { font-size: 0 !important; }
.copy_btn:before { content: "一键复制"; font-size: 12px; vertical-align: middle; }
.copy_btn_copy:before { content: "已复制"; font-size: 12px; vertical-align: middle; }
a.downloadCode {display: none !important;}`;
// 修改监听事件
this.changeAttr = [
{
obj: window,
name: "articleCopy",
func: () => {
$(".article-content-wrap").unbind("keydown").unbind("copy");
$("body").off("click", ".copy_btn");
$(".copy_btn").bind("click", function (e) {
let idNumber = e.target.dataset.clipboardTarget;
idNumber = idNumber.match(/\d+/).at(0);
const value = $("#code_id_" + idNumber).text();
navigator.clipboard.writeText(value);
$(e.target).toggleClass("copy_btn_copy");
});
},
},
];
// 添加监听事件
this.addListentEvent = [
{
obj: document,
whiteName: "WHITE_DOMContentLoaded",
func: () => {
document.body.style.backgroundColor = this.backgroundColor;
const ele = document.querySelector(".Content.detail-content-new");
ele.style.padding = "0px";
ele.style.marginTop = "30px";
ele.style.backgroundColor = this.backgroundColor;
const article = document.querySelector(
"article.detail-content-left"
);
article.style.setProperty("float", "none");
article.style.setProperty("width", "unset");
const next_div = article.firstElementChild;
next_div.style.borderRadius = " 10px";
const ele_center = document.querySelector("#page_center");
ele_center.style.width = "1000px";
ele_center.style.margin = "auto";
this.CreateBackTop();
},
},
];
}
DomTree() {
/** 针对dom树进行修改 */
new MutationObserver((events, observer) => {
events.forEach((e) => {
e.addedNodes.forEach((target) => {
if (target && target.nodeType == 1) {
this.domTreeChange.forEach((func) => {
try {
func();
} catch (error) {
console.error(error);
}
});
}
});
});
}).observe(document.documentElement, { childList: true, subtree: true });
}
WindowEvent() {
// 拦截window事件
const whiteList = this.addListentEvent.map((item) => item.whiteName);
window._addEventListener = window.addEventListener;
Object.defineProperty(window, "addEventListener", {
value: (name, func) => {
this.log && console.log(`window 事件名:${name}\t函数:${func}`);
if (this.winBlackEvenName.includes(name)) {
this.log && console.log(`取消监听${name}事件!`);
return;
}
if (whiteList.includes(name)) {
window._addEventListener(name.split("_").at(1), func);
return;
}
window._addEventListener(name, func);
},
});
}
DocumentEvent() {
// 拦截document事件
const whiteList = this.addListentEvent.map((item) => item.whiteName);
document._addEventListener = document.addEventListener;
Object.defineProperty(document, "addEventListener", {
value: (name, func) => {
this.log && console.log(`document 事件名:${name}\t函数:${func}`);
if (this.docBlackEvenName.includes(name)) {
this.log && console.log(`取消监听${name}事件!`);
return;
}
if (whiteList.includes(name)) {
document._addEventListener(name.split("_").at(1), func);
return;
}
document._addEventListener(name, func);
},
});
}
ChangeAttr() {
// 修改对象属性
this.changeAttr.forEach((item) => {
Object.defineProperty(item.obj, item.name, {
value: item.func,
writable: false,
});
});
}
AddListenEvent() {
// 添加监听事件
this.addListentEvent.forEach((item) => {
item.obj.addEventListener(item.whiteName, item.func);
});
}
CreateStyle(text) {
const sheet = document.createTextNode(text);
const el = document.createElement("style");
el.appendChild(sheet);
document.getElementsByTagName("head")[0].appendChild(el);
}
CreateBackTop() {
const div = document.createElement("div");
const btnTop = document.createElement("button");
const btnButtom = document.createElement("button");
const backTop = `<svg t="1749719721259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1052" width="32" height="32"><path d="M484.538555 297.401434 78.508052 703.407378c-11.784394 11.813047-11.784394 30.912034 0 42.724057 11.81714 11.81407 30.94171 11.81407 42.757826 0l386.211109-386.181433 379.830795 379.806235c11.453866 11.482519 30.039153 11.482519 41.491996 0 11.511171-11.453866 11.511171-30.039153 0-41.516556L534.372543 303.776631c-1.543146-1.539053-3.417843-2.296299-5.200442-3.412726-0.691755-0.935302-1.055029-2.085498-1.933025-2.962471-11.784394-11.784394-30.912034-11.784394-42.695405 0L484.538555 297.401434zM484.538555 297.401434" fill="#1afa29" p-id="1053"></path></svg>`;
const backButtom = `<svg t="1749719761870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1082" width="32" height="32"><path d="M539.461445 726.598566L945.491948 320.592622c11.784394-11.813047 11.784394-30.912034 0-42.724057-11.81714-11.81407-30.94171-11.81407-42.757826 0l-386.211109 386.181433-379.83079499-379.806235c-11.453866-11.482519-30.039153-11.482519-41.49199601 0-11.511171 11.453866-11.511171 30.039153 0 41.516556L489.627457 720.223369c1.543146 1.539053 3.417843 2.296299 5.200442 3.412726 0.691755 0.935302 1.055029 2.085498 1.933025 2.962471 11.784394 11.784394 30.912034 11.784394 42.695405 0L539.461445 726.598566zM539.461445 726.598566" fill="#1afa29" p-id="1083"></path></svg>`;
btnTop.innerHTML = backTop;
btnButtom.innerHTML = backButtom;
btnTop.style.backgroundColor = "transparent";
btnTop.style.transition = "transform 0.3s ease";
btnTop.onmouseover = () => {
btnTop.style.transform = "scale(1.1)";
};
btnTop.onmouseout = () => {
btnTop.style.transform = "scale(1)";
};
btnButtom.style.backgroundColor = "transparent";
btnButtom.style.transition = "transform 0.3s ease";
btnButtom.onmouseover = () => {
btnButtom.style.transform = "scale(1.1)";
};
btnButtom.onmouseout = () => {
btnButtom.style.transform = "scale(1)";
};
btnTop.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
});
btnButtom.addEventListener("click", () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth",
});
});
div.style.zIndex = 9999999;
div.style.position = "fixed";
div.style.right = "150px";
div.style.bottom = "50px";
div.style.textAlign = "center";
div.style.cursor = "pointer";
div.style.display = "flex";
div.style.flexDirection = "column";
div.appendChild(btnTop);
div.appendChild(btnButtom);
document.body.appendChild(div);
}
main() {
this.DomTree();
this.WindowEvent();
this.DocumentEvent();
this.CreateStyle(this.style);
this.ChangeAttr();
this.AddListenEvent();
}
}
new Wonderful().main();
})();