AddMyCSS

AddYourStyleToWeb

通过给网页添加CSS来自定义网页样式
当前为 2022-10-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         AddYourStyleToWeb
// @namespace    http://tampermonkey.net/
// @version      1.3.2
// @description  通过给网页添加CSS来自定义网页样式
// @author       刘家旺
// @icon         http://www.weather.com.cn/favicon.ico
// @match        *://wenku.baidu.com/*
// @match        *://*.blog.csdn.net/*
// @match        *://*.csdn.net/*
// @match        *://fanyi.baidu.com/*
// @match        *://www.bilibili.com/*
// @match        *://www.cnblogs.com/*
// @match        *://www.it1352.com/*
// @match        *://www.logosc.cn/*
// @match        *://www.douyin.com/*
// @license MIT
// @run-at document-start
// ==/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 内的网址即可
*/
 
"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,div#toolBarBox,div#pcCommentBox,div#recommendNps,.template-box,\
.blog-footer-bottom,.csdn-side-toolbar,.top-banner,.ag-tab-bar,.satisfied-component",
                "display: none !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;");
        }
    }
    //百度翻译样式
    else if (web("fanyi.baidu.com")) {
        addCssSelector(
            "#transOtherRight,.vip-btn-activity",
            "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,\
#topics > div > div.postDesc,#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("xxx.xxx.xxx")) {
    //     // 添加样式
    //     addCssSelector(
    //         "选择器",
    //         "CSS样式"
    //     );
    // }
 
}
// 添加完毕 ===========================================================================================================
 
 
 
 
 
 
 
 
//以下是功能实现，请慎重修改！
 
//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;
欢迎访问Greasy Fork镜像
