通过给网页添加CSS来自定义网页样式
// ==UserScript==
// @name AddMyCSS
// @namespace http://tampermonkey.net/
// @version 1.3.6
// @description 通过给网页添加CSS来自定义网页样式
// @author Jawon
// @icon http://www.weather.com.cn/favicon.ico
// @match *://www.baidu.com/*
// @match *://wenku.baidu.com/*
// @match *://fanyi.baidu.com/*
// @match *://baijiahao.baidu.com/*
// @match *://jingyan.baidu.com/*
// @match *://zhidao.baidu.com/*
// @match *://*.csdn.net/*
// @match *://www.it1352.com/*
// @match *://www.cnblogs.com/*
// @match *://www.bilibili.com/*
// @match https://mooc1.chaoxing.com/mycourse/studentstudy?chapterId*
// @match *://www.logosc.cn/*
// @match *://www.douyin.com/*
// @match *://*.bing.com/*
// @match *://*.zhihu.com/*
// @license MIT
// @run-at document-end
// ==/UserScript==
/*
脚本介绍：
使用门槛：
1.有一台电脑，电脑上的浏览器能安装油猴插件。
2.会使用tampermonkey油猴插件，不会的去百度。
3.有一点点前端编程基础，只要一点点哦！
使用方法：
比如你要修改百度的样式，只要进行下面几步即可。
1.将此脚本添加到油猴插件里并打开。
2.在上面添加你要匹配的网站： // @match *://www.baidu.com/*
3.在下面addStyleArr函数内添加要改变的样式，你可以将我原来的样式删除，再像我那样添加新的样式。
//示例代码：
else if (web("www.baidu.com")) {
addCssSelector( //至于用哪个函数请阅读脚本原理
"div#head", //参数1 选择器字符串
"background-color: black !important;" //参数2 CSS字符串
);
}
4.OK了，刷新百度看看效果。
脚本原理：
此JS脚本为向网页添加CSS改变网页样式提供了便利的接口，帮你解决了JS直接修改网页样式无效的两种情况。
情况一：
js修改的元素还没加载出来，或者元素不定时出现，再或者元素具有内联样式
解决方法：
1.addCssSelector(selectorStr, cssStr);
将添加的选择器和CSS保存到数组里，之后会生成两个相同的style标签并分别添加到html起始和末尾，
以保证CSS持续作用于整个网页。这种方式对没有内联样式的元素有效。
2.changeInlineStyle(selectorStr, cssStr);
有些元素具有内联样式并且带有!important，导致上面的方法失效，这时我们用changeInlineStyle
来修改元素的内联样式。这个函数同样将添加的选择器和CSS保存到数组里，之后先设置最短和最长修改
时间，再用定时器循环修改内联样式。每次循环若找到元素就修改，再判断是否到达最短修改时间，是
就停止循环，否就继续循环，若未找到元素就持续循环，直到达到最长修改时间。这样既防止修改一次
后被后加载的CSS覆盖，又防止找不到元素后一直循环检测，浪费CPU资源。
3.keepChangeInlineStyle(selectorStr, cssStr)；
而有些元素不但具有内联样式加!important而且会不定时改变内联样式，这时第二个函数就失效了，那
我们就用第三个函数keepChangeInlineStyle。这个函数类似于第二个函数，不同点是他会不停地循环，
一旦检测到元素的内联样式与指定的样式不符，就将其修改。
情况二：
目标元素在iframe框架内，js无法找到元素
解决方法：
match 后面匹配的网址换成 iframe 内的网址即可
最后要特别感谢油猴中文网bbs.tampermonkey.net.cn对我的帮助！特别是热情的李恒道哥哥！
*/
"use strict";
// 在这里添加要改变的样式 ==============================================================================================
function addStyleArr() {
//百度文库样式
if (web("wenku.baidu.com")) {
//百度文库的第一种页面
if (document.querySelector("body.tpl-xreader")) {
changeInlineStyle(
"div#app-right,.menubar,.tool-bar-wrap,.bg-theme-wrap.no-full-screen,.page-icon-pos.pos,.page-icon-on.pos,#app-left,#app-top-right-tool",
"display: none !important;"
);
changeInlineStyle(
".center-wrapper.zoom-scale.classic",
"width: calc(100% - 280px) !important;height: 120% !important;"
);
addCssSelector(
".creader-canvas",
"width: 1000px !important;height: 100% !important;"
);
}
//百度文库的第二种页面，office文档
else if (document.querySelector(".catalog-main")) {
changeInlineStyle(
".tool-bar-wrapper.wk-web-4774.fade-in,.theme-enter-wrap,.sidebar-wrapper",
"display: none !important;"
);
}
//百度文库的第三种页面,几百页的书
else if (document.querySelector(".doc-info-wrapper")) {
changeInlineStyle(
".tool-bar-wrapper.wk-web-4774.fade-in,.theme-enter-wrap,.sidebar-wrapper",
"display: none !important;"
);
}
}
//CSDN样式
else if (web("csdn.net")) {
addCssSelector(
".main_father.clearfix.d-flex.justify-content-center,body,#userSkin",
"background: #06090a !important;"
);
addCssSelector(".column_info_box", "position: unset !important;");
if (1) {
// CSDN 打印保存样式
addCssSelector(
"aside.blog_container_aside,div#blogColumnPayAdvert,.blog-tags-box,div#pcCommentBox,div#recommendNps,.template-box,\
.blog-footer-bottom,.csdn-side-toolbar,.top-banner,.ag-tab-bar,.satisfied-component,.toolbar-advert,.passport-login-container,.hide-preCode-box,\
.first-recommend-box,.second-recommend-box,.recommend-box,.left-toolbox,#csdn-toolbar,.operating",
"display: none !important;"
);
// 黑底白字
addCssSelector("html,body,div,p,td,blockquote,code,h1,h2,h3,h4,h5,h6","color: #aaa !important; background: black !important;");
addCssSelector("img","background-color: white !important;");
addCssSelector(
"main,div#mainBox,.main_father.clearfix.d-flex.justify-content-center",
"width: 100% !important;margin: 0 !important;padding: 0 !important;float: left !important;width: 100% !important;"
);
addCssSelector(
"main div.blog-content-box",
"padding: 0 10% !important;"
);
addCssSelector(".con-l-tag", "width: 100% !important;");
addCssSelector("#toolBarBox > div", "background-color: #0000 !important;");
//代码展开
addCssSelector(".set-code-hide", "height: auto !important;");
}
}
//百度
else if (web("www.baidu.com")) {
addCssSelector(
"#lg>img,#s-top-left,#u1,#s-hotsearch-wrapper,#bottom_layer,#s_side_wrapper,#s_top_wrap,#s_wrap",
"display:none !important;"
);
}
//百度翻译样式
else if (web("fanyi.baidu.com")) {
addCssSelector(
"#transOtherRight,.vip-btn-activity,#app-guide",
"display:none !important;"
);
}
//bilibili样式
else if (web("www.bilibili.com")) {
addCssSelector(
".bpx-player-container[data-screen=full] .bpx-player-shadow-progress-area,.bpx-player-shadow-progress-area",
"height: 5px !important; visibility:visible !important; opacity: 1 !important;"
);
}
//博客园样式
else if (web("www.cnblogs.com")) {
if (1) {
// 博客园打印保存样式
addCssSelector(
"#notHomeTopCanvas,#articleInfo > a,#open-button,#dayNightSwitch,#aplayer,#cnblogs_post_body > div.essaySuffix-box,#blog_post_info_block,#cnblogs_post_body > p.essaySuffix-eof,\
#comment_form,#footer",
"display: none !important;"
);
addCssSelector(
"*",
"color: #bbb !important; background: black !important"
);
}
}
//it1352样式
else if (web("www.it1352.com")) {
// 展开全部内容
addCssSelector(".arc-body-main", "height: auto !important;");
addCssSelector(".arc-body-main-more", "display: none !important;");
}
// 抖音样式
else if (web("www.douyin.com")) {
// 进度条颜色
addCssSelector(
"xg-played.xgplayer-progress-played",
"background-color: white !important;"
);
}
// 标小智Logo
else if (web("www.logosc.cn")) {
// logo去水印放大
if (1) {
addCssSelector(
"rect.watermarklayer,html::after",
"display: none !important;"
);
addCssSelector(
".flex-1 .swiper-slide-active .svg-card svg",
"position: fixed;width: 1350px;height: 1350px;top: -63%;left: 10%;z-index: 99999999 !important;"
);
}
}
// 百度经验
else if (web("jingyan.baidu.com")) {
// 自动展开
addCssSelector(
"#exp-article > div.exp-content-outer > div",
"overflow: visible !important; height: auto !important; max-height: -webkit-fill-available !important;"
);
addCssSelector(
"div#main-content,img.exp-image-default.pic-cursor-pointer",
"min-width: 100% !important;"
);
//图片变大
addCssSelector(
".exp-image-wraper",
"min-width: 80% !important;"
);
addCssSelector(
"#format-exp > div.read-whole-mask,body > nav,body > header,#breadcrumb,#exp-article > div.wgt-thumbs.clearfix,#ui-tooltip-0,#exp-article > div.exp-title.clearfix > span,\
#wgt-like,#wgt-exp-share,#wgt-barrier-free,#task-panel-wrap,#aside,#format-exp > div.prompt,#format-exp > div.f12.origin-notice,#format-exp > div:nth-child(1)",
"display: none !important;"
);
}
// 超星学习通
else if (web("chaoxing.com") || web("ananas")) {
// 当前目录高亮
addCssSelector(
".posCatalog_active",
"color: red !important;"
);
// addCssSelector(
// "#video > div.vjs-control-bar",
// "display: none !important;"
// );
}
//必应
else if (web("bing.com")) {
// 去除建议栏
addCssSelector(
"#wikiWidgetContainer",
"display: none !important;"
);
}
//百家号百度
else if (web("baijiahao.baidu.com")) {
// 简洁打印样式
addCssSelector(
".-F_R2,._2v051,._3m1xk,._2LcVE,._1LjGN,._3YM_A,.xcp-publish-title,.xcp-publish,.xcp-list,#commentModule,.Wo80H",
"display: none !important;"
);
addCssSelector(
".EaCvy",
"width: 100% !important;"
);
// 黑底白字
addCssSelector(
"*",
"color: #ccc !important; background: black !important;"
);
}
//百度知道
else if (web("zhidao.baidu.com")) {
// 简洁打印样式
addCssSelector(
".head-wrap,.nav-menu-container,#userbar,#qb-side,#ask-info,.guide-tip,.question-number-text-chain,.task-list-button,.aria-div,.jump-goto-star,.wgt-related,.wgt-footer-new,\
#qbleftdown-container,.show-answer-dispute,.wgt-replyer-all-follow-box,.wgt-answers-mask,.bottom-dashed-line",
"display: none !important;"
);
addCssSelector(
"article#qb-content,a.ikqb_img_alink",
"min-width:100% !important;"
);
addCssSelector(
".ikqb_img",
"min-width:70% !important; min-height:70% !important; max-height:70% !important;"
);
addCssSelector(
".bd.answer,div#answer-content-1983575631",
"height: auto !important;"
);
addCssSelector(
".wgt-replyer-all,.line.content-wrapper",
"visibility: visible !important;"
);
// 黑底白字
addCssSelector(
".line.content-wrapper",
"color: #ccc !important; background: black !important;"
);
}
//知乎
else if (web("zhihu.com")) {
addCssSelector(
".Modal-wrapper,.is-hidden.is-fixed,.css-1jf8wzl,.css-1ynzxqw,.QuestionHeader-tags,.QuestionHeader-side,.Question-sideColumn",
"display: none !important;"
);
addCssSelector(
".EaCvy",
"width: 100% !important;"
);
addCssSelector(
"html",
"overflow: visible !important;"
);
addCssSelector(
".Question-mainColumn",
"width: 100%; !important;"
);
}
}
// 添加完毕 ===========================================================================================================
//以下是功能实现，请慎重修改！
//jsInserted标志JS代码是否已全部注入，如果未完全注入就开始调用函数会出现函数未定义错误
var jsInserted = false;
var checkInserted = setInterval(() => {
if (jsInserted) {
// 请在这里调用 StartToChange
StartToChange();
clearInterval(checkInserted);
}
}, 100);
//----------------------------------------------------- 参数设置
var initTime = 1000 * 6; //初始识别网页时间
//普通检测参数:
var commonCycleTime = 300; //周期
var minTime = 1000 * 6; //最短检测时间
var maxTime = 1000 * 15; //最长检测时间
//持续监测参数:
var keepCycleTime = 500; //周期
//-----------------------------------------------------
//普通元素列表
var commonEleArr = [];
//需要持续检测的元素列表
var keepSetArr = [];
//添加css选择器的元素列表
var CSSArr = [];
//添加style标签，适用于没有内联样式的元素
function addCssSelector(selectorStr, cssStr) {
CSSArr.push({ selector: selectorStr, css: cssStr });
}
//改变内敛样式，适用于具有内联样式并且不会变动的元素
//参数1:选择器，参数2:样式
function changeInlineStyle(selectorStr, cssStr) {
//保存每一个 选择器字符串 和 样式字符串 为一个 对象，添加到数组里
commonEleArr.push({ selector: selectorStr, css: cssStr });
}
//持续改变内敛样式，适用于具有内联样式并且不定时变动的元素
function keepChangeInlineStyle(selectorStr, cssStr) {
keepSetArr.push({ selector: selectorStr, css: cssStr });
}
//判断网址
function web(urlStr) {
if (RegExp(urlStr, "i").test(location.href)) {
return true;
} else {
return false;
}
}
//循环检测，直到出现或超时
function setStyle() {
var isEndLoop = false; //是否结束循环的标记
var laterStop = true; //是否长时间未找到，需要停止循环
var overMinTime = false; //在最短时间内，不管找没找到都不许停，否则会被后来加载的css覆盖
setTimeout(function () {
overMinTime = true;
}, minTime);
var checkLoop = setInterval(function () {
//达到最短检测时间才开始判断是否停止，没到最短时间isEndTime始终是false
if (overMinTime) {
isEndLoop = true;
}
//遍历检测元素是否存在
for (var i = 0; i < commonEleArr.length; i++) {
var objList = document.querySelectorAll(commonEleArr[i].selector);
//如果找到了就改样式
if (objList.length > 0) {
for (var j = 0; j < objList.length; j++) {
//如果改过了就不要重复改了
if (objList[j].style.cssText != commonEleArr[i].css) {
objList[j].style.cssText = commonEleArr[i].css;
}
}
}
//没有找到就标记false，继续检测
else {
isEndLoop = false;
}
}
if (isEndLoop) {
clearInterval(checkLoop);
laterStop = false; //已经全部找到并停止了，不需要再次停止
console.log("Jawon: 普通循环检测已结束");
}
}, commonCycleTime);
//到最长检测时间后还没找到就不找了
setTimeout(function () {
if (laterStop) {
clearInterval(checkLoop);
console.log("Jawon: 普通循环检测已结束，但仍有元素未找到！");
}
}, maxTime);
}
//持续循环检测
function keepSetStyle() {
setInterval(function () {
//遍历检测元素
for (var i = 0; i < keepSetArr.length; i++) {
var objList = document.querySelectorAll(keepSetArr[i].selector);
for (var j = 0; j < objList.length; j++) {
if (objList[j].style.cssText != keepSetArr[i].css) {
objList[j].style.cssText = keepSetArr[i].css;
}
}
}
}, keepCycleTime);
}
//在html起始和末尾分别添加style标签
function setCssSelector() {
var myStyleFirst = document.createElement("style");
var myStyleLast = document.createElement("style");
myStyleFirst.className = "CssByJawon";
myStyleLast.className = "CssByJawon";
for (let i = 0; i < CSSArr.length; i++) {
myStyleFirst.innerHTML +=
CSSArr[i].selector + "{" + CSSArr[i].css + "}";
myStyleLast.innerHTML += CSSArr[i].selector + "{" + CSSArr[i].css + "}";
}
var htmlObj = document.querySelector("html");
htmlObj.insertBefore(myStyleFirst, htmlObj.firstChild);
htmlObj.appendChild(myStyleLast);
}
//有些网站有多种样式布局，需要通过查找某个元素来辨别，为了保证找到该元素，需要多找几次，避免该元素还没加载出来。
function StartToChange() {
var laterStop = true;
var addEleLoop = setInterval(function () {
if (
commonEleArr.length == 0 &&
keepSetArr.length == 0 &&
CSSArr.length == 0
) {
//如果没有元素就添加
addStyleArr();
//一旦添加成功，立即停止识别，开始循环检测，修改样式
if (
commonEleArr.length != 0 ||
keepSetArr.length != 0 ||
CSSArr.length != 0
) {
clearInterval(addEleLoop);
laterStop = false;
if (commonEleArr.length > 0) {
setStyle();
console.log("Jawon: 普通循环检测已开启");
}
if (keepSetArr.length > 0) {
keepSetStyle();
console.log("Jawon: 持续循环检测已开启");
}
if (CSSArr.length > 0) {
setCssSelector();
console.log("Jawon: 已添加选择器");
}
}
}
}, 200);
//initTime之内未添加元素就放弃,说明未识别到网站
setTimeout(function () {
if (laterStop) {
clearInterval(addEleLoop);
console.log("Jawon: 未识别到网站");
}
}, initTime);
}
// js代码插入完毕的标志
jsInserted = true;