AddMyCSS

通过给网页添加CSS来自定义网页样式

  1. // ==UserScript==
  2. // @name AddMyCSS
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.3.6
  5. // @description 通过给网页添加CSS来自定义网页样式
  6. // @author Jawon
  7. // @icon http://www.weather.com.cn/favicon.ico
  8.  
  9. // @match *://www.baidu.com/*
  10. // @match *://wenku.baidu.com/*
  11. // @match *://fanyi.baidu.com/*
  12. // @match *://baijiahao.baidu.com/*
  13. // @match *://jingyan.baidu.com/*
  14. // @match *://zhidao.baidu.com/*
  15. // @match *://*.csdn.net/*
  16. // @match *://www.it1352.com/*
  17. // @match *://www.cnblogs.com/*
  18. // @match *://www.bilibili.com/*
  19. // @match https://mooc1.chaoxing.com/mycourse/studentstudy?chapterId*
  20. // @match *://www.logosc.cn/*
  21. // @match *://www.douyin.com/*
  22. // @match *://*.bing.com/*
  23. // @match *://*.zhihu.com/*
  24.  
  25. // @license MIT
  26. // @run-at document-end
  27. // ==/UserScript==
  28.  
  29. /*
  30. 脚本介绍:
  31.  
  32. 使用门槛:
  33. 1.有一台电脑,电脑上的浏览器能安装油猴插件。
  34. 2.会使用tampermonkey油猴插件,不会的去百度。
  35. 3.有一点点前端编程基础,只要一点点哦!
  36.  
  37. 使用方法:
  38. 比如你要修改百度的样式,只要进行下面几步即可。
  39.  
  40. 1.将此脚本添加到油猴插件里并打开。
  41. 2.在上面添加你要匹配的网站: // @match *://www.baidu.com/*
  42. 3.在下面addStyleArr函数内添加要改变的样式,你可以将我原来的样式删除,再像我那样添加新的样式。
  43. //示例代码:
  44. else if (web("www.baidu.com")) {
  45.  
  46. addCssSelector( //至于用哪个函数请阅读脚本原理
  47. "div#head", //参数1 选择器字符串
  48. "background-color: black !important;" //参数2 CSS字符串
  49. );
  50.  
  51. }
  52.  
  53. 4.OK了,刷新百度看看效果。
  54.  
  55. 脚本原理:
  56. 此JS脚本为向网页添加CSS改变网页样式提供了便利的接口,帮你解决了JS直接修改网页样式无效的两种情况。
  57.  
  58. 情况一:
  59. js修改的元素还没加载出来,或者元素不定时出现,再或者元素具有内联样式
  60. 解决方法:
  61. 1.addCssSelector(selectorStr, cssStr);
  62. 将添加的选择器和CSS保存到数组里,之后会生成两个相同的style标签并分别添加到html起始和末尾,
  63. 以保证CSS持续作用于整个网页。这种方式对没有内联样式的元素有效。
  64.  
  65. 2.changeInlineStyle(selectorStr, cssStr);
  66. 有些元素具有内联样式并且带有!important,导致上面的方法失效,这时我们用changeInlineStyle
  67. 来修改元素的内联样式。这个函数同样将添加的选择器和CSS保存到数组里,之后先设置最短和最长修改
  68. 时间,再用定时器循环修改内联样式。每次循环若找到元素就修改,再判断是否到达最短修改时间,是
  69. 就停止循环,否就继续循环,若未找到元素就持续循环,直到达到最长修改时间。这样既防止修改一次
  70. 后被后加载的CSS覆盖,又防止找不到元素后一直循环检测,浪费CPU资源。
  71.  
  72. 3.keepChangeInlineStyle(selectorStr, cssStr);
  73. 而有些元素不但具有内联样式加!important而且会不定时改变内联样式,这时第二个函数就失效了,那
  74. 我们就用第三个函数keepChangeInlineStyle。这个函数类似于第二个函数,不同点是他会不停地循环,
  75. 一旦检测到元素的内联样式与指定的样式不符,就将其修改。
  76. 情况二:
  77. 目标元素在iframe框架内,js无法找到元素
  78. 解决方法:
  79. match 后面匹配的网址换成 iframe 内的网址即可
  80.  
  81. 最后要特别感谢油猴中文网bbs.tampermonkey.net.cn对我的帮助!特别是热情的李恒道哥哥!
  82. */
  83.  
  84. "use strict";
  85.  
  86. // 在这里添加要改变的样式 ==============================================================================================
  87. function addStyleArr() {
  88. //百度文库样式
  89. if (web("wenku.baidu.com")) {
  90. //百度文库的第一种页面
  91. if (document.querySelector("body.tpl-xreader")) {
  92. changeInlineStyle(
  93. "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",
  94. "display: none !important;"
  95. );
  96. changeInlineStyle(
  97. ".center-wrapper.zoom-scale.classic",
  98. "width: calc(100% - 280px) !important;height: 120% !important;"
  99. );
  100. addCssSelector(
  101. ".creader-canvas",
  102. "width: 1000px !important;height: 100% !important;"
  103. );
  104. }
  105. //百度文库的第二种页面,office文档
  106. else if (document.querySelector(".catalog-main")) {
  107. changeInlineStyle(
  108. ".tool-bar-wrapper.wk-web-4774.fade-in,.theme-enter-wrap,.sidebar-wrapper",
  109. "display: none !important;"
  110. );
  111. }
  112. //百度文库的第三种页面,几百页的书
  113. else if (document.querySelector(".doc-info-wrapper")) {
  114. changeInlineStyle(
  115. ".tool-bar-wrapper.wk-web-4774.fade-in,.theme-enter-wrap,.sidebar-wrapper",
  116. "display: none !important;"
  117. );
  118. }
  119. }
  120. //CSDN样式
  121. else if (web("csdn.net")) {
  122. addCssSelector(
  123. ".main_father.clearfix.d-flex.justify-content-center,body,#userSkin",
  124. "background: #06090a !important;"
  125. );
  126. addCssSelector(".column_info_box", "position: unset !important;");
  127. if (1) {
  128. // CSDN 打印保存样式
  129. addCssSelector(
  130. "aside.blog_container_aside,div#blogColumnPayAdvert,.blog-tags-box,div#pcCommentBox,div#recommendNps,.template-box,\
  131. .blog-footer-bottom,.csdn-side-toolbar,.top-banner,.ag-tab-bar,.satisfied-component,.toolbar-advert,.passport-login-container,.hide-preCode-box,\
  132. .first-recommend-box,.second-recommend-box,.recommend-box,.left-toolbox,#csdn-toolbar,.operating",
  133. "display: none !important;"
  134. );
  135. // 黑底白字
  136. addCssSelector("html,body,div,p,td,blockquote,code,h1,h2,h3,h4,h5,h6","color: #aaa !important; background: black !important;");
  137. addCssSelector("img","background-color: white !important;");
  138. addCssSelector(
  139. "main,div#mainBox,.main_father.clearfix.d-flex.justify-content-center",
  140. "width: 100% !important;margin: 0 !important;padding: 0 !important;float: left !important;width: 100% !important;"
  141. );
  142. addCssSelector(
  143. "main div.blog-content-box",
  144. "padding: 0 10% !important;"
  145. );
  146. addCssSelector(".con-l-tag", "width: 100% !important;");
  147. addCssSelector("#toolBarBox > div", "background-color: #0000 !important;");
  148. //代码展开
  149. addCssSelector(".set-code-hide", "height: auto !important;");
  150. }
  151. }
  152. //百度
  153. else if (web("www.baidu.com")) {
  154. addCssSelector(
  155. "#lg>img,#s-top-left,#u1,#s-hotsearch-wrapper,#bottom_layer,#s_side_wrapper,#s_top_wrap,#s_wrap",
  156. "display:none !important;"
  157. );
  158. }
  159. //百度翻译样式
  160. else if (web("fanyi.baidu.com")) {
  161. addCssSelector(
  162. "#transOtherRight,.vip-btn-activity,#app-guide",
  163. "display:none !important;"
  164. );
  165. }
  166. //bilibili样式
  167. else if (web("www.bilibili.com")) {
  168. addCssSelector(
  169. ".bpx-player-container[data-screen=full] .bpx-player-shadow-progress-area,.bpx-player-shadow-progress-area",
  170. "height: 5px !important; visibility:visible !important; opacity: 1 !important;"
  171. );
  172. }
  173. //博客园样式
  174. else if (web("www.cnblogs.com")) {
  175. if (1) {
  176. // 博客园打印保存样式
  177. addCssSelector(
  178. "#notHomeTopCanvas,#articleInfo > a,#open-button,#dayNightSwitch,#aplayer,#cnblogs_post_body > div.essaySuffix-box,#blog_post_info_block,#cnblogs_post_body > p.essaySuffix-eof,\
  179. #comment_form,#footer",
  180. "display: none !important;"
  181. );
  182. addCssSelector(
  183. "*",
  184. "color: #bbb !important; background: black !important"
  185. );
  186. }
  187. }
  188. //it1352样式
  189. else if (web("www.it1352.com")) {
  190. // 展开全部内容
  191. addCssSelector(".arc-body-main", "height: auto !important;");
  192. addCssSelector(".arc-body-main-more", "display: none !important;");
  193. }
  194. // 抖音样式
  195. else if (web("www.douyin.com")) {
  196. // 进度条颜色
  197. addCssSelector(
  198. "xg-played.xgplayer-progress-played",
  199. "background-color: white !important;"
  200. );
  201. }
  202. // 标小智Logo
  203. else if (web("www.logosc.cn")) {
  204. // logo去水印放大
  205. if (1) {
  206. addCssSelector(
  207. "rect.watermarklayer,html::after",
  208. "display: none !important;"
  209. );
  210. addCssSelector(
  211. ".flex-1 .swiper-slide-active .svg-card svg",
  212. "position: fixed;width: 1350px;height: 1350px;top: -63%;left: 10%;z-index: 99999999 !important;"
  213. );
  214. }
  215. }
  216. // 百度经验
  217. else if (web("jingyan.baidu.com")) {
  218. // 自动展开
  219. addCssSelector(
  220. "#exp-article > div.exp-content-outer > div",
  221. "overflow: visible !important; height: auto !important; max-height: -webkit-fill-available !important;"
  222. );
  223. addCssSelector(
  224. "div#main-content,img.exp-image-default.pic-cursor-pointer",
  225. "min-width: 100% !important;"
  226. );
  227. //图片变大
  228. addCssSelector(
  229. ".exp-image-wraper",
  230. "min-width: 80% !important;"
  231. );
  232. addCssSelector(
  233. "#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,\
  234. #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)",
  235. "display: none !important;"
  236. );
  237. }
  238. // 超星学习通
  239. else if (web("chaoxing.com") || web("ananas")) {
  240. // 当前目录高亮
  241. addCssSelector(
  242. ".posCatalog_active",
  243. "color: red !important;"
  244. );
  245. // addCssSelector(
  246. // "#video > div.vjs-control-bar",
  247. // "display: none !important;"
  248. // );
  249. }
  250. //必应
  251. else if (web("bing.com")) {
  252. // 去除建议栏
  253. addCssSelector(
  254. "#wikiWidgetContainer",
  255. "display: none !important;"
  256. );
  257. }
  258. //百家号百度
  259. else if (web("baijiahao.baidu.com")) {
  260. // 简洁打印样式
  261. addCssSelector(
  262. ".-F_R2,._2v051,._3m1xk,._2LcVE,._1LjGN,._3YM_A,.xcp-publish-title,.xcp-publish,.xcp-list,#commentModule,.Wo80H",
  263. "display: none !important;"
  264. );
  265. addCssSelector(
  266. ".EaCvy",
  267. "width: 100% !important;"
  268. );
  269. // 黑底白字
  270. addCssSelector(
  271. "*",
  272. "color: #ccc !important; background: black !important;"
  273. );
  274. }
  275. //百度知道
  276. else if (web("zhidao.baidu.com")) {
  277. // 简洁打印样式
  278. addCssSelector(
  279. ".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,\
  280. #qbleftdown-container,.show-answer-dispute,.wgt-replyer-all-follow-box,.wgt-answers-mask,.bottom-dashed-line",
  281. "display: none !important;"
  282. );
  283. addCssSelector(
  284. "article#qb-content,a.ikqb_img_alink",
  285. "min-width:100% !important;"
  286. );
  287. addCssSelector(
  288. ".ikqb_img",
  289. "min-width:70% !important; min-height:70% !important; max-height:70% !important;"
  290. );
  291. addCssSelector(
  292. ".bd.answer,div#answer-content-1983575631",
  293. "height: auto !important;"
  294. );
  295. addCssSelector(
  296. ".wgt-replyer-all,.line.content-wrapper",
  297. "visibility: visible !important;"
  298. );
  299. // 黑底白字
  300. addCssSelector(
  301. ".line.content-wrapper",
  302. "color: #ccc !important; background: black !important;"
  303. );
  304. }
  305. //知乎
  306. else if (web("zhihu.com")) {
  307. addCssSelector(
  308. ".Modal-wrapper,.is-hidden.is-fixed,.css-1jf8wzl,.css-1ynzxqw,.QuestionHeader-tags,.QuestionHeader-side,.Question-sideColumn",
  309. "display: none !important;"
  310. );
  311. addCssSelector(
  312. ".EaCvy",
  313. "width: 100% !important;"
  314. );
  315. addCssSelector(
  316. "html",
  317. "overflow: visible !important;"
  318. );
  319. addCssSelector(
  320. ".Question-mainColumn",
  321. "width: 100%; !important;"
  322. );
  323. }
  324. }
  325. // 添加完毕 ===========================================================================================================
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334. //以下是功能实现,请慎重修改!
  335.  
  336. //jsInserted标志JS代码是否已全部注入,如果未完全注入就开始调用函数会出现函数未定义错误
  337. var jsInserted = false;
  338. var checkInserted = setInterval(() => {
  339. if (jsInserted) {
  340. // 请在这里调用 StartToChange
  341. StartToChange();
  342. clearInterval(checkInserted);
  343. }
  344. }, 100);
  345.  
  346. //----------------------------------------------------- 参数设置
  347. var initTime = 1000 * 6; //初始识别网页时间
  348. //普通检测参数:
  349. var commonCycleTime = 300; //周期
  350. var minTime = 1000 * 6; //最短检测时间
  351. var maxTime = 1000 * 15; //最长检测时间
  352. //持续监测参数:
  353. var keepCycleTime = 500; //周期
  354. //-----------------------------------------------------
  355. //普通元素列表
  356. var commonEleArr = [];
  357.  
  358. //需要持续检测的元素列表
  359. var keepSetArr = [];
  360.  
  361. //添加css选择器的元素列表
  362. var CSSArr = [];
  363.  
  364. //添加style标签,适用于没有内联样式的元素
  365. function addCssSelector(selectorStr, cssStr) {
  366. CSSArr.push({ selector: selectorStr, css: cssStr });
  367. }
  368. //改变内敛样式,适用于具有内联样式并且不会变动的元素
  369. //参数1:选择器,参数2:样式
  370. function changeInlineStyle(selectorStr, cssStr) {
  371. //保存每一个 选择器字符串 和 样式字符串 为一个 对象,添加到数组里
  372. commonEleArr.push({ selector: selectorStr, css: cssStr });
  373. }
  374. //持续改变内敛样式,适用于具有内联样式并且不定时变动的元素
  375. function keepChangeInlineStyle(selectorStr, cssStr) {
  376. keepSetArr.push({ selector: selectorStr, css: cssStr });
  377. }
  378.  
  379. //判断网址
  380. function web(urlStr) {
  381. if (RegExp(urlStr, "i").test(location.href)) {
  382. return true;
  383. } else {
  384. return false;
  385. }
  386. }
  387.  
  388. //循环检测,直到出现或超时
  389. function setStyle() {
  390. var isEndLoop = false; //是否结束循环的标记
  391. var laterStop = true; //是否长时间未找到,需要停止循环
  392. var overMinTime = false; //在最短时间内,不管找没找到都不许停,否则会被后来加载的css覆盖
  393.  
  394. setTimeout(function () {
  395. overMinTime = true;
  396. }, minTime);
  397.  
  398. var checkLoop = setInterval(function () {
  399. //达到最短检测时间才开始判断是否停止,没到最短时间isEndTime始终是false
  400. if (overMinTime) {
  401. isEndLoop = true;
  402. }
  403. //遍历检测元素是否存在
  404. for (var i = 0; i < commonEleArr.length; i++) {
  405. var objList = document.querySelectorAll(commonEleArr[i].selector);
  406. //如果找到了就改样式
  407. if (objList.length > 0) {
  408. for (var j = 0; j < objList.length; j++) {
  409. //如果改过了就不要重复改了
  410. if (objList[j].style.cssText != commonEleArr[i].css) {
  411. objList[j].style.cssText = commonEleArr[i].css;
  412. }
  413. }
  414. }
  415. //没有找到就标记false,继续检测
  416. else {
  417. isEndLoop = false;
  418. }
  419. }
  420. if (isEndLoop) {
  421. clearInterval(checkLoop);
  422. laterStop = false; //已经全部找到并停止了,不需要再次停止
  423. console.log("Jawon: 普通循环检测已结束");
  424. }
  425. }, commonCycleTime);
  426. //到最长检测时间后还没找到就不找了
  427. setTimeout(function () {
  428. if (laterStop) {
  429. clearInterval(checkLoop);
  430. console.log("Jawon: 普通循环检测已结束,但仍有元素未找到!");
  431. }
  432. }, maxTime);
  433. }
  434.  
  435. //持续循环检测
  436. function keepSetStyle() {
  437. setInterval(function () {
  438. //遍历检测元素
  439. for (var i = 0; i < keepSetArr.length; i++) {
  440. var objList = document.querySelectorAll(keepSetArr[i].selector);
  441.  
  442. for (var j = 0; j < objList.length; j++) {
  443. if (objList[j].style.cssText != keepSetArr[i].css) {
  444. objList[j].style.cssText = keepSetArr[i].css;
  445. }
  446. }
  447. }
  448. }, keepCycleTime);
  449. }
  450.  
  451. //在html起始和末尾分别添加style标签
  452. function setCssSelector() {
  453. var myStyleFirst = document.createElement("style");
  454. var myStyleLast = document.createElement("style");
  455. myStyleFirst.className = "CssByJawon";
  456. myStyleLast.className = "CssByJawon";
  457. for (let i = 0; i < CSSArr.length; i++) {
  458. myStyleFirst.innerHTML +=
  459. CSSArr[i].selector + "{" + CSSArr[i].css + "}";
  460. myStyleLast.innerHTML += CSSArr[i].selector + "{" + CSSArr[i].css + "}";
  461. }
  462. var htmlObj = document.querySelector("html");
  463. htmlObj.insertBefore(myStyleFirst, htmlObj.firstChild);
  464. htmlObj.appendChild(myStyleLast);
  465. }
  466.  
  467. //有些网站有多种样式布局,需要通过查找某个元素来辨别,为了保证找到该元素,需要多找几次,避免该元素还没加载出来。
  468. function StartToChange() {
  469. var laterStop = true;
  470. var addEleLoop = setInterval(function () {
  471. if (
  472. commonEleArr.length == 0 &&
  473. keepSetArr.length == 0 &&
  474. CSSArr.length == 0
  475. ) {
  476. //如果没有元素就添加
  477. addStyleArr();
  478. //一旦添加成功,立即停止识别,开始循环检测,修改样式
  479. if (
  480. commonEleArr.length != 0 ||
  481. keepSetArr.length != 0 ||
  482. CSSArr.length != 0
  483. ) {
  484. clearInterval(addEleLoop);
  485. laterStop = false;
  486. if (commonEleArr.length > 0) {
  487. setStyle();
  488. console.log("Jawon: 普通循环检测已开启");
  489. }
  490. if (keepSetArr.length > 0) {
  491. keepSetStyle();
  492. console.log("Jawon: 持续循环检测已开启");
  493. }
  494. if (CSSArr.length > 0) {
  495. setCssSelector();
  496. console.log("Jawon: 已添加选择器");
  497. }
  498. }
  499. }
  500. }, 200);
  501. //initTime之内未添加元素就放弃,说明未识别到网站
  502. setTimeout(function () {
  503. if (laterStop) {
  504. clearInterval(addEleLoop);
  505. console.log("Jawon: 未识别到网站");
  506. }
  507. }, initTime);
  508. }
  509.  
  510. // js代码插入完毕的标志
  511. jsInserted = true;

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址