Greasy Fork is available in English.

Bilibili 动态美化

动态粉粉嫩嫩,功能:1. 美化页面;2. 隐藏个人动态发布框;3. 隐藏右侧热门话题;4. 隐藏up发布的广告动态。希望大家多提意见,谢谢大家。

  1. // ==UserScript==
  2. // @name Bilibili 动态美化
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.6
  5. // @description 动态粉粉嫩嫩,功能:1. 美化页面;2. 隐藏个人动态发布框;3. 隐藏右侧热门话题;4. 隐藏up发布的广告动态。希望大家多提意见,谢谢大家。
  6. // @author Water WHNI
  7. // @match https://t.bilibili.com/*
  8. // @grant GM_addStyle
  9. // @grant GM_registerMenuCommand
  10. // @grant GM_setValue
  11. // @grant GM_getValue
  12. // @license MIT
  13. // ==/UserScript==
  14.  
  15. (function () {
  16. 'use strict';
  17.  
  18. // 获取自定义字段
  19. const defaultSettings = {
  20. customBackgroundURL: 'https://i0.hdslb.com/bfs/article/bfecb9a12cb9708d8d79bb9c17532e347747aeaf.jpg@1256w_708h_!web-article-pic.avif',
  21. hideElementsEnabled: true,
  22. hideRightSidebar: true,
  23. hidePostBar: true,
  24. autoFrash: true,
  25. autoClickInterval: 5,
  26. enableAutoClick: true,
  27. backgroundTransparency: 61,
  28. backgroundTransparency2: 81,
  29. backgroundTransparencyFloat: 91
  30. };
  31.  
  32. const settings = {};
  33. for (const key in defaultSettings) {
  34. settings[key] = GM_getValue(key, defaultSettings[key]);
  35. }
  36.  
  37. // 修改样式
  38. const styles = `
  39. .bili-dyn-card-video__body, .bili-dyn-card-live__body, .bili-dyn-card-pgc__body, .adblock-tips {border: none !important;}
  40. .adblock-tips {display: none !important;}
  41. .bili-dyn-sidebar {right: 5vw !important;}
  42. .bili-header__channel {background: none !important;}
  43. .bili-dyn-up-list__item__name.bili-ellipsis, .bili-dyn-time.fs-small, .item-desc, .bili-dyn-action, .bili-dyn-more__btn, .bili-dyn-card-video__stat__item, #bili-header-container span, svg {color: rgb(251, 114, 153) !important;}
  44. .bili-dyn-interaction__item__desc .bili-rich-text__content {color: #2f3238e0 !important;}
  45. .header-upload-entry {background-color: #fc8bab6b !important;}
  46. .bili-dyn-more__btn:hover {background-color: #fa5a5742 !important; border-radius: 50% !important;}
  47. .bili-dyn-card-video__desc, .bili-dyn-publishing__hint {color: #424549 !important;}
  48. .bili-dyn-list-notification.fs-small {color: rgb(251, 114, 153) !important;}
  49. .bili-dyn-content {
  50. border: 2px solid transparent !important;
  51. border-radius: 10px !important;;
  52. box-shadow: 0 0 0 rgb(251, 114, 153) !important;
  53. transition: box-shadow 0.3s ease-in-out !important;
  54. }
  55. .bili-dyn-content:hover {
  56. box-shadow: 0 0 15px rgb(251, 114, 153), 0 0 15px rgb(251, 114, 153) !important;
  57. background-color: #ffffff80 !important;
  58. }
  59. .bili-dyn-up-list__item__face {
  60. border: 1px solid transparent !important;;
  61. box-shadow: 0 0 0 rgb(251, 114, 153) !important;
  62. transition: box-shadow 0.3s ease-in-out !important;
  63. }
  64. .bili-dyn-up-list__item__face:hover {
  65. box-shadow: 0 0 5px rgb(251, 114, 153), 0 0 5px rgb(251, 114, 153) !important;;
  66. }
  67. .bili-dyn-up-list__nav.next .bili-dyn-up-list__nav__shadow {
  68. background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), rgb(251 114 153 / 60%) !important;
  69. }
  70. .bili-dyn-up-list__nav__shim {
  71. background: rgb(251 114 153 / 60%) !important;
  72. }
  73. .bili-dyn-up-list__nav.prev .bili-dyn-up-list__nav__shadow {
  74. background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), rgb(251 114 153 / 60%) !important;
  75. }
  76. .bili-album__watch__content {height: 30vw !important;}
  77. .bili-album__watch__content img {height: 30vw !important; max-width: 60% !important;}
  78. :root {
  79. --bg1: rgba(255, 255, 255, ${settings.backgroundTransparency / 100}) !important;
  80. --bg2: rgba(255, 255, 255, ${settings.backgroundTransparency2 / 100}) !important;
  81. --bg1_float: rgba(255, 255, 255, ${settings.backgroundTransparencyFloat / 100}) !important;
  82. }
  83. `;
  84. GM_addStyle(styles);
  85.  
  86. // 菜单功能函数
  87. const applyBackgroundImage = (url) => {
  88. GM_addStyle(`
  89. .bg {
  90. background-image: url("${url}") !important;
  91. background-size: cover !important;
  92. background-attachment: fixed !important;
  93. background-position: center center !important;
  94. background-repeat: no-repeat !important;
  95. height: 100% !important;
  96. }
  97. `);
  98. };
  99.  
  100. const hideSpecificElements = () => {
  101. document.querySelectorAll('.bili-dyn-list__item').forEach(item => {
  102. if (item.querySelector('.bili-rich-text-module.goods')) {
  103. item.style.display = 'none';
  104. }
  105. });
  106. };
  107.  
  108. const setupHideElements = () => {
  109. if (settings.hideElementsEnabled) {
  110. hideSpecificElements();
  111. new MutationObserver(hideSpecificElements).observe(document.body, {childList: true, subtree: true});
  112. }
  113. };
  114.  
  115. const applyBackgroundTransparency = (transparency, tB2, bg1F) => {
  116. GM_addStyle(`
  117. :root {
  118. --bg1: rgba(255, 255, 255, ${transparency / 100}) !important;
  119. --bg2: rgba(255, 255, 255, ${tB2 / 100}) !important;
  120. --bg1_float: rgba(255, 255, 255, ${bg1F / 100}) !important;
  121. }
  122. `);
  123. };
  124.  
  125. // 菜单功能实现
  126. setupHideElements();
  127. applyBackgroundImage(settings.customBackgroundURL);
  128.  
  129. if (settings.hideRightSidebar) {
  130. GM_addStyle('.right { display: none !important; }');
  131. GM_addStyle('#app > div.bili-dyn-home--member > main { width: 70vw !important; }');
  132. }
  133.  
  134. if (settings.hidePostBar) {
  135. GM_addStyle('.bili-dyn-publishing { display: none !important; }');
  136. GM_addStyle('#app > div.bili-dyn-home--member > main > section:nth-child(1) {display : none !important;}');
  137. GM_addStyle('.bili-dyn-up-list__window {padding: 20px 0 20px !important;}');
  138. GM_addStyle('.bili-dyn-up-list__window {margin-top: 2px !important;}');
  139. }
  140.  
  141. applyBackgroundTransparency(settings.backgroundTransparency, settings.backgroundTransparency2, settings.backgroundTransparencyFloat);
  142.  
  143. // 定时检查并点击元素
  144. const checkAndClick = () => {
  145. const selector = '#app > div.bili-dyn-home--member > main > section:nth-child(3) > div.bili-dyn-list > div.bili-dyn-list__notification > div';
  146. const element = document.querySelector(selector);
  147. if (element) {
  148. try {
  149. element.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
  150. } catch (e) {
  151. const event = document.createEvent('Event');
  152. event.initEvent('click', true, true);
  153. element.dispatchEvent(event);
  154. }
  155. }
  156. };
  157.  
  158. // 修改定时检查并点击功能实现
  159. let autoClickIntervalId;
  160. const setupAutoClick = () => {
  161. if (settings.enableAutoClick) {
  162. autoClickIntervalId = setInterval(checkAndClick, settings.autoClickInterval * 1000);
  163. }
  164. };
  165.  
  166. setupAutoClick();
  167.  
  168. // 创建隐藏开关
  169. const createToggle = (label, key) => {
  170. const container = document.createElement('div');
  171. container.style.cssText = `
  172. margin-bottom: 10px;
  173. display: flex;
  174. align-items: center;
  175. justify-content: space-between;
  176. `;
  177. const toggleLabel = document.createElement('label');
  178. toggleLabel.innerText = label;
  179. toggleLabel.style.cssText = `
  180. margin: 0;
  181. `;
  182. const checkbox = document.createElement('input');
  183. checkbox.type = 'checkbox';
  184. checkbox.checked = settings[key];
  185. checkbox.style.cssText = `
  186. margin-left: 10px;
  187. `;
  188. checkbox.onchange = () => settings[key] = checkbox.checked;
  189. container.append(toggleLabel, checkbox);
  190. return {container, checkbox};
  191. };
  192.  
  193. // 注册菜单
  194. // 注册菜单
  195. GM_registerMenuCommand('设置', () => {
  196. // 创建悬浮框
  197. const modal = document.createElement('div');
  198. modal.style.cssText = `
  199. position: fixed;
  200. top: 8vh;
  201. right: 1vw;
  202. padding: 20px;
  203. background-color: #fff;
  204. box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  205. border-radius: 10px;
  206. z-index: 9999;
  207. width: 320px;
  208. font-family: Arial, sans-serif;
  209. overflow: auto;
  210. `;
  211.  
  212. // 标题
  213. const modalHeader = document.createElement('div');
  214. modalHeader.style.cssText = `
  215. font-size: 20px;
  216. font-weight: bold;
  217. margin-bottom: 15px;
  218. text-align: center;
  219. `;
  220. modalHeader.innerText = '设置';
  221.  
  222. // 创建自定义背景图片输入框及应用按钮
  223. const bgInputContainer = document.createElement('div');
  224. bgInputContainer.style.cssText = `
  225. display: flex;
  226. align-items: center;
  227. margin-bottom: 10px;
  228. width: 100%;
  229. `;
  230. const bgInputLabel = document.createElement('label');
  231. bgInputLabel.innerText = '背景图片URL: ';
  232. bgInputLabel.style.cssText = `
  233. flex: 0 0 35%;
  234. `;
  235. const bgInput = document.createElement('input');
  236. bgInput.type = 'text';
  237. bgInput.value = settings.customBackgroundURL;
  238. bgInput.style.cssText = `
  239. flex: 1;
  240. padding: 5px;
  241. border: 1px solid #ccc;
  242. border-radius: 5px;
  243. margin-left: 10px;
  244. overflow: hidden;
  245. text-overflow: ellipsis;
  246. `;
  247. const applyBgButton = document.createElement('button');
  248. applyBgButton.innerText = '应用';
  249. applyBgButton.style.cssText = `
  250. width: 100%;
  251. padding: 5px 10px;
  252. background-color: #12a9df;
  253. color: white;
  254. border: none;
  255. border-radius: 5px;
  256. cursor: pointer;
  257. margin-bottom: 5px;
  258. `;
  259. applyBgButton.onclick = () => {
  260. const newURL = bgInput.value;
  261. GM_setValue('customBackgroundURL', newURL);
  262. applyBackgroundImage(newURL);
  263. };
  264. bgInputContainer.append(bgInputLabel, bgInput);
  265.  
  266. // 创建隐藏开关
  267. const {
  268. container: hideUpAdContainer,
  269. checkbox: hideUpAdCheckbox
  270. } = createToggle('隐藏UP广告动态', 'hideElementsEnabled');
  271. const {
  272. container: hideSidebarContainer,
  273. checkbox: hideSidebarCheckbox
  274. } = createToggle('隐藏右边栏', 'hideRightSidebar');
  275. const {
  276. container: hidePostBarContainer,
  277. checkbox: hidePostBarCheckbox
  278. } = createToggle('隐藏动态发布', 'hidePostBar');
  279. const {
  280. container: timerToggleContainer,
  281. checkbox: timerToggleCheckbox
  282. } = createToggle('自动加载新动态', 'enableAutoClick');
  283.  
  284. // 点击间隔输入框
  285. const intervalContainer = document.createElement('div');
  286. intervalContainer.style.cssText = `
  287. display: flex;
  288. align-items: center;
  289. margin-bottom: 10px;
  290. width 100%;
  291. `;
  292. const intervalLabel = document.createElement('label');
  293. intervalLabel.innerText = '点击间隔 (秒): ';
  294. intervalLabel.style.cssText = `
  295. flex: 0 0 35%;
  296. `;
  297. const intervalInput = document.createElement('input');
  298. intervalInput.type = 'number';
  299. intervalInput.min = '1';
  300. intervalInput.value = settings.autoClickInterval || 5;
  301. intervalInput.style.cssText = `
  302. flex: 1;
  303. padding: 5px;
  304. margin-left: 10px;
  305. border: 1px solid #ccc;
  306. border-radius: 5px;
  307. `;
  308. intervalInput.oninput = () => {
  309. const interval = Math.max(1, parseInt(intervalInput.value));
  310. settings.autoClickInterval = interval;
  311. GM_setValue('autoClickInterval', interval);
  312. if (settings.enableAutoClick) {
  313. clearInterval(autoClickIntervalId);
  314. autoClickIntervalId = setInterval(checkAndClick, interval * 1000);
  315. }
  316. };
  317. intervalContainer.append(intervalLabel, intervalInput);
  318.  
  319. // 背景透明度滑块
  320. const sliderContainer = document.createElement('div');
  321. sliderContainer.style.cssText = `
  322. display: flex;
  323. align-items: center;
  324. margin-bottom: 10px;
  325. width: 100%;
  326. `;
  327. const sliderLabel = document.createElement('label');
  328. sliderLabel.innerText = '背景透明度: ';
  329. sliderLabel.style.cssText = `
  330. flex: 0 0 35%;
  331. `;
  332. const slider = document.createElement('input');
  333. slider.type = 'range';
  334. slider.min = '0';
  335. slider.max = '100';
  336. slider.value = settings.backgroundTransparency;
  337. slider.style.cssText = `
  338. flex: 1;
  339. margin-left: 5px;
  340. `;
  341.  
  342. slider.oninput = () => {
  343. const transparency = parseInt(slider.value);
  344. settings.backgroundTransparency2 = Math.min(transparency + 20, 100);
  345. settings.backgroundTransparencyFloat = Math.min(transparency + 50, 100);
  346. GM_setValue('backgroundTransparency', transparency);
  347. GM_setValue('backgroundTransparency2', settings.backgroundTransparency2);
  348. GM_setValue('backgroundTransparencyFloat', settings.backgroundTransparencyFloat);
  349. applyBackgroundTransparency(transparency, settings.backgroundTransparency2, settings.backgroundTransparencyFloat);
  350. };
  351. sliderContainer.append(sliderLabel, slider);
  352.  
  353. // 创建按钮容器
  354. const buttonContainer = document.createElement('div');
  355. buttonContainer.style.cssText = `
  356. display: flex;
  357. justify-content: space-between;
  358. margin-top: 15px;
  359. `;
  360. const closeButton = document.createElement('button');
  361. closeButton.innerText = '关闭';
  362. closeButton.style.cssText = `
  363. padding: 5px 10px;
  364. background-color: #f44336;
  365. color: white;
  366. border: none;
  367. border-radius: 5px;
  368. cursor: pointer;
  369. `;
  370. closeButton.onclick = () => document.body.removeChild(modal);
  371.  
  372. const saveButton = document.createElement('button');
  373. saveButton.innerText = '保存';
  374. saveButton.style.cssText = `
  375. padding: 5px 10px;
  376. background-color: #4CAF50;
  377. color: white;
  378. border: none;
  379. border-radius: 5px;
  380. cursor: pointer;
  381. `;
  382. saveButton.onclick = () => {
  383. GM_setValue('hideElementsEnabled', hideUpAdCheckbox.checked);
  384. GM_setValue('hideRightSidebar', hideSidebarCheckbox.checked);
  385. GM_setValue('hidePostBar', hidePostBarCheckbox.checked);
  386. GM_setValue('enableAutoClick', timerToggleCheckbox.checked);
  387. GM_setValue('autoClickInterval', Math.max(1, parseInt(intervalInput.value)));
  388. location.reload();
  389. };
  390.  
  391. buttonContainer.append(saveButton, closeButton);
  392.  
  393. // 添加元素到悬浮框
  394. modal.append(
  395. modalHeader,
  396. bgInputContainer, applyBgButton,
  397. hideUpAdContainer,
  398. hideSidebarContainer,
  399. hidePostBarContainer,
  400. timerToggleContainer,
  401. intervalContainer,
  402. sliderContainer,
  403. buttonContainer
  404. );
  405.  
  406. document.body.appendChild(modal);
  407. });
  408.  
  409. })();