自定义 Bangumi 的 背景

自定义 bgm.tv、bangumi.tv 和 chii.in 的 背景

  1. // ==UserScript==
  2. // @name 自定义 Bangumi 的 背景
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.3
  5. // @description 自定义 bgm.tv、bangumi.tv 和 chii.in 的 背景
  6. // @author 墨云
  7. // @match *://bgm.tv/*
  8. // @match *://bangumi.tv/*
  9. // @match *://chii.in/*
  10. // @grant GM_registerMenuCommand
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // 默认设置
  17. let settings = {
  18. opacity: 0.5,
  19. backgroundImage: 'https://p.sda1.dev/20/8e251c2308d4d5cffaf1098cee9a12c8/6.jpg',
  20. textBrightness: 1 // 默认文字亮度
  21. };
  22.  
  23. // 加载设置
  24. function loadSettings() {
  25. const savedSettings = localStorage.getItem('customCssSettings');
  26. if (savedSettings) {
  27. settings = JSON.parse(savedSettings);
  28. }
  29. }
  30.  
  31. // 保存设置
  32. function saveSettings() {
  33. localStorage.setItem('customCssSettings', JSON.stringify(settings));
  34. applyStyles();
  35. }
  36.  
  37. // 应用样式
  38. function applyStyles() {
  39. const css = `
  40. html::after {
  41. content: '';
  42. height: 100%;
  43. width: 100%;
  44. position: fixed;
  45. top: 0;
  46. left: 0;
  47. opacity: ${settings.opacity};
  48. background: linear-gradient(to right, rgb(250, 187, 187), rgb(238, 130, 146));
  49. background-image: url("${settings.backgroundImage}");
  50. background-size: cover;
  51. z-index: -1;
  52. }
  53. body {
  54. background: rgba(255, 255, 255, 1);
  55. color: #000; /* 加深文本颜色 */
  56. }
  57. #prgManager, #footerLinks, #columnTimelineInnerWrapper, .SidePanelMini.clearit, .calendarMini, .sidePanelHome, .subjectNav, #wiki_act-all, #latest_all, #empty_infobox, .subject_tag_section, .sideTpcList, tbody, #browserItemList {
  58. background: none !重要;
  59. opacity: 0.7;
  60. position: relative;
  61. font-weight: bold;
  62. color: #000 !重要;
  63. border-radius: 10px; /* 圆角 */
  64. }
  65. #prgManager img, #footerLinks img, #columnTimelineInnerWrapper img, .SidePanelMini.clearit img, .calendarMini img, .sidePanelHome img, .subjectNav img, #wiki_act-all img, #latest_all img, #empty_infobox img, .subject_tag_section img, .sideTpcList img,
  66. .avatarNeue.avatarSize48 img, .avatar img, #browserItemList img {
  67. opacity: 1 !重要;
  68. }
  69. #prgManager::after, #footerLinks::after, #columnTimelineInnerWrapper::after, .SidePanelMini.clearit::after, .calendarMini::after, .sidePanelHome::after, .subjectNav::after, #wiki_act-all::after, #latest_all::after, #empty_infobox::after, .subject_tag_section::after, .sideTpcList::after, #browserItemList::after {
  70. content: "";
  71. background: inherit;
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. right: 0;
  76. bottom: 0;
  77. opacity: 0.5;
  78. pointer-events: none;
  79. }
  80. /* Add the following CSS to target <span> tags */
  81. span {
  82. filter: brightness(${settings.textBrightness}); /* Adjust the value to change text brightness */
  83. font-weight: bold; /* Optional: to make the text bolder */
  84. }
  85. `;
  86. let style = document.createElement('style');
  87. style.textContent = css;
  88. document.head.appendChild(style);
  89. }
  90.  
  91. // 创建设置面板
  92. function createSettingsPanel() {
  93. const backgroundImage = prompt('请输入背景图链接:', settings.backgroundImage);
  94. if (backgroundImage !== null) {
  95. settings.backgroundImage = backgroundImage;
  96. }
  97.  
  98. const opacity = prompt('请输入透明度 (0 到 1 之间的数值):', settings.opacity);
  99. if (opacity !== null) {
  100. settings.opacity = parseFloat(opacity);
  101. }
  102.  
  103. const textBrightness = prompt('请输入文字亮度 (0 到 1 之间的数值):', settings.textBrightness);
  104. if (textBrightness !== null) {
  105. settings.textBrightness = parseFloat(textBrightness);
  106. }
  107.  
  108. saveSettings();
  109. }
  110.  
  111. // 插入设置面板按钮
  112. function insertSettingsButton() {
  113. const secTab = document.querySelector('.secTab.rr');
  114. if (secTab) {
  115. const li = document.createElement('li');
  116. li.innerHTML = '<a href="javascript:void(0);" id="customSettingsButton">自定义背景设置</a>';
  117.  
  118. const baseSettingTab = secTab.querySelector('li:nth-child(2)');
  119. if (baseSettingTab) {
  120. secTab.insertBefore(li, baseSettingTab);
  121. }
  122.  
  123. document.getElementById('customSettingsButton').addEventListener('click', createSettingsPanel);
  124. }
  125. }
  126.  
  127. // 初始化
  128. function initialize() {
  129. const settingsPages = [
  130. /^https:\/\/bgm\.tv\/settings/,
  131. /^https:\/\/chii\.in\/settings/,
  132. /^https:\/\/bangumi\.tv\/settings/
  133. ];
  134.  
  135. if (settingsPages.some(regex => regex.test(window.location.href))) {
  136. insertSettingsButton();
  137. }
  138.  
  139. loadSettings();
  140. applyStyles();
  141. }
  142.  
  143. initialize();
  144. // 注册(不可用)菜单命令
  145. GM_registerMenuCommand('自定义背景设置', createSettingsPanel);
  146.  
  147. })();

QingJ © 2025

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