Wokeden

修改高登網頁嘅台名及背景顏色

  1. // ==UserScript==
  2. // @name Wokeden
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.4
  5. // @description 修改高登網頁嘅台名及背景顏色
  6. // @author 居理夫人
  7. // @match *://*.hkgolden.com/*
  8. // @grant none
  9. // @license GNU General Public License v3.0.
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // 修改台名嘅list
  16. const nameChanges = {
  17. "吹水台": "中立台",
  18. "高登熱": "Trending",
  19. "最 新": "多元新政",
  20. "時事台": "社會正義",
  21. "娛樂台": "多元性格",
  22. "體育台": "環保運動",
  23. "財經台": "社會主義",
  24. "學術台": "性別認同",
  25. "講故台": "白人暴力",
  26. "創意台": "多樣創意",
  27. "超自然台": "JSO運動",
  28. "優惠台": "零元購物",
  29. "遊戲台": "政確遊戲",
  30. "飲食台": "素食文化",
  31. "旅遊台": "FREE GAZA"
  32. };
  33.  
  34. // 修改台icon嘅list
  35. const svgMapping = {
  36. "channel-BW": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-BW.svg",
  37. "channel-CA": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-CA.svg",
  38. "channel-CP": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-CP.svg",
  39. "channel-ED": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-ED.svg",
  40. "channel-EP": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-EP.svg",
  41. "channel-ET": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-ET.svg",
  42. "channel-FN": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-FN.svg",
  43. "channel-GM": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-GM.svg",
  44. "channel-SN": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-SN.svg",
  45. "channel-SP": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-SP.svg",
  46. "channel-ST": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-ST.svg",
  47. "channel-SY": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-SY.svg",
  48. "channel-TR": "https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/bef98d610730792b2de8d5989b73e2e393c30a1c/channel-TR.svg"
  49. };
  50.  
  51.  
  52. // �去改顏色同埋台名
  53. function changeBackgroundColors() {
  54. // 修改台名
  55. const spans = document.querySelectorAll('span.MuiTypography-root.MuiListItemText-primary');
  56. spans.forEach(span => {
  57. const newText = nameChanges[span.textContent.trim()];
  58. if (newText) {
  59. span.textContent = newText; // 修改台名
  60. }
  61.  
  62. });
  63. // 修改喺文章header位置嘅台名
  64. const currentchannel = document.evaluate('/html/body/div[1]/div/div[1]/main/div[3]/div[1]/header/div/div/div[1]/div[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  65.  
  66. if (currentchannel) {
  67. const newText = nameChanges[currentchannel.textContent.trim()];
  68. if (newText) {
  69. currentchannel.textContent = newText; // 修改台名
  70. }
  71. }
  72.  
  73.  
  74. // 修改背景顏色
  75. document.body.style.background = 'linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet)';
  76.  
  77. const header = document.evaluate('/html/body/div[1]/div/header', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  78. if (header) {
  79. header.style.background = 'linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet)'; // 修改持續header背景
  80. }
  81.  
  82. // 修改轉台欄位多個div嘅背景
  83. const navDivs = [
  84. '/html/body/div[1]/div/div/nav/div/div/div/div[1]',
  85. '/html/body/div[1]/div/div/nav/div/div/div/div[2]/div',
  86. '/html/body/div[1]/div/div/nav/div/div/div/div[3]/div',
  87. '/html/body/div[1]/div/div/nav/div/div/div/div[4]/div',
  88. '/html/body/div[1]/div/div/nav/div/div/div/div[5]/div',
  89. '/html/body/div[1]/div/div/nav/div/div/div/div[6]/div'
  90. ];
  91. navDivs.forEach(xpath => {
  92. const element = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  93. if (element) {
  94. element.style.background = 'linear-gradient(rgb(251 22 22) 0%, rgb(215 126 85) 80%, rgba(255, 0, 0, 0) 100%)';
  95. }
  96. });
  97.  
  98. const mainHeader = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[1]/header', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  99. if (mainHeader) {
  100. mainHeader.style.background = 'linear-gradient(to right, #ff8d00, #ffc300, #fffc00, #8dc600, #008204, #00c68d, #00fdfa, #005fff)'; // 修改主header背景
  101. }
  102.  
  103. const navBackground = document.evaluate('/html/body/div[1]/div/div/nav/div/div/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  104. if (navBackground) {
  105. navBackground.style.background = 'none'; // 修改轉台欄嘅背景
  106. }
  107.  
  108. const headerDiv = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[1]/header/div/div/div[1]/div[2]/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  109. if (headerDiv) {
  110. headerDiv.style.background = '#b320a3'; // 修改ForumMenu背景
  111. }
  112.  
  113. const ForumMenu = document.evaluate('//*[@id="mui-component-select-切換"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  114. if (ForumMenu) {
  115. ForumMenu.style.background = '#b320a3'; // 修改ForumMenu背景
  116. }
  117.  
  118. const searchtype = document.evaluate('//*[@id="mui-component-select-搜尋"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  119. const searchbar = document.evaluate('/html/body/div[1]/div/header/div/div/div[2]/div/div/div[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  120. const searchbutton = document.evaluate('/html/body/div[1]/div/header/div/div/div[2]/div/div/div[3]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  121.  
  122. // 修改searchbar
  123.  
  124. if (searchtype) {
  125. searchtype.style.background = '#b320a3';
  126. }
  127. if (searchbar) {
  128. searchbar.style.backgroundColor = "#b320a3";
  129. }
  130. if (searchbutton) {
  131. searchbutton.style.backgroundColor = '#b320a3';
  132. }
  133.  
  134. const sideAD1 = document.evaluate('/html/body/div[1]/div/div/main/div[2]/div[2]/div[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  135. const sideAD2 = document.evaluate('/html/body/div[1]/div/div/main/div[2]/div[2]/div[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  136.  
  137. if (sideAD1) {
  138. sideAD1.style.background = "#b320a3";
  139. }
  140. if (sideAD2) {
  141. sideAD2.style.background = '#b320a3';
  142. }
  143.  
  144. const bam1 = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[2]/div/div[1]/div/div/header', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  145. const bam2 = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[2]/div/div[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  146. const bamBG1 = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[2]/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  147. const bamBG2 = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[2]/div/div[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  148.  
  149. if (bam1) {
  150. bam1.style.background = "red";
  151. }
  152. if (bam2) {
  153. bam2.style.background = '#ac0707';
  154. }
  155. if (bamBG1 && bamBG2) {
  156. bamBG1.style.background = 'none';
  157. bamBG2.style.background = 'none';
  158. }
  159. const HKGLOGO = document.evaluate('/html/body/div[1]/div/header/div/div/div[1]/div/a/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  160. if (HKGLOGO) {
  161. HKGLOGO.style.backgroundImage = 'url(https://raw.githubusercontent.com/Ramen-LadyHKG/wokeden/refs/heads/main/wokeden_logo.png)';
  162. }
  163.  
  164. const AppsAD = document.evaluate('/html/body/div[1]/div/div/main/div[3]/div[2]/div/div[2]/div/div[2]/img', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  165. if (AppsAD) {
  166. AppsAD.style.display = 'none';
  167. }
  168.  
  169. const profileMenu = document.evaluate('/html/body/div[4]/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  170. if (profileMenu) {
  171. profileMenu.style.background = 'linear-gradient(to bottom, red, orange, yellow, green, cyan, blue, violet)';
  172. profileMenu.style.color = 'black';
  173.  
  174. }
  175.  
  176. // 修改文章 div 嘅背景顏色
  177. let index = 1;
  178. while (true) {
  179. const BlockDiv = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  180. const NormalDiv = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  181. const AdDiv = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div[2]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  182. const BlockAd1Div = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div[1]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  183. const BlockAd3Div = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div[3]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  184. const BlockAdNextDiv = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div[2]/div`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  185. const NextDiv = document.evaluate(`/html/body/div[1]/div/div/main/div[3]/div[1]/div/div[${index}]/div[1]/div`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  186.  
  187. // 檢查正常情況(文章)
  188. if (NormalDiv && !BlockDiv.textContent.includes("Blocked User")) {
  189. if (AdDiv) {
  190. AdDiv.style.background = 'rgb(134, 5, 5)'; // 廣告背景
  191. NextDiv.style.background = 'rgb(194, 54, 54)'; // 廣告後嘅正常文章
  192. } else {
  193. NormalDiv.style.background = 'rgb(194, 54, 54)'; // 正常文章背景
  194. }
  195. index++;
  196. }
  197. // 檢查特殊情況(封鎖用戶)
  198. else if (BlockDiv && BlockDiv.textContent.includes("Blocked User") && !BlockAd3Div) {
  199. BlockDiv.style.background = 'rgb(132, 23, 23)'; // 封鎖用戶背景
  200. index++;
  201. }
  202. // 檢查特殊情況(同時出現封鎖用戶同埋廣告)
  203. else if (BlockAd3Div && !BlockAd1Div) {
  204. BlockAd1Div.style.background = 'rgb(132, 23, 23)'; // 封鎖用戶背景
  205. BlockAd3Div.style.background = 'rgb(134, 5, 5)'; // 廣告背景
  206. BlockAdNextDiv.style.background = 'rgb(194, 54, 54)'; // 廣告後的正常文章
  207. index++;
  208. } else {
  209. break; // 如果搵唔到更多div就停止
  210. }
  211. }
  212. }
  213.  
  214. // 改轉台icon
  215. function replaceSVGWithImg() {
  216. const svgElements = document.querySelectorAll('svg[aria-hidden="true"]');
  217.  
  218. svgElements.forEach(svg => {
  219. const useElement = svg.querySelector('use');
  220. if (useElement) {
  221. const href = useElement.getAttribute('xlink:href');
  222. const svgId = href ? href.replace('#', '') : null;
  223. const imgSrc = svgMapping[svgId];
  224.  
  225. if (imgSrc) {
  226. const imgElement = document.createElement('img');
  227. imgElement.src = imgSrc;
  228. imgElement.width = 16;
  229. imgElement.height = 16;
  230. imgElement.alt = svgId;
  231.  
  232. // 取消 SVG 改用im g
  233. svg.parentNode.replaceChild(imgElement, svg);
  234. }
  235. }
  236. });
  237. }
  238.  
  239. // 當頁面載入完成就執行一次
  240. window.addEventListener('load', () => {
  241. changeBackgroundColors();
  242. replaceSVGWithImg();
  243. });
  244.  
  245. // 用MutationObserver 去監控 DOM 嘅變化
  246. const observer = new MutationObserver((mutationsList) => {
  247. for (const mutation of mutationsList) {
  248. if (mutation.type === 'childList' || mutation.type === 'subtree') {
  249. changeBackgroundColors();
  250. replaceSVGWithImg();
  251. break;
  252. }
  253. }
  254. });
  255.  
  256. observer.observe(document.body, { childList: true, subtree: true });
  257. })();
  258.