☰

Bilibili - 优化未登录(不可用)情况下的移动网页端

优化未登录(不可用)情况下的移动网页端的使用体验 | V0.7 累积更新

  1. // ==UserScript==
  2. // @name         Bilibili - 优化未登录(不可用)情况下的移动网页端
  3. // @namespace    https://bilibili.com/
  4. // @version      0.7
  5. // @description  优化未登录(不可用)情况下的移动网页端的使用体验 | V0.7 累积更新
  6. // @license      GPL-3.0
  7. // @author       DD1969
  8. // @match        https://m.bilibili.com/*
  9. // @icon         https://www.bilibili.com/favicon.ico
  10. // @require      https://update.gf.qytechs.cn/scripts/475332/1250588/spark-md5.js
  11. // @require      https://update.gf.qytechs.cn/scripts/510239/1454424/viewer.js
  12. // @require      https://update.gf.qytechs.cn/scripts/524844/1567651/bilibili-mobile-comment-module.js
  13. // @require      https://update.gf.qytechs.cn/scripts/512576/1464552/inject-viewerjs-style.js
  14. // @require      https://update.gf.qytechs.cn/scripts/512574/1464548/inject-bilibili-comment-style.js
  15. // @grant        none
  16. // @run-at       document-end
  17. // ==/UserScript==
  18.  
  19. (async function() {
  20.   'use strict';
  21.  
  22.   // no need to continue this script if user already logged in
  23.   if (document.cookie.includes('DedeUserID')) return;
  24.  
  25.   const blacklist = [];
  26.  
  27.   // regular expressions
  28.   const re = {
  29.     home: /m\.bilibili\.com\/$|m\.bilibili\.com\/channel\/v\/.*/,
  30.     video: /m\.bilibili\.com\/video\/.*/,
  31.     search: /m\.bilibili\.com\/search.*/,
  32.     space: /m\.bilibili\.com\/space\/.*/,
  33.     dynamic: /m\.bilibili\.com\/dynamic\/.*/,
  34.     opus: /m\.bilibili\.com\/opus\/.*/,
  35.     topicDetail: /m\.bilibili\.com\/topic-detail.*/,
  36.   }
  37.  
  38.   // make sure the document is ready
  39.   await new Promise(resolve => {
  40.     const timer = setInterval(() => {
  41.       if (document.head && document.body) { clearInterval(timer); resolve(); }
  42.     }, 50);
  43.   });
  44.  
  45.   // search and remove elements constantly
  46.   setupElementCleaner();
  47.  
  48.   // add style patch
  49.   addStyle();
  50.  
  51.   // nav bar
  52.   modifyNavBar();
  53.   
  54.   // home page
  55.   if (re.home.test(window.location.href)) modifyHomePage();
  56.  
  57.   // video page
  58.   if (re.video.test(window.location.href)) modifyVideoPage();
  59.  
  60.   // search page
  61.   if (re.search.test(window.location.href)) modifySearchPage();
  62.  
  63.   // space page
  64.   if (re.space.test(window.location.href)) modifySpacePage();
  65.  
  66.   // dynamic page
  67.   if (re.dynamic.test(window.location.href)) modifyDynamicPage();
  68.   
  69.   // opus page
  70.   if (re.opus.test(window.location.href)) modifyOpusPage();
  71.  
  72.   // topic detail page
  73.   if (re.topicDetail.test(window.location.href)) modifyTopicDetailPage();
  74.  
  75.   // ------------ functions below ------------
  76.  
  77.   function setupElementCleaner() {
  78.     const selectors = [];
  79.  
  80.     // home page
  81.     if (re.home.test(window.location.href)) {
  82.       selectors.push(...[
  83.         '.m-nav-openapp',     // 右上角的"下载App"按钮
  84.         '.m-navbar .face',    // 右上角的用户头像
  85.         '.fixed-openapp',     // 首页底部的打开App横条
  86.         '.v-card__stats',     // 视频卡片的数据信息
  87.         '.reserve-float-btn', // 首页底部的浮动弹窗
  88.       ]);
  89.     }
  90.  
  91.     // video page
  92.     if (re.video.test(window.location.href)) {
  93.       selectors.push(...[
  94.         '.m-nav-openapp',                                 // 右上角的"下载App"按钮
  95.         '.m-navbar .face',                                // 右上角的用户头像
  96.         '.video-natural-search .fixed-wrapper',           // 顶部遮挡video元素的整个区域
  97.         '.m-video-related .list-custom-slot .m-open-app', // 相关视频底部的打开App横条
  98.         '.openapp-dialog',                                // 底部弹出的"浏览方式"
  99.         '.caution-dialog',                                // 底部弹出的"友情提示"
  100.         '.play-page-gotop',                               // 回到顶部按钮
  101.         '.reserve-float-btn',                             // 底部的浮动弹窗
  102.         '.fixed-openapp',                                 // URL带'unique_k'参数时右下角才会出现的打开App按钮
  103.         '.gsl-callapp-dom',                               // 视频模块中阻碍点击并唤起app的元素
  104.         'm-open-app.m-video-main-launchapp',              // 从b23.tv打开时出现的打开App横条
  105.         '.m-video-info',                                  // 从b23.tv打开时出现的视频标题、作者和简介
  106.         '.bottom-tab-header',                             // 从b23.tv打开时出现的下方相关视频header
  107.         '.m-video-part',                                  // 从b23.tv打开时出现的视频分P模块#1
  108.         '.m-video-part-panel',                            // 从b23.tv打开时出现的视频分P模块#2
  109.       ]);
  110.     }
  111.  
  112.     // space page
  113.     if (re.space.test(window.location.href)) {
  114.       selectors.push(...[
  115.         '.fixed-openapp',                   // 底部的打开App按钮
  116.         '.bili-dyn-item-header__following', // 动态右上方的关注按钮
  117.         '.dyn-orig-author__following',      // 转发的动态的作者的关注按钮
  118.       ]);
  119.     }
  120.  
  121.     // dynamic & opus page
  122.     if (re.dynamic.test(window.location.href) || re.opus.test(window.location.href)) {
  123.       selectors.push(...[
  124.         '.fixed-openapp',                   // 底部的打开App横条
  125.         '.dyn-header__following',           // 动态右上方的关注按钮
  126.         '.dyn-share',                       // 若干分享按钮
  127.         '.openapp-dialog',                  // 底部弹出的"浏览方式"
  128.         '.reserve-float-btn',               // 底部的浮动弹窗
  129.         '.opus-module-author__action',      // opus页右上角的关注按钮
  130.         '.stat-openApp',                    // opus页(原专栏页)底部的stat模块
  131.       ]);
  132.     }
  133.  
  134.     // topic detail page
  135.     if (re.topicDetail.test(window.location.href)) {
  136.       selectors.push(...[
  137.         '.m-topic-float-openapp', // 底部的打开App按钮
  138.       ]);
  139.     }
  140.  
  141.     // start cleaning
  142.     setInterval(() => {
  143.       for (const selector of selectors) {
  144.         document.querySelectorAll(selector).forEach(element => element.remove());
  145.       }
  146.     }, 100);
  147.   }
  148.  
  149.   function addStyle() {
  150.     // nav bar
  151.     const navBarCSS = document.createElement('style');
  152.     navBarCSS.textContent = `
  153.       .m-navbar {
  154.         position: relative !important;
  155.         display: flex !important;
  156.         justify-content: space-between;
  157.         align-items: center;
  158.         background: none !important;
  159.         background-color: #FFFFFF !important;
  160.         border-bottom: 1px solid #EEEEEE;
  161.       }
  162.  
  163.       .nav-logo {
  164.         display: flex;
  165.         align-items: center;
  166.         height: 100%;
  167.       }
  168.  
  169.       .nav-logo img {
  170.         height: 60%;
  171.       }
  172.  
  173.       .nav-search {
  174.         display: flex;
  175.         flex-direction: column;
  176.         justify-content: center;
  177.         width: 200px;
  178.         height: 28px;
  179.         border: 1px solid #EEEEEE;
  180.         border-radius: 16px;
  181.       }
  182.  
  183.       .nav-search > svg {
  184.         align-self: flex-end;
  185.         margin-right: 8px;
  186.       }
  187.     `;
  188.     document.head.appendChild(navBarCSS);
  189.  
  190.     // video page
  191.     const videoPageCSS = document.createElement('style');
  192.     videoPageCSS.textContent = `
  193.       .video-share-loading-mask {
  194.         position: absolute;
  195.         top: 0;
  196.         left: 0;
  197.         display: none;
  198.         justify-content: center;
  199.         align-items: center;
  200.         width: 100%;
  201.         height: 100%;
  202.         z-index: 1999;
  203.         background-color: #000000;
  204.       }
  205.  
  206.       .video-share-loading-mask-circle {
  207.         width: 30px;
  208.         height: 30px;
  209.         border: 2px solid #000000;
  210.         border-top-color: #ffffff;
  211.         border-right-color: #ffffff;
  212.         border-bottom-color: #ffffff;
  213.         border-radius: 100%;
  214.         animation: circle infinite 0.75s linear;
  215.       }
  216.  
  217.       @keyframes circle {
  218.         0% {
  219.           transform: rotate(0);
  220.         }
  221.         100% {
  222.           transform: rotate(360deg);
  223.         }
  224.       }
  225.  
  226.       .m-video-player {
  227.         position: relative !important;
  228.         top: initial !important;
  229.       }
  230.  
  231.       .video-info {
  232.         display: flex;
  233.         flex-direction: column;
  234.         padding: 20px 12px;
  235.       }
  236.  
  237.       .video-info-title {
  238.         font-size: 1.2rem;
  239.         word-break: break-all;
  240.       }
  241.  
  242.       .video-info-author {
  243.         display: flex;
  244.         align-items: center;
  245.         margin-top: 16px;
  246.       }
  247.  
  248.       .video-info-author-avatar {
  249.         width: 32px;
  250.         height: 32px;
  251.         margin-right: 8px;
  252.         border-radius: 100%;
  253.       }
  254.  
  255.       .video-info-desc {
  256.         color: #666666;
  257.         font-size: 0.8rem;
  258.         word-break: break-all;
  259.       }
  260.  
  261.       .m-video-related {
  262.         margin-top: 0 !important;
  263.         padding: 24px 0;
  264.         border-top: 1px dashed #aaa;
  265.         border-bottom: 1px dashed #aaa;
  266.       }
  267.  
  268.       .card-box {
  269.         justify-content: space-between;
  270.       }
  271.  
  272.       .card-box > .card {
  273.         width: 49%;
  274.       }
  275.  
  276.       .card-box .card .label,
  277.       .card-box .card .open-app.weakened,
  278.       .card-box .card .video-card .count {
  279.         display: none !important;
  280.       }
  281.  
  282.       .card-box .card .title {
  283.         padding-top: 8px;
  284.         padding-bottom: 16px;
  285.         font-size: 0.8rem !important;
  286.         word-break: break-all;
  287.       }
  288.  
  289.       .gsl-top-return {
  290.         transform: scale(0.5);
  291.       }
  292.  
  293.       .gsl-buffer-app {
  294.         display: none !important;
  295.       }
  296.  
  297.       .gsl-control-btn.gsl-control-btn-quality {
  298.         display: none !important;
  299.       }
  300.  
  301.       .gsl-control-btn.gsl-control-btn-speed {
  302.         display: flex !important;
  303.       }
  304.  
  305.       .gsl-control-btn.gsl-control-btn-speed .gsl-control-dot {
  306.         display: none !important;
  307.       }
  308.  
  309.       .playback-rate-setting-panel {
  310.         position: fixed;
  311.         top: 0;
  312.         left: 0;
  313.         width: 100%;
  314.         height: 100%;
  315.         display: flex;
  316.         justify-content: center;
  317.         align-items: center;
  318.         background-color: rgba(0, 0, 0, 0.5);
  319.         z-index: 999999;
  320.       }
  321.  
  322.       .playback-rate-option-container {
  323.         width: 240px;
  324.         padding: 8px;
  325.         display: flex;
  326.         flex-direction: column;
  327.         align-items: center;
  328.         background-color: #FFFFFF;
  329.         border-radius: 4px;
  330.         user-select: none;
  331.       }
  332.  
  333.       .playback-rate-option {
  334.         width: 100%;
  335.         margin-top: 2px;
  336.         padding: 8px 0;
  337.         color: #FFFFFF;
  338.         background-color: #00AEEC;
  339.         border-top: 1px solid #EEEEEE;
  340.         border-radius: 4px;
  341.         text-align: center;
  342.       }
  343.  
  344.       .episode-container {
  345.         display: flex;
  346.         flex-direction: column;
  347.         background-color: #f1f2f3;
  348.       }
  349.  
  350.       .episode-container-header {
  351.         display: flex;
  352.         align-items: center;
  353.         padding: 12px;
  354.         padding-bottom: 10px;
  355.       }
  356.  
  357.       .episode-container-header-count {
  358.         margin-left: 4px;
  359.         font-size: 0.8rem;
  360.         font-family: monospace;
  361.         color: #9499A0;
  362.       }
  363.  
  364.       .episode-list {
  365.         display: flex;
  366.         flex-direction: column;
  367.         padding: 12px;
  368.         padding-top: 0;
  369.       }
  370.  
  371.       .episode-list-item {
  372.         display: flex;
  373.         align-items: center;
  374.         height: 36px;
  375.         margin: 2px 0;
  376.         padding: 2px 6px;
  377.       }
  378.  
  379.       .episode-list-item.is-current-episode {
  380.         background-color: #ffffff;
  381.         color: #00AEEC;
  382.         outline: 1px solid #7bdbfd;
  383.         border-radius: 4px;
  384.       }
  385.  
  386.       .episode-playing-gif {
  387.         display: inline-block;
  388.         width: 12px;
  389.         height: 12px;
  390.         margin-right: 5px;
  391.         background-image: url('https://i0.hdslb.com/bfs/static/jinkela/playlist-video/asserts/playing.gif');
  392.         background-repeat: no-repeat;
  393.         background-size: 12px 12px;
  394.         background-position: center;
  395.       }
  396.  
  397.       .episode-list-item-title {
  398.         max-width: 250px;
  399.         overflow: hidden;
  400.         white-space: nowrap;
  401.         text-overflow: ellipsis;
  402.         line-height: 36px;
  403.         font-size: 0.8rem;
  404.       }
  405.  
  406.       .episode-list-item-duration {
  407.         flex-grow: 1;
  408.         text-align: right;
  409.         font-size: 0.8rem;
  410.         font-family: monospace;
  411.         color: #9499A0;
  412.       }
  413.  
  414.       #video-comment-module-wrapper {
  415.         position: fixed;
  416.         top: 0;
  417.         left: 0;
  418.         z-index: 2000;
  419.         display: none;
  420.         width: 100vw;
  421.         height: 100vh;
  422.         background-color: #fff;
  423.         overflow-x: hidden;
  424.       }
  425.  
  426.       .close-comment-module-btn {
  427.         position: fixed;
  428.         right: 20px;
  429.         bottom: 20px;
  430.         z-index: 2001;
  431.         display: none;
  432.         justify-content: center;
  433.         align-items: center;
  434.         width: 40px;
  435.         height: 40px;
  436.         color: #fff;
  437.         border-radius: 100%;
  438.         background-color: #00AEEC;
  439.       }
  440.  
  441.       .open-comment-module-btn {
  442.         display: flex;
  443.         justify-content: center;
  444.         align-items: center;
  445.         margin: 0 12px 20px 12px;
  446.         height: 40px;
  447.         color: #fff;
  448.         border-radius: 4px;
  449.         background-color: #00AEEC;
  450.       }
  451.     `;
  452.     document.head.appendChild(videoPageCSS);
  453.  
  454.     // space page
  455.     const spacePageCSS = document.createElement('style');
  456.     spacePageCSS.textContent = `
  457.       .m-space-info {
  458.         margin-top: 0 !important;
  459.       }
  460.  
  461.       .bili-dyn-item {
  462.         border-bottom: 1px solid #e7e7e7;
  463.       }
  464.  
  465.       .video-item-space {
  466.         box-sizing: border-box;
  467.         margin-right: 3.2vmin;
  468.         padding: 2.4vmin 0;
  469.         height: 24.26667vmin;
  470.         position: relative;
  471.         display: block;
  472.         border-bottom: 1px solid #ddd;
  473.       }
  474.  
  475.       .video-item-space .cover {
  476.         float: left;
  477.         width: 31.2vmin;
  478.         height: 19.46667vmin;
  479.         position: relative;
  480.         border-radius: 1.06667vmin;
  481.         overflow: hidden;
  482.       }
  483.  
  484.       .video-item-space .cover .duration {
  485.         padding: 0 0.53333vmin;
  486.         position: absolute;
  487.         right: 1.06667vmin;
  488.         bottom: 1.06667vmin;
  489.         border-radius: 0.53333vmin;
  490.         background: rgba(0,0,0,.5);
  491.         font-size: 3.2vmin;
  492.         color: #fff;
  493.       }
  494.  
  495.       .video-item-space .info {
  496.         margin-left: 34.4vmin;
  497.         height: 19.46667vmin;
  498.         position: relative;
  499.       }
  500.  
  501.       .video-item-space .info .title {
  502.         max-height: 9.06667vmin;
  503.         font-size: 3.73333vmin;
  504.         color: #212121;
  505.         line-height: 4.53333vmin;
  506.         overflow: hidden;
  507.         text-overflow: ellipsis;
  508.         display: -webkit-box;
  509.         -webkit-line-clamp: 2;
  510.         -webkit-box-orient: vertical;
  511.       }
  512.  
  513.       .video-item-space .info .state {
  514.         display: flex;
  515.         align-items: center;
  516.         position: absolute;
  517.         bottom: 0;
  518.         left: 0;
  519.         right: 0;
  520.         font-size: 2.66667vmin;
  521.         color: #999;
  522.         line-height: 4.53333vmin;
  523.         height: 4.53333vmin;
  524.       }
  525.  
  526.       .video-item-space .info .state .view,
  527.       .video-item-space .info .state .danmaku {
  528.         display: flex;
  529.         align-items: center;
  530.       }
  531.  
  532.       .video-item-space .info .state .danmaku {
  533.         margin-left: 7.73333vmin;
  534.       }
  535.  
  536.       .video-item-space .info .state .icon {
  537.         margin-right: 1.06667vmin;
  538.       }
  539.     `;
  540.     document.head.appendChild(spacePageCSS);
  541.  
  542.     // opus page
  543.     const opusPageCSS = document.createElement('style');
  544.     opusPageCSS.textContent = `
  545.       .show-read-text {
  546.         max-height: initial !important;
  547.       }
  548.     `;
  549.     document.head.appendChild(opusPageCSS);
  550.  
  551.     // topic detail page
  552.     const topicDetailPageCSS = document.createElement('style');
  553.     topicDetailPageCSS.textContent = `
  554.       .topic-detail-container {
  555.         top: 0 !important;
  556.       }
  557.     `;
  558.     document.head.appendChild(topicDetailPageCSS);
  559.   }
  560.  
  561.   async function modifyNavBar() {
  562.     const timer = setInterval(() => {
  563.       const navBarElement = document.querySelector('.m-navbar');
  564.       if (navBarElement) {
  565.         const parentElement = navBarElement.parentElement;
  566.         if (parentElement.tagName === 'M-OPEN-APP') {
  567.           parentElement.insertAdjacentElement('beforebegin', navBarElement);
  568.           parentElement.remove();
  569.         }
  570.  
  571.         navBarElement.__vue__.$destroy();
  572.         navBarElement.innerHTML = `
  573.           <a class="nav-logo" href="/"><img src="https://i1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png" /></a>
  574.           <a class="nav-search" href="/search">
  575.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#CCCCCC" d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg>
  576.           </a>
  577.         `;
  578.         clearInterval(timer);
  579.       }
  580.     }, 100);
  581.   }
  582.  
  583.   async function modifyHomePage() {
  584.     // modify video card
  585.     setInterval(() => {
  586.       document.querySelectorAll('.card-box .v-card:not(.modified)').forEach(card => {
  587.         // blacklist check
  588.         const cardTitle = card.querySelector('.v-card__title');
  589.         if (blacklist.some(keyword => cardTitle.textContent.includes(keyword))) { card.remove(); return; }
  590.  
  591.         // rewrite behavior when video card being clicked
  592.         if (card.__vue__?.bvid && card.__vue__?.$destroy) {
  593.           const bvid = card.__vue__.bvid;
  594.           card.onclick = () => window.location.href = `https://m.bilibili.com/video/${bvid}`;
  595.           card.__vue__.$destroy();
  596.           card.querySelector('.sleepy')?.classList.remove('sleepy');
  597.           card.classList.add('modified');
  598.         }
  599.       });
  600.     }, 100);
  601.   }
  602.  
  603.   async function modifyVideoPage() {
  604.     // show hidden video player
  605.     const videoShare = await new Promise(resolve => {
  606.       const timer = setInterval(() => {
  607.         const videoShare = document.querySelector('.video-share');
  608.         if (videoShare) {
  609.           videoShare.style.display = 'block';
  610.           videoShare.style.position = 'relative';
  611.           clearInterval(timer);
  612.           resolve(videoShare);
  613.         }
  614.       }, 100);
  615.     });
  616.  
  617.     // add loading mask
  618.     const loadingMask = document.createElement('div');
  619.     loadingMask.classList.add('video-share-loading-mask');
  620.     loadingMask.innerHTML = '<span class="video-share-loading-mask-circle"></span>';
  621.     videoShare.appendChild(loadingMask);
  622.  
  623.     // show loading mask when video share being clicked, but only once
  624.     const videoShareOnClickHandler = () => {
  625.       videoShare.removeEventListener('click', videoShareOnClickHandler);
  626.       loadingMask.style.display = 'flex';
  627.  
  628.       // hide the loading mask after the video start playing
  629.       const timer = setInterval(() => {
  630.         const progressBar = videoShare.querySelector('.gsl-ui-progress-bar');
  631.         if (progressBar && progressBar.style.width && progressBar.style.width !== '0%') {
  632.           clearInterval(timer);
  633.           loadingMask.style.display = 'none';
  634.           document.querySelector('.gsl-poster')?.remove();
  635.         }
  636.       }, 50);
  637.     }
  638.     videoShare.addEventListener('click', videoShareOnClickHandler);
  639.  
  640.     // get video info
  641.     const videoID = window.location.pathname.replace('/video/', '');
  642.     let param;
  643.     if (videoID.startsWith('av')) param = `aid=${videoID.replace('av', '')}`;
  644.     if (videoID.startsWith('BV')) param = `bvid=${videoID}`;
  645.     const videoInfo = await fetch(`https://api.bilibili.com/x/web-interface/view?${param}`).then(res => res.json()).then(json => json.data);
  646.  
  647.     // add info
  648.     const infoContainer = document.createElement('div');
  649.     infoContainer.classList.add('video-info');
  650.     infoContainer.innerHTML = `
  651.       <div class="video-info-title">${videoInfo.title}</div>
  652.       <a class="video-info-author" href="https://m.bilibili.com/space/${videoInfo.owner.mid}">
  653.         <img class="video-info-author-avatar" src="${videoInfo.owner.face}">
  654.         <span class="video-info-author-name">${videoInfo.owner.name}</span>
  655.       </a>
  656.       <div class="video-info-desc" ${videoInfo.desc ? 'style="margin-top: 16px;"' : ''}>${videoInfo.desc.replaceAll('\n', '<br>').replaceAll(/BV[1-9A-HJ-NP-Za-km-z]{10}|av\d+/g, (match) => `<a style="color: #00AEEC" href="https://m.bilibili.com/video/${match}">${match}</a>`)}</div>
  657.     `;
  658.     document.querySelector('.video-share').insertAdjacentElement('afterend', infoContainer);
  659.  
  660.     // add comment module wrapper
  661.     const commentModuleWrapper = document.createElement('div');
  662.     commentModuleWrapper.id = 'video-comment-module-wrapper';
  663.     document.body.appendChild(commentModuleWrapper);
  664.     MobileCommentModule.init(commentModuleWrapper);
  665.  
  666.     // add button to close comment module
  667.     const closeCommentModuleBtn = document.createElement('span');
  668.     closeCommentModuleBtn.classList.add('close-comment-module-btn');
  669.     closeCommentModuleBtn.textContent = '×';
  670.     closeCommentModuleBtn.onclick = function () {
  671.       // trigger 'popstate' event
  672.       window.history.back();
  673.     }
  674.     document.body.appendChild(closeCommentModuleBtn);
  675.     
  676.     // add button to open comment module
  677.     const openCommentModuleBtn = document.createElement('div');
  678.     openCommentModuleBtn.classList.add('open-comment-module-btn');
  679.     openCommentModuleBtn.textContent = '查看评论';
  680.     openCommentModuleBtn.onclick = function () {
  681.       commentModuleWrapper.style.display = 'block';
  682.       closeCommentModuleBtn.style.display = 'flex';
  683.       document.body.style.overflow = 'hidden';
  684.  
  685.       // push state in history
  686.       window.history.pushState({}, '');
  687.  
  688.       // close comment module when 'popstate' event triggered
  689.       const popStateHandler = () => {
  690.         commentModuleWrapper.style.display = 'none';
  691.         closeCommentModuleBtn.style.display = 'none';
  692.         document.body.style.overflow = 'initial';
  693.         document.querySelectorAll('.reply-item .preview-image-container').forEach(item => item.viewer?.hide(true));
  694.         window.removeEventListener('popstate', popStateHandler);
  695.       }
  696.       window.addEventListener('popstate', popStateHandler);
  697.     }
  698.     infoContainer.insertAdjacentElement('afterend', openCommentModuleBtn);
  699.  
  700.     // add episodes
  701.     const partNum = parseInt((new URLSearchParams(window.location.search)).get('p') || '1');
  702.     const episodeContainer = document.createElement('div');
  703.     episodeContainer.classList.add('episode-container');
  704.     if (videoInfo.pages.length > 1) {
  705.       episodeContainer.innerHTML = `
  706.         <div class="episode-container-header">
  707.           <span>视频选集</span>
  708.           <span class="episode-container-header-count">(${partNum}/${videoInfo.pages.length})</span>
  709.         </div>
  710.         <div class="episode-list">
  711.           ${
  712.             videoInfo.pages.map((page, index) => {
  713.               const isCurrentEpisode = partNum === index + 1;
  714.               const second = page.duration % 60;
  715.               const minute = (page.duration - second) / 60 % 60;
  716.               const hour = Math.floor(page.duration / 3600);
  717.               const formattedDuration =  `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
  718.               return `
  719.                 <a class="episode-list-item ${isCurrentEpisode ? 'is-current-episode' : ''}" ${isCurrentEpisode ? '' : `href="${window.location.pathname}?p=${index + 1}"`}>
  720.                   ${isCurrentEpisode ? '<span class="episode-playing-gif"></span>' : ''}
  721.                   <span class="episode-list-item-title">${page.part}</span>
  722.                   <span class="episode-list-item-duration">${formattedDuration}</span>
  723.                 </a>
  724.               `;
  725.             }).join('')
  726.           }
  727.         </div>
  728.       `;
  729.     }
  730.     openCommentModuleBtn.insertAdjacentElement('afterend', episodeContainer);
  731.  
  732.     // move .bottom-tab to where it should be, usually happens when page open by b23.tv short url
  733.     const bottomTab = document.querySelector('.video-share > .bottom-tab');
  734.     if (bottomTab) episodeContainer.insertAdjacentElement('afterend', bottomTab);
  735.  
  736.     // modify video card
  737.     setInterval(() => {
  738.       // move the video card out of <m-open-app>
  739.       document.querySelectorAll('.card-box > m-open-app').forEach(item => {
  740.         const href = item.getAttribute('universallink').replace('.html?', '');
  741.         item.outerHTML = item.querySelector('.card').outerHTML.replace('class="card"', `class="card" data-href="${href}"`).replaceAll('sleepy', '');
  742.       });
  743.  
  744.       // setup click event
  745.       document.querySelectorAll('.card-box > .card:not(.modified)').forEach(item => {
  746.         // blacklist check
  747.         const cardTitle = item.querySelector('.title');
  748.         if (blacklist.some(keyword => cardTitle.textContent.includes(keyword))) { item.remove(); return; }
  749.  
  750.         item.classList.add('modified');
  751.         item.onclick = () => window.location.href = item.dataset.href;
  752.       });
  753.     }, 100);
  754.  
  755.     // modify playback rate button
  756.     const timer4PlaybackRateBtn = setInterval(() => {
  757.       const playbackRateBtn = document.querySelector('.gsl-control .gsl-control-btn-speed');
  758.       if (playbackRateBtn) {
  759.         playbackRateBtn.onclick = () => {
  760.           const maskElement = document.createElement('div');
  761.           maskElement.classList.add('playback-rate-setting-panel');
  762.           maskElement.innerHTML = `
  763.             <div class="playback-rate-option-container">
  764.               <span style="margin-bottom: 6px; padding: 6px 0;">播放倍速</span>
  765.               <span class="playback-rate-option" data-rate="5">5.0x</span>
  766.               <span class="playback-rate-option" data-rate="3">3.0x</span>
  767.               <span class="playback-rate-option" data-rate="2">2.0x</span>
  768.               <span class="playback-rate-option" data-rate="1.5">1.5x</span>
  769.               <span class="playback-rate-option" data-rate="1">1.0x</span>
  770.               <span class="playback-rate-option" data-rate="0.5">0.5x</span>
  771.             </div>
  772.           `;
  773.     
  774.           maskElement
  775.             .querySelectorAll('.playback-rate-option')
  776.             .forEach(optionElement => optionElement.addEventListener('click', function() {
  777.               const videoElement = document.querySelector('#bilibiliPlayer video');
  778.               if (videoElement) videoElement.playbackRate = parseFloat(this.dataset.rate);
  779.             }));
  780.           
  781.           maskElement.onclick = () => maskElement.remove();
  782.     
  783.           (document.querySelector('#bilibiliPlayer .gsl-area.gsl-wide') || document.body).appendChild(maskElement);
  784.         }
  785.  
  786.         clearInterval(timer4PlaybackRateBtn);
  787.       }
  788.     }, 100);
  789.  
  790.     // modify fullscreen button
  791.     const timer4FullscreenBtn = setInterval(() => {
  792.       const fullscreenBtn = document.querySelector('.gsl-btn-fullscreen');
  793.       if (fullscreenBtn) {
  794.         // pre-click, whick needs 2 clicks to enter fullscreen naturally
  795.         fullscreenBtn.click();
  796.         clearInterval(timer4FullscreenBtn);
  797.       }
  798.     }, 100);
  799.  
  800.     // modify ending panel of video
  801.     const timer4EndingPanel = setInterval(async () => {
  802.       const endingPanel = document.querySelector('.gsl-end.gsl-show .gsl-ending-panel-video');
  803.       if (endingPanel) {
  804.         clearInterval(timer4EndingPanel);
  805.  
  806.         // clean click events
  807.         endingPanel.innerHTML = `
  808.           <div class="gsl-ending-panel-video">
  809.             <div class="gsl-ending-panel-pic">
  810.               <img />
  811.             </div>
  812.             <div class="gsl-ending-panel-content">
  813.               <div class="gsl-ending-panel-title"></div>
  814.               <div class="gsl-ending-panel-button">点击打开</div>
  815.             </div>
  816.           </div>
  817.         `;
  818.  
  819.         // get related video data
  820.         const relatedVideoData = await fetch(`https://api.bilibili.com/x/web-interface/archive/related?bvid=${videoInfo.bvid}`).then(res => res.json()).then(json => json.data);
  821.  
  822.         // start showing
  823.         let currentIndex;
  824.         const currentVideoCover = endingPanel.querySelector('.gsl-ending-panel-pic img');
  825.         const currentVideoTitle = endingPanel.querySelector('.gsl-ending-panel-title');
  826.         const showRelatedVideo = () => {
  827.           currentIndex = Math.floor(Math.random() * relatedVideoData.length);
  828.           currentVideoCover.src = relatedVideoData[currentIndex].pic + '@460w_280h.webp';
  829.           currentVideoTitle.textContent = relatedVideoData[currentIndex].title;
  830.         }
  831.         showRelatedVideo();
  832.         setInterval(showRelatedVideo, 5 * 1000);
  833.  
  834.         // setup click event
  835.         endingPanel.onclick = () => window.location.href = `https://m.bilibili.com/video/${relatedVideoData[currentIndex].bvid}`;
  836.       }
  837.     }, 100);
  838.  
  839.     // modify charge video page
  840.     const timer4ChargeMask = setInterval(() => {
  841.       const mask = document.querySelector('.m-video-player m-open-app.charge-mask');
  842.       if (mask) {
  843.         mask.outerHTML = mask.outerHTML.replace('<m-open-app', '<div').replace('</m-open-app>', '</div>');
  844.       }
  845.     }, 100);
  846.     setTimeout(() => clearInterval(timer4ChargeMask), 3 * 1000);
  847.   }
  848.  
  849.   async function modifySearchPage() {
  850.     // modify cancel button
  851.     const timer4CancelBtn = setInterval(() => {
  852.       const cancelBtn = document.querySelector('.m-search-search-bar .cancel');
  853.       if (cancelBtn) {
  854.         cancelBtn.outerHTML = cancelBtn.outerHTML.replace('class="cancel"', 'class="cancel" href="/"');
  855.         clearInterval(timer4CancelBtn);
  856.       }
  857.     }, 100);
  858.  
  859.     // modify video card
  860.     setInterval(() => {
  861.       document.querySelectorAll('.card-box .v-card-single:not(.vue-destroyed)').forEach(card => {
  862.         // blacklist check
  863.         const cardTitle = card.querySelector('.info .title');
  864.         const cardAuthor = card.querySelector('.info .author');
  865.         if (blacklist.some(keyword => cardTitle.textContent.includes(keyword) || cardAuthor.textContent.includes(keyword))) { card.remove(); return; }
  866.  
  867.         const aid = card.dataset.aid;
  868.  
  869.         // remove card which leading to live streaming
  870.         if (aid === '0') { card.remove(); return; }
  871.  
  872.         // cancel default actions
  873.         card.classList.add('vue-destroyed');
  874.         card.__vue__.$destroy();
  875.  
  876.         // setup click event
  877.         card.onclick = () => window.location.href = `https://m.bilibili.com/video/av${aid}`;
  878.  
  879.         // show covers
  880.         card.querySelector('.sleepy')?.classList.remove('sleepy');
  881.       });
  882.     }, 100);
  883.  
  884.     // modify user card
  885.     setInterval(() => {
  886.       document.querySelectorAll('.card-box a.m-search-user-item:not(.vue-destroyed)').forEach(card => {
  887.         card.classList.add('vue-destroyed');
  888.         card.__vue__.$destroy();
  889.         card.href = card.href.replace('?from=search', '');
  890.         card.querySelector('.sleepy')?.classList.remove('sleepy');
  891.       });
  892.     }, 100);
  893.   }
  894.  
  895.   async function modifySpacePage() {
  896.     // setup click event on user avatar if live streaming
  897.     const timer4LiveStreaming = setInterval(() => {
  898.       const face = document.querySelector('.m-space-info .info-main .face:not(.modified):has(.living-wrapper)');
  899.       const liveRoomID = window.__INITIAL_STATE__?.space?.info?.live_room?.roomid;
  900.       if (face && liveRoomID) {
  901.         face.classList.add('modified');
  902.         face.onclick = () => window.location.href = `https://live.bilibili.com/${liveRoomID}`;
  903.       }
  904.     }, 100);
  905.     setTimeout(() => clearInterval(timer4LiveStreaming), 3 * 1000);
  906.  
  907.     // deactivate follow button
  908.     const timer4FollowBtn = setInterval(() => {
  909.       const followBtn = document.querySelector('.m-space-info .follow-btn');
  910.       if (followBtn) {
  911.         followBtn.__vue__.$destroy();
  912.         clearInterval(timer4FollowBtn);
  913.       }
  914.     }, 100);
  915.     
  916.     // modify dynamic items
  917.     setInterval(() => {
  918.       document.querySelectorAll('.dynamic-list .list-scroll-content-wrap > m-open-app').forEach(item => {
  919.         const dynItem = item.querySelector('.bili-dyn-item');
  920.         dynItem.onclick = () => window.location.href = item.getAttribute('universallink');
  921.         item.insertAdjacentElement('beforebegin', dynItem);
  922.         item.remove();
  923.       });
  924.     }, 100);
  925.  
  926.     // modify archive list
  927.     const timer4ArchiveList = setInterval(async () => {
  928.       const archiveList = document.querySelector('.archive-list');
  929.       if (archiveList) {
  930.         clearInterval(timer4ArchiveList);
  931.  
  932.         // get user id
  933.         const mid = window.location.pathname.replace('/space/', '');
  934.  
  935.         const getPaginationData = async (pn) => {
  936.           const params = { mid, pn, ps: 50, order: 'senddate', wts: Math.floor(Date.now() / 1000) };
  937.           return fetch(`https://api.bilibili.com/x/space/wbi/arc/search?${await getWbiQueryString(params)}`, { credentials: 'include' }).then(res => res.json()).then(json => json.data.list?.vlist || []);
  938.         };
  939.  
  940.         const getVideoItem = (videoData) => {
  941.           return `
  942.             <a href="/video/${videoData.bvid}" class="video-item-space">
  943.               <div class="cover">
  944.                 <div class="bfs-img-wrap">
  945.                   <div class="bfs-img b-img">
  946.                     <img class="b-img__inner" src="${videoData.pic}@468w_292h_1c.webp" alt="${videoData.title}">
  947.                   </div>
  948.                 </div>
  949.                 <span class="duration">${videoData.length}</span>
  950.               </div>
  951.               <div class="info">
  952.                 <h3 class="title">${videoData.title}</h3>
  953.                 <div class="state">
  954.                   <span class="view">
  955.                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M8 3.3320333333333334C6.321186666666667 3.3320333333333334 4.855333333333333 3.4174399999999996 3.820593333333333 3.5013466666666666C3.1014733333333333 3.5596599999999996 2.5440733333333334 4.109013333333333 2.48 4.821693333333333C2.4040466666666664 5.666533333333334 2.333333333333333 6.780666666666666 2.333333333333333 7.998666666666666C2.333333333333333 9.216733333333334 2.4040466666666664 10.330866666666665 2.48 11.175699999999999C2.5440733333333334 11.888366666666666 3.1014733333333333 12.437733333333334 3.820593333333333 12.496066666666666C4.855333333333333 12.579933333333333 6.321186666666667 12.665333333333333 8 12.665333333333333C9.678999999999998 12.665333333333333 11.144933333333334 12.579933333333333 12.179733333333333 12.496033333333333C12.898733333333332 12.4377 13.456 11.888533333333331 13.520066666666667 11.176033333333333C13.595999999999998 10.331533333333333 13.666666666666666 9.217633333333332 13.666666666666666 7.998666666666666C13.666666666666666 6.779766666666667 13.595999999999998 5.665846666666667 13.520066666666667 4.821366666666666C13.456 4.108866666666666 12.898733333333332 3.55968 12.179733333333333 3.5013666666666663C11.144933333333334 3.417453333333333 9.678999999999998 3.3320333333333334 8 3.3320333333333334zM3.7397666666666667 2.50462C4.794879999999999 2.41906 6.288386666666666 2.3320333333333334 8 2.3320333333333334C9.7118 2.3320333333333334 11.2054 2.4190733333333334 12.260533333333331 2.5046399999999998C13.458733333333331 2.6018133333333333 14.407866666666665 3.5285199999999994 14.516066666666667 4.73182C14.593933333333332 5.597933333333334 14.666666666666666 6.7427 14.666666666666666 7.998666666666666C14.666666666666666 9.2547 14.593933333333332 10.399466666666665 14.516066666666667 11.2656C14.407866666666665 12.468866666666665 13.458733333333331 13.395566666666667 12.260533333333331 13.492766666666665C11.2054 13.578333333333333 9.7118 13.665333333333333 8 13.665333333333333C6.288386666666666 13.665333333333333 4.794879999999999 13.578333333333333 3.7397666666666667 13.492799999999999C2.541373333333333 13.395599999999998 1.5922066666666668 12.468633333333333 1.4840200000000001 11.265266666666665C1.4061199999999998 10.3988 1.3333333333333333 9.253866666666667 1.3333333333333333 7.998666666666666C1.3333333333333333 6.743533333333333 1.4061199999999998 5.598579999999999 1.4840200000000001 4.732153333333333C1.5922066666666668 3.5287466666666667 2.541373333333333 2.601793333333333 3.7397666666666667 2.50462z" fill="currentColor"></path><path d="M9.8092 7.3125C10.338433333333333 7.618066666666666 10.338433333333333 8.382 9.809166666666666 8.687533333333333L7.690799999999999 9.910599999999999C7.161566666666666 10.216133333333332 6.5 9.8342 6.500006666666666 9.223066666666666L6.500006666666666 6.776999999999999C6.500006666666666 6.165873333333334 7.161566666666666 5.783913333333333 7.690799999999999 6.089479999999999L9.8092 7.3125z" fill="currentColor"></path></svg>
  956.                     <span>${videoData.play < 10000 ? videoData.play : (parseInt(videoData.play) / 10000).toFixed(1) + '万'}</span>
  957.                   </span>
  958.                   <span class="danmaku">
  959.                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M8 3.3320333333333334C6.321186666666667 3.3320333333333334 4.855333333333333 3.4174399999999996 3.820593333333333 3.5013466666666666C3.1014733333333333 3.5596599999999996 2.5440733333333334 4.109013333333333 2.48 4.821693333333333C2.4040466666666664 5.666533333333334 2.333333333333333 6.780666666666666 2.333333333333333 7.998666666666666C2.333333333333333 9.216733333333334 2.4040466666666664 10.330866666666665 2.48 11.175699999999999C2.5440733333333334 11.888366666666666 3.1014733333333333 12.437733333333334 3.820593333333333 12.496066666666666C4.855333333333333 12.579933333333333 6.321186666666667 12.665333333333333 8 12.665333333333333C9.678999999999998 12.665333333333333 11.144933333333334 12.579933333333333 12.179733333333333 12.496033333333333C12.898733333333332 12.4377 13.456 11.888533333333331 13.520066666666667 11.176033333333333C13.595999999999998 10.331533333333333 13.666666666666666 9.217633333333332 13.666666666666666 7.998666666666666C13.666666666666666 6.779766666666667 13.595999999999998 5.665846666666667 13.520066666666667 4.821366666666666C13.456 4.108866666666666 12.898733333333332 3.55968 12.179733333333333 3.5013666666666663C11.144933333333334 3.417453333333333 9.678999999999998 3.3320333333333334 8 3.3320333333333334zM3.7397666666666667 2.50462C4.794879999999999 2.41906 6.288386666666666 2.3320333333333334 8 2.3320333333333334C9.7118 2.3320333333333334 11.2054 2.4190733333333334 12.260533333333331 2.5046399999999998C13.458733333333331 2.6018133333333333 14.407866666666665 3.5285199999999994 14.516066666666667 4.73182C14.593933333333332 5.597933333333334 14.666666666666666 6.7427 14.666666666666666 7.998666666666666C14.666666666666666 9.2547 14.593933333333332 10.399466666666665 14.516066666666667 11.2656C14.407866666666665 12.468866666666665 13.458733333333331 13.395566666666667 12.260533333333331 13.492766666666665C11.2054 13.578333333333333 9.7118 13.665333333333333 8 13.665333333333333C6.288386666666666 13.665333333333333 4.794879999999999 13.578333333333333 3.7397666666666667 13.492799999999999C2.541373333333333 13.395599999999998 1.5922066666666668 12.468633333333333 1.4840200000000001 11.265266666666665C1.4061199999999998 10.3988 1.3333333333333333 9.253866666666667 1.3333333333333333 7.998666666666666C1.3333333333333333 6.743533333333333 1.4061199999999998 5.598579999999999 1.4840200000000001 4.732153333333333C1.5922066666666668 3.5287466666666667 2.541373333333333 2.601793333333333 3.7397666666666667 2.50462z" fill="currentColor"></path><path d="M10.583333333333332 7.166666666666666L6.583333333333333 7.166666666666666C6.307193333333332 7.166666666666666 6.083333333333333 6.942799999999999 6.083333333333333 6.666666666666666C6.083333333333333 6.390526666666666 6.307193333333332 6.166666666666666 6.583333333333333 6.166666666666666L10.583333333333332 6.166666666666666C10.859466666666666 6.166666666666666 11.083333333333332 6.390526666666666 11.083333333333332 6.666666666666666C11.083333333333332 6.942799999999999 10.859466666666666 7.166666666666666 10.583333333333332 7.166666666666666z" fill="currentColor"></path><path d="M11.583333333333332 9.833333333333332L7.583333333333333 9.833333333333332C7.3072 9.833333333333332 7.083333333333333 9.609466666666666 7.083333333333333 9.333333333333332C7.083333333333333 9.0572 7.3072 8.833333333333332 7.583333333333333 8.833333333333332L11.583333333333332 8.833333333333332C11.859466666666666 8.833333333333332 12.083333333333332 9.0572 12.083333333333332 9.333333333333332C12.083333333333332 9.609466666666666 11.859466666666666 9.833333333333332 11.583333333333332 9.833333333333332z" fill="currentColor"></path><path d="M5.25 6.666666666666666C5.25 6.942799999999999 5.02614 7.166666666666666 4.75 7.166666666666666L4.416666666666666 7.166666666666666C4.140526666666666 7.166666666666666 3.9166666666666665 6.942799999999999 3.9166666666666665 6.666666666666666C3.9166666666666665 6.390526666666666 4.140526666666666 6.166666666666666 4.416666666666666 6.166666666666666L4.75 6.166666666666666C5.02614 6.166666666666666 5.25 6.390526666666666 5.25 6.666666666666666z" fill="currentColor"></path><path d="M6.25 9.333333333333332C6.25 9.609466666666666 6.02614 9.833333333333332 5.75 9.833333333333332L5.416666666666666 9.833333333333332C5.140526666666666 9.833333333333332 4.916666666666666 9.609466666666666 4.916666666666666 9.333333333333332C4.916666666666666 9.0572 5.140526666666666 8.833333333333332 5.416666666666666 8.833333333333332L5.75 8.833333333333332C6.02614 8.833333333333332 6.25 9.0572 6.25 9.333333333333332z" fill="currentColor"></path></svg>
  960.                     <span>${videoData.video_review}</span>
  961.                   </span>
  962.                 </div>
  963.               </div>
  964.             </a>
  965.           `;
  966.         };
  967.  
  968.         const addAnchor = (container) => {
  969.           const anchorElement = document.createElement('div');
  970.           anchorElement.classList.add('anchor-for-loading');
  971.           anchorElement.style = `margin-right: 3.2vmin; padding: 10vmin 0; text-align: center; font-size: 0.8rem; color: #61666d;`;
  972.           anchorElement.textContent = '正在加载...';
  973.           container.appendChild(anchorElement);
  974.  
  975.           let paginationCounter = 1;
  976.           const ob = new IntersectionObserver(async (entries) => {
  977.             if (!entries[0].isIntersecting) return;
  978.  
  979.             const newPaginationData = await getPaginationData(++paginationCounter);
  980.             if (newPaginationData instanceof Array && newPaginationData.length === 0) {
  981.               anchorElement.textContent = '所有投稿已加载完毕';
  982.               ob.disconnect();
  983.               return;
  984.             }
  985.  
  986.             for (const videoData of newPaginationData) {
  987.               anchorElement.insertAdjacentHTML('beforebegin', getVideoItem(videoData));
  988.             }
  989.           });
  990.  
  991.           ob.observe(anchorElement);
  992.         };
  993.  
  994.         // get first pagination data
  995.         const firstPaginationData = await getPaginationData(1);
  996.  
  997.         // return if there are no video archives
  998.         if (firstPaginationData instanceof Array && firstPaginationData.length === 0) return;
  999.  
  1000.         // clear archive list, then add video item
  1001.         archiveList.innerHTML = '';
  1002.         for (const videoData of firstPaginationData) {
  1003.           archiveList.insertAdjacentHTML('beforeend', getVideoItem(videoData));
  1004.         }
  1005.  
  1006.         // add anchor to the bottom
  1007.         addAnchor(archiveList);
  1008.       }
  1009.     }, 100);
  1010.   }
  1011.  
  1012.   async function modifyDynamicPage() {
  1013.     // if <m-open-app> still exists 1 second after opening the page, reload the page
  1014.     const noMoreOpenAppPromise = new Promise(resolve => {
  1015.       setTimeout(() => {
  1016.         if (document.querySelector('m-open-app')) window.location.reload();
  1017.         else resolve();
  1018.       }, 1000);
  1019.     });
  1020.  
  1021.     // get cleaned dynamic card
  1022.     const dynamicCard = await new Promise(resolve => {
  1023.       const timer = setInterval(() => {
  1024.         const dynamicCardWrapper = document.querySelector('m-open-app.card-wrap');
  1025.         if (dynamicCardWrapper) {
  1026.           clearInterval(timer);
  1027.           const dynamicCard = dynamicCardWrapper.querySelector('.dyn-card');
  1028.           dynamicCardWrapper.insertAdjacentElement('beforebegin', dynamicCard);
  1029.           dynamicCardWrapper.remove();
  1030.           resolve(dynamicCard);
  1031.         }
  1032.       }, 100);
  1033.     });
  1034.  
  1035.     // setup click event on author avatar and name
  1036.     const spaceURL = dynamicCard.querySelector('.dyn-header').dataset.url;
  1037.     dynamicCard.querySelector('.dyn-header .dyn-header__author__avatar').onclick = () => window.location.href = spaceURL;
  1038.     dynamicCard.querySelector('.dyn-header .dyn-header__author__name').onclick = () => window.location.href = spaceURL;
  1039.  
  1040.     // setup click event on topic(original or referenced)
  1041.     dynamicCard.querySelectorAll('.dyn-content .bili-dyn-topic').forEach(item => {
  1042.       item.onclick = () => window.location.href = item.dataset.url;
  1043.     });
  1044.  
  1045.     // setup click event on archive(original or referenced)
  1046.     dynamicCard.querySelectorAll('.dyn-content .dyn-archive').forEach(item => {
  1047.       item.onclick = () => window.location.href = `https://m.bilibili.com/video/${item.dataset.oid}`;
  1048.     });
  1049.  
  1050.     // setup click event on rich-text-topic
  1051.     dynamicCard.querySelectorAll('.dyn-content .bili-richtext .bili-rich-text-topic').forEach(item => {
  1052.       item.onclick = () => window.location.href = item.dataset.url;
  1053.     });
  1054.  
  1055.     // setup click event on rich-text-at
  1056.     dynamicCard.querySelectorAll('.dyn-content .bili-richtext .bili-rich-text-module.at').forEach(item => {
  1057.       item.onclick = () => window.location.href = `https://m.bilibili.com/space/${item.dataset.oid}`;
  1058.     });
  1059.  
  1060.     // setup click event on rich-text-link
  1061.     dynamicCard.querySelectorAll('.dyn-content .bili-richtext .bili-rich-text-link:not(.viewpic)').forEach(item => {
  1062.       item.onclick = () => window.location.href = item.dataset.url;
  1063.     });
  1064.  
  1065.     // setup click event on rich-text-link for viewing image
  1066.     const viewPicElements = dynamicCard.querySelectorAll('.dyn-content .bili-richtext .bili-rich-text-link.viewpic');
  1067.     if (viewPicElements.length > 0) {
  1068.       let code, dynamicDetail;
  1069.       const dynamicID = window.location.pathname.replace('/dynamic/', '');
  1070.       const parseResult = JSON.parse(window.localStorage.getItem('dynamicDetail'));
  1071.       if (parseResult && parseResult.data.item.id_str === dynamicID) {
  1072.         code = parseResult.code;
  1073.         dynamicDetail = parseResult.data;
  1074.       } else {
  1075.         const fetchResult = await fetch(`https://api.bilibili.com/x/polymer/web-dynamic/v1/detail?id=${dynamicID}`).then(res => res.json());
  1076.         code = fetchResult.code;
  1077.         dynamicDetail = fetchResult.data;
  1078.         if (code === 0) window.localStorage.setItem('dynamicDetail', JSON.stringify(fetchResult));
  1079.       }
  1080.  
  1081.       if (code === 0) {
  1082.         const viewPicNodes = [].concat(
  1083.           dynamicDetail.item.modules?.module_dynamic?.desc?.rich_text_nodes?.filter(node => node.type === 'RICH_TEXT_NODE_TYPE_VIEW_PICTURE') || [],
  1084.           dynamicDetail.item.orig?.modules?.module_dynamic?.desc?.rich_text_nodes?.filter(node => node.type === 'RICH_TEXT_NODE_TYPE_VIEW_PICTURE') || [],
  1085.         );
  1086.         viewPicElements.forEach((viewPicElement, index) => {
  1087.           viewPicElement.insertAdjacentHTML('beforeend', `<div style="display: none;">${viewPicNodes[index].pics.map(pic => `<img src=${pic.src} />`).join('')}</div>`);
  1088.           const viewerInstance = new Viewer(viewPicElement, { title: false, toolbar: false, tooltip: false, keyboard: false });
  1089.           viewPicElement.onclick = () => viewerInstance.show();
  1090.         });
  1091.       }
  1092.     }
  1093.  
  1094.     // setup image viewer on pics-block
  1095.     dynamicCard.querySelectorAll('.dyn-content .bm-pics-block').forEach(item => {
  1096.       new Viewer(item, { title: false, toolbar: false, tooltip: false, keyboard: false, url: (image) => image.src.slice(0, image.src.lastIndexOf('@')) });
  1097.     });
  1098.  
  1099.     // setup click event on goods card
  1100.     dynamicCard.querySelectorAll('.dyn-content .dyn-goods .dyn-goods__card > [data-url]').forEach(item => {
  1101.       item.onclick = () => window.location.href = item.dataset.url;
  1102.     });
  1103.  
  1104.     // setup click event on goods list item
  1105.     dynamicCard.querySelectorAll('.dyn-content .dyn-goods .dyn-goods__card .dyn-goods__list__item > img').forEach(item => {
  1106.       item.onclick = () => window.location.href = item.dataset.url;
  1107.     });
  1108.  
  1109.     // setup click event on live card
  1110.     dynamicCard.querySelectorAll('.dyn-content .dyn-live__card').forEach(item => {
  1111.       item.onclick = () => window.location.href = item.dataset.url;
  1112.     });
  1113.  
  1114.     // setup click event on additional common card
  1115.     dynamicCard.querySelectorAll('.dyn-content .dyn-add-common').forEach(item => {
  1116.       item.onclick = () => window.location.href = item.dataset.url;
  1117.     });
  1118.  
  1119.     // setup click event on reference author
  1120.     const referenceAuthor = dynamicCard.querySelector('.dyn-content .reference .dyn-orig-author');
  1121.     if (referenceAuthor) {
  1122.       referenceAuthor.querySelector('.dyn-orig-author__following').remove();
  1123.       referenceAuthor.onclick = () => window.location.href = referenceAuthor.dataset.url;
  1124.     }
  1125.  
  1126.     // setup click event on reference article
  1127.     const referenceArticle = dynamicCard.querySelector('.dyn-content .reference .dyn-article');
  1128.     if (referenceArticle) {
  1129.       referenceArticle.onclick = async () => {
  1130.         let code, dynamicDetail;
  1131.         const dynamicID = window.location.pathname.replace('/dynamic/', '');
  1132.         const parseResult = JSON.parse(window.localStorage.getItem('dynamicDetail'));
  1133.         if (parseResult && parseResult.data.item.id_str === dynamicID) {
  1134.           code = parseResult.code;
  1135.           dynamicDetail = parseResult.data;
  1136.         } else {
  1137.           const fetchResult = await fetch(`https://api.bilibili.com/x/polymer/web-dynamic/v1/detail?id=${dynamicID}`).then(res => res.json());
  1138.           code = fetchResult.code;
  1139.           dynamicDetail = fetchResult.data;
  1140.           if (code === 0) window.localStorage.setItem('dynamicDetail', JSON.stringify(fetchResult));
  1141.         }
  1142.  
  1143.         if (code === 0) {
  1144.           const jump_url = dynamicDetail.item.orig?.modules?.module_dynamic?.major?.article?.jump_url;
  1145.           if (jump_url) window.location.href = jump_url;
  1146.         }
  1147.       }
  1148.     }
  1149.  
  1150.     // setup comment module
  1151.     const timer4CommentModule = setInterval(() => {
  1152.       const wrapper = document.querySelector('.m-dynamic > .v-switcher');
  1153.       if (wrapper) {
  1154.         clearInterval(timer4CommentModule);
  1155.         wrapper.className = 'comment-module-wrapper';
  1156.         wrapper.style = `background-color: #fff; overflow-x: hidden;`;
  1157.         wrapper.innerHTML = '';
  1158.         noMoreOpenAppPromise.then(_ => MobileCommentModule.init(wrapper));
  1159.       }
  1160.     }, 100);
  1161.   }
  1162.  
  1163.   async function modifyOpusPage() {
  1164.     // if <m-open-app> still exists 1 second after opening the page, reload the page
  1165.     const noMoreOpenAppPromise = new Promise(resolve => {
  1166.       setTimeout(() => {
  1167.         if (document.querySelector('m-open-app')) window.location.reload();
  1168.         else resolve();
  1169.       }, 1000);
  1170.     });
  1171.  
  1172.     // get data of opus modules
  1173.     const opusModules = await new Promise(resolve => {
  1174.       const timer = setInterval(() => {
  1175.         const opusModules = window.__INITIAL_STATE__?.opus?.detail?.modules;
  1176.         if (opusModules instanceof Array && opusModules.length !== 0) {
  1177.           clearInterval(timer);
  1178.           resolve(opusModules);
  1179.         }
  1180.       }, 100);
  1181.     });
  1182.  
  1183.     // remove opus content read more limit
  1184.     const timer4OpusReadMoreLimit = setInterval(() => {
  1185.       document.querySelectorAll('.opus-module-content.limit').forEach(item => item.classList.remove('limit'));
  1186.       document.querySelectorAll('.opus-read-more').forEach(item => item.remove());
  1187.     }, 100);
  1188.     setTimeout(() => clearInterval(timer4OpusReadMoreLimit), 3 * 1000);
  1189.  
  1190.     // setup image viewer on top album
  1191.     document.querySelectorAll('.opus-module-top .opus-module-top__album').forEach(item => {
  1192.       let previousImageAmount = item.querySelectorAll('.v-swipe__item img').length;
  1193.       const viewerInstance = new Viewer(item, { title: false, toolbar: false, tooltip: false, keyboard: false, url: (image) => image.src.slice(0, image.src.lastIndexOf('@')) });
  1194.       setInterval(() => {
  1195.         const currentImageAmount = item.querySelectorAll('.v-swipe__item img').length;
  1196.         if (currentImageAmount > previousImageAmount) {
  1197.           previousImageAmount = currentImageAmount;
  1198.           viewerInstance.update();
  1199.         }
  1200.       }, 500);
  1201.     });
  1202.  
  1203.     // get cleaned author avatar and name
  1204.     const wrappedAuthorAvatar = document.querySelector('m-open-app.opus-module-author__avatar');
  1205.     const wrappedAuthorName = document.querySelector('m-open-app.opus-module-author__name');
  1206.     wrappedAuthorAvatar.outerHTML = wrappedAuthorAvatar.outerHTML.replace('<m-open-app', '<div').replace('</m-open-app', '</div');
  1207.     wrappedAuthorName.outerHTML = wrappedAuthorName.outerHTML.replace('<m-open-app', '<div').replace('</m-open-app', '</div');
  1208.     const authorAvatar = document.querySelector('.opus-module-author__avatar');
  1209.     authorAvatar.querySelector('.sleepy')?.classList.remove('sleepy');
  1210.     const authorName = document.querySelector('.opus-module-author__name');
  1211.  
  1212.     // setup click event on author avatar and name
  1213.     const authorData = opusModules.find(module => module.module_type === 'MODULE_TYPE_AUTHOR')?.module_author;
  1214.     authorAvatar.onclick = () => window.location.href = authorData.jump_url;
  1215.     authorName.onclick = () => window.location.href = authorData.jump_url;
  1216.  
  1217.     // clean and setup click event on topic
  1218.     const timer4Topic = setInterval(() => {
  1219.       const wrapper = document.querySelector('m-open-app.opus-module-topic');
  1220.       if (wrapper) {
  1221.         wrapper.outerHTML = wrapper.outerHTML.replace('<m-open-app', '<span').replace('</m-open-app', '</span');
  1222.         const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_TOPIC')?.module_topic?.jump_url;
  1223.         if (jump_url) document.querySelector('.opus-module-topic').onclick = () => window.location.href = jump_url;
  1224.       }
  1225.     }, 100);
  1226.     setTimeout(() => clearInterval(timer4Topic), 3 * 1000);
  1227.  
  1228.     // clean and setup click event on rich-text-at
  1229.     document.querySelectorAll('m-open-app > .opus-text-rich-hl.at').forEach(item => {
  1230.       const wrapper = item.parentElement;
  1231.       wrapper.insertAdjacentElement('beforebegin', item);
  1232.       wrapper.remove();
  1233.       const rid = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 1)?.text?.nodes.find(node => node.type === 'TEXT_NODE_TYPE_RICH' && node?.rich?.type === 'RICH_TEXT_NODE_TYPE_AT' && node?.rich?.text === item.textContent)?.rich?.rid;
  1234.       if (rid) item.onclick = () => window.location.href = `https://m.bilibili.com/space/${rid}`;
  1235.     });
  1236.  
  1237.     // clean and setup click event on rich-text-topic
  1238.     document.querySelectorAll('m-open-app > .opus-text-rich-hl.topic').forEach((item, index) => {
  1239.       const wrapper = item.parentElement;
  1240.       wrapper.insertAdjacentElement('beforebegin', item);
  1241.       wrapper.remove();
  1242.       const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 1)?.text?.nodes.filter(node => node.type === 'TEXT_NODE_TYPE_RICH' && node?.rich?.type === 'RICH_TEXT_NODE_TYPE_TOPIC').at(index)?.rich?.jump_url;
  1243.       if (jump_url) item.onclick = () => window.location.href = jump_url;
  1244.     });
  1245.  
  1246.     // clean and setup click event on rich-text-link
  1247.     document.querySelectorAll('m-open-app > .opus-text-rich-hl.link').forEach((item, index) => {
  1248.       const wrapper = item.parentElement;
  1249.       wrapper.insertAdjacentElement('beforebegin', item);
  1250.       wrapper.remove();
  1251.       const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 1)?.text?.nodes.filter(node => node.type === 'TEXT_NODE_TYPE_RICH' && node?.rich?.type === 'RICH_TEXT_NODE_TYPE_WEB').at(index)?.rich?.jump_url;
  1252.       if (jump_url) item.onclick = () => window.location.href = jump_url;
  1253.     });
  1254.  
  1255.     // clean and setup click event on rich-text-goods
  1256.     document.querySelectorAll('m-open-app > .opus-text-rich-hl.goods').forEach((item, index) => {
  1257.       const wrapper = item.parentElement;
  1258.       wrapper.insertAdjacentElement('beforebegin', item);
  1259.       wrapper.remove();
  1260.       const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 1)?.text?.nodes.filter(node => node.type === 'TEXT_NODE_TYPE_RICH' && node?.rich?.type === 'RICH_TEXT_NODE_TYPE_GOODS').at(index)?.rich?.jump_url;
  1261.       if (jump_url) item.onclick = () => window.location.href = jump_url;
  1262.     });
  1263.  
  1264.     // clean rich-text-lottery
  1265.     document.querySelectorAll('m-open-app > .opus-text-rich-hl.lottery').forEach((item, index) => {
  1266.       const wrapper = item.parentElement;
  1267.       wrapper.insertAdjacentElement('beforebegin', item);
  1268.       wrapper.remove();
  1269.     });
  1270.  
  1271.     // setup image viewer on pics-block
  1272.     document.querySelectorAll('.opus-module-content .bm-pics-block').forEach(item => {
  1273.       const wrapper = item.parentElement;
  1274.       if (wrapper.tagName === 'M-OPEN-APP') {
  1275.         wrapper.insertAdjacentElement('beforebegin', item);
  1276.         wrapper.remove();
  1277.       }
  1278.       new Viewer(item, { title: false, toolbar: false, tooltip: false, keyboard: false, url: (image) => image.src.slice(0, image.src.lastIndexOf('@')) });
  1279.     });
  1280.  
  1281.     // clean reserve card and setup click event
  1282.     const timer4ReserveCard = setInterval(() => {
  1283.       const reserveCard = document.querySelector('m-open-app > .bm-link-card-reserve');
  1284.       if (reserveCard) {
  1285.         const wrapper = reserveCard.parentElement;
  1286.         wrapper.insertAdjacentElement('beforebegin', reserveCard);
  1287.         wrapper.remove();
  1288.         const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 6)?.link_card?.card?.reserve?.jump_url;
  1289.         if (jump_url) reserveCard.onclick = () => window.location.href = jump_url;
  1290.       }
  1291.     }, 100);
  1292.     setTimeout(() => clearInterval(timer4ReserveCard), 3 * 1000);
  1293.  
  1294.     // clean goods card and setup click event
  1295.     const timer4GoodsCard = setInterval(() => {
  1296.       const goodsCard = document.querySelector('m-open-app > .bm-link-card-goods');
  1297.       if (goodsCard) {
  1298.         const wrapper = goodsCard.parentElement;
  1299.         wrapper.insertAdjacentElement('beforebegin', goodsCard);
  1300.         wrapper.remove();
  1301.         goodsCard.querySelectorAll('.bm-link-card-goods__one[data-url]').forEach(item => {
  1302.           item.onclick = () => window.location.href = item.dataset.url;
  1303.         });
  1304.         goodsCard.querySelectorAll('.bm-link-card-goods__list__item img').forEach(item => {
  1305.           item.onclick = () => window.location.href = item.dataset.url;
  1306.         });
  1307.       }
  1308.     }, 100);
  1309.     setTimeout(() => clearInterval(timer4GoodsCard), 3 * 1000);
  1310.  
  1311.     // clean and setup click event on ugc card
  1312.     const timer4UgcCard = setInterval(() => {
  1313.       const ugcCard = document.querySelector('m-open-app > .bm-link-card-ugc');
  1314.       if (ugcCard) {
  1315.         const wrapper = ugcCard.parentElement;
  1316.         wrapper.insertAdjacentElement('beforebegin', ugcCard);
  1317.         wrapper.remove();
  1318.         const jump_url = opusModules.find(module => module.module_type === 'MODULE_TYPE_CONTENT')?.module_content?.paragraphs.find(paragraph => paragraph.para_type === 6)?.link_card?.card?.ugc?.jump_url;
  1319.         if (jump_url) ugcCard.onclick = () => window.location.href = jump_url;
  1320.       }
  1321.     }, 100);
  1322.     setTimeout(() => clearInterval(timer4UgcCard), 3 * 1000);
  1323.  
  1324.     // clean and setup click event on common card
  1325.     const timer4CommonCard = setInterval(() => {
  1326.       const commonCard = document.querySelector('m-open-app > .bm-link-card-common');
  1327.       if (commonCard) {
  1328.         const wrapper = commonCard.parentElement;
  1329.         wrapper.insertAdjacentElement('beforebegin', commonCard);
  1330.         wrapper.remove();
  1331.         commonCard.onclick = () => window.location.href = commonCard.dataset.url;
  1332.       }
  1333.     }, 100);
  1334.     setTimeout(() => clearInterval(timer4CommonCard), 3 * 1000);
  1335.  
  1336.     // setup comment module
  1337.     const timer4CommentModule = setInterval(() => {
  1338.       const wrapper = document.querySelector('.m-opus .v-switcher');
  1339.       if (wrapper) {
  1340.         clearInterval(timer4CommentModule);
  1341.         wrapper.className = 'comment-module-wrapper';
  1342.         wrapper.style = `background-color: #fff; overflow-x: hidden;`;
  1343.         wrapper.innerHTML = '';
  1344.         noMoreOpenAppPromise.then(_ => MobileCommentModule.init(wrapper));
  1345.       }
  1346.     }, 100);
  1347.   }
  1348.  
  1349.   async function modifyTopicDetailPage() {
  1350.     const timer4OpenApp = setInterval(() => {
  1351.       document.querySelectorAll('m-open-app').forEach(item => {
  1352.         item.outerHTML = item.outerHTML.replace('<m-open-app', '<div').replace('</m-open-app', '</div');
  1353.       });
  1354.     }, 100);
  1355.     setTimeout(() => clearInterval(timer4OpenApp), 3 * 1000);
  1356.   }
  1357.  
  1358.   async function getWbiQueryString(params) {
  1359.     // get origin key
  1360.     const { img_url, sub_url } = await fetch('https://api.bilibili.com/x/web-interface/nav').then(res => res.json()).then(json => json.data.wbi_img);
  1361.     const imgKey = img_url.slice(img_url.lastIndexOf('/') + 1, img_url.lastIndexOf('.'));
  1362.     const subKey = sub_url.slice(sub_url.lastIndexOf('/') + 1, sub_url.lastIndexOf('.'));
  1363.     const originKey = imgKey + subKey;
  1364.  
  1365.     // get mixin key
  1366.     const mixinKeyEncryptTable = [
  1367.       46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49,
  1368.       33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13, 37, 48, 7, 16, 24, 55, 40,
  1369.       61, 26, 17, 0, 1, 60, 51, 30, 4, 22, 25, 54, 21, 56, 59, 6, 63, 57, 62, 11,
  1370.       36, 20, 34, 44, 52
  1371.     ];
  1372.     const mixinKey = mixinKeyEncryptTable.map(n => originKey[n]).join('').slice(0, 32);
  1373.  
  1374.     // generate basic query string
  1375.     const query = Object
  1376.       .keys(params)
  1377.       .sort() // sort properties by key
  1378.       .map(key => {
  1379.         const value = params[key].toString().replace(/[!'()*]/g, ''); // remove characters !'()* in value
  1380.         return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
  1381.       })
  1382.       .join('&');
  1383.  
  1384.     // calculate wbi sign
  1385.     const wbiSign = SparkMD5.hash(query + mixinKey);
  1386.  
  1387.     return query + '&w_rid=' + wbiSign;
  1388.   }
  1389.  
  1390. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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