☰

Greasy Fork is available in English.

B站显示点赞率、投币率、收藏率

显示b站 | bilibili | 哔哩哔哩 点赞率、投币率、收藏率

Від 15.09.2024. Дивіться остання версія.

  1. // ==UserScript==
  2. // @name         B站显示点赞率、投币率、收藏率
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.7
  5. // @description  显示b站 | bilibili | 哔哩哔哩 点赞率、投币率、收藏率
  6. // @license      MIT
  7. // @author       魂hp
  8. // @website      https://space.bilibili.com/474989498
  9. // @match        http*://www.bilibili.com/
  10. // @match        http*://www.bilibili.com/?*
  11. // @match        http*://www.bilibili.com/video/*
  12. // @match        http*://www.bilibili.com/list/watchlater*
  13. // @match        http*://search.bilibili.com/all?*
  14. // @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
  15. // @grant        GM.addStyle
  16. // @grant        unsafeWindow
  17. // @run-at       document-start
  18. // @grant        GM_registerMenuCommand
  19. // @grant        GM_getValue
  20. // @grant        GM_setValue
  21. // ==/UserScript==
  22.  
  23. (function () {
  24.     // representation字段表示比率的表示形式，该字段为 fractions 时表示为分数，该字段为 percentage 时表示为百分比
  25.     let representation = GM_getValue('representation');
  26.     if (representation == null) {
  27.         GM_setValue('representation', 'percentage');
  28.         representation = 'percentage';
  29.     }
  30.     const isFractions = representation == 'fractions';
  31.  
  32.     // 注册脚本菜单以实现两种表示方式的相互转换
  33.     GM_registerMenuCommand(
  34.         '切换比率的表示方式（百分比和分数）',
  35.         function () {
  36.             representation = representation == 'fractions' ? 'percentage' : 'fractions';
  37.             GM_setValue('representation', representation);
  38.             location.reload();
  39.         }
  40.     );
  41.     // 判断当前页面
  42.     let currentPage = 'unknown';
  43.     if (location.pathname == '/') {
  44.         currentPage = 'mainPage';
  45.     } else if (location.pathname.match(/\/video\/.*\//)) {
  46.         currentPage = 'videoPage';
  47.     } else if (location.pathname.match(/list\/watchlater.*/)) {
  48.         currentPage = 'videoPageWatchList';
  49.     } else if (location.pathname == '/all') {
  50.         currentPage = 'searchPage';
  51.     }
  52.     // 工具函数：根据播放量和对应的数据算出比率并获取对应的颜色
  53.     function getRateAndColor(view, oneOfVideoStat) {
  54.         let res = {
  55.             rate: 0,
  56.             color: currentPage == 'videoPage' ? '#222' : 'inherit'
  57.         };
  58.         let num = view / oneOfVideoStat;
  59.         if (num == Infinity) {
  60.             return res;
  61.         }
  62.         // 当比率大于十分之一设置为橘色，大于二十五分之一设置为紫色，其他则设置为黑色（如果需要添加其他的范围对应的颜色或修改颜色可以改这部分）
  63.         if (num <= 10) {
  64.             if (isFractions) {
  65.                 res.rate = num.toFixed(2);
  66.             } else {
  67.                 res.rate = (oneOfVideoStat * 100 / view).toFixed(2);
  68.             }
  69.             res.color = 'DarkOrange';
  70.         } else if (num <= 25) {
  71.             if (isFractions) {
  72.                 res.rate = num.toFixed(1);
  73.             } else {
  74.                 res.rate = (oneOfVideoStat * 100 / view).toFixed(2);
  75.             }
  76.             res.color = 'violet';
  77.         } else {
  78.             if (isFractions) {
  79.                 res.rate = num.toFixed(0);
  80.             } else {
  81.                 res.rate = (oneOfVideoStat * 100 / view).toFixed(2);
  82.             }
  83.         }
  84.         return res;
  85.     }
  86.     // 工具函数，用于对uri和stat进行加工，并添加到 urlToDataMap 中
  87.     function processURIAndStat(uri, stat, urlToDataMap) {
  88.         if (uri != null && uri != '' && stat != null) {
  89.             const rateAndColor = getRateAndColor(stat.view, stat.like);
  90.             stat.rate = rateAndColor.rate;
  91.             stat.color = rateAndColor.color;
  92.             urlToDataMap.set(uri, stat);
  93.         }
  94.     }
  95.     // 工具函数，用于将对应格式的点赞路添加到视频卡片上
  96.     function addLikeRateToCard(node, urlToDataMap, key) {
  97.         const stat = urlToDataMap.get(key);
  98.         // 下面的这一行代码会导致浏览器尺寸发生变化时部分视频卡片上的点赞率消失，如果你很介意这一点可以将下面这一行代码删掉或注释掉（就是代码前面加上//），但是注释掉或者删掉会导致脚本占用更多的空间（不会太多）
  99.         urlToDataMap.delete(key);
  100.         if (stat != null) {
  101.             const span = node.querySelector('div.bili-video-card__stats--left').firstElementChild.cloneNode(false);
  102.             if (isFractions) {
  103.                 span.innerHTML = `
  104.                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="18"
  105.                                         height="18" fill="#ffffff" class="bili-video-card__stats--icon" style="margin-right:2px;">
  106.                                         <path
  107.                                             d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z"
  108.                                             p-id="3324" fill="currentColor"></path>
  109.                                     </svg><span class="bili-video-card__stats--text">1/<span class="bili-video-card__stats--text" id="data"></span></span>
  110.                                 `;
  111.  
  112.             } else {
  113.                 span.innerHTML = `
  114.                                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="18"
  115.                                         height="18" fill="#ffffff" class="bili-video-card__stats--icon" style="margin-right:2px;">
  116.                                         <path
  117.                                             d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z"
  118.                                             p-id="3324" fill="currentColor"></path>
  119.                                     </svg><span class="bili-video-card__stats--text"><span class="bili-video-card__stats--text" id="data"></span>%</span>
  120.                                 `;
  121.             }
  122.             let data = span.querySelector('#data');
  123.             data.style.color = stat.color;
  124.             data.textContent = stat.rate;
  125.             node.querySelector('.bili-video-card__stats--left').appendChild(span);
  126.         }
  127.     }
  128.     // 根据 currentPage 执行不同的逻辑
  129.     if (currentPage == 'mainPage') {
  130.         const originFetch = unsafeWindow.fetch;
  131.         const urlToDataMap = new Map(); // 一个map，键是视频uri，值为该视频的各项数据（播放、点赞、弹幕）
  132.         // 劫持b站的 fetch 请求，判断该 fetch 请求是不是包含视频数据，如果包含则将视频数据加入 map
  133.         // 参考自 https://juejin.cn/post/7135590843544502308
  134.         window.unsafeWindow.fetch = (url, options) => {
  135.             return originFetch(url, options).then(async (response) => {
  136.                 if (url.startsWith('https://api.bilibili.com/x/web-interface/wbi/index/top/feed/rcmd')) {
  137.                     const responseClone = response.clone();
  138.                     let res = await responseClone.json();
  139.                     for (let tmp of res.data.item) {
  140.                         processURIAndStat(tmp.uri, tmp.stat, urlToDataMap);
  141.                     }
  142.                 }
  143.                 return response;
  144.             });
  145.         };
  146.         // 当 DOMContentLoaded 事件发生后，将不是动态加载的那些视频的数据加入到 map 中
  147.         document.addEventListener('DOMContentLoaded', function () {
  148.             for (let tmp of unsafeWindow.__pinia.feed.data.recommend.item) {
  149.                 processURIAndStat(tmp.uri, tmp.stat, urlToDataMap);
  150.             }
  151.             const cards = document.querySelectorAll('div.feed-card');
  152.             for (let card of cards) {
  153.                 addLikeRateToCard(card, urlToDataMap, card.querySelector('.bili-video-card__image--link')?.href);
  154.             }
  155.             // 创建MutationObserver，监控新插入的视频卡片
  156.             new MutationObserver((mutationsList) => {
  157.                 // 遍历每一个发生变化的mutation
  158.                 for (let mutation of mutationsList) {
  159.                     // 检查每个添加的子节点
  160.                     if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
  161.                         // 遍历每个添加的子节点
  162.                         mutation.addedNodes.forEach(node => {
  163.                             if (node.nodeName == 'DIV' && (node.classList.contains('is-rcmd'))) {
  164.                                 addLikeRateToCard(node, urlToDataMap, node.querySelector('.bili-video-card__image--link')?.href);
  165.                             }
  166.                         });
  167.                     }
  168.                 }
  169.             }).observe(document, {
  170.                 childList: true,
  171.                 subtree: true
  172.             });
  173.         });
  174.     } else if (currentPage == 'videoPage' || currentPage == 'videoPageWatchList') {
  175.         document.addEventListener('DOMContentLoaded', function () {
  176.             if (!(unsafeWindow?.__INITIAL_STATE__?.videoData?.stat?.view)) {
  177.                 return;
  178.             }
  179.             // 修改样式
  180.             GM.addStyle(`
  181.                 .video-toolbar-left-item{
  182.                     width:auto !important;
  183.                 }
  184.                 .toolbar-left-item-wrap{
  185.                     display:flex !important;
  186.                     margin-right: 12px !important;
  187.                 }
  188.                 .video-share-info{
  189.                     width:auto !important;
  190.                     max-width:90px;
  191.                 }
  192.                 .video-share-info-text{
  193.                     position: relative !important;
  194.                 }
  195.             `);
  196.             // 百分比形式会占用更大的空间，需要额外添加样式
  197.             if (!isFractions) {
  198.                 GM.addStyle(`
  199.                     .video-toolbar-item-icon {
  200.                         margin-right:6px !important;
  201.                     }
  202.                     .toolbar-right-note{
  203.                         margin-right:5px !important;
  204.                     }
  205.                     .toolbar-right-ai{
  206.                         margin-right:12px !important;
  207.                     }
  208.                 `);
  209.             }
  210.  
  211.             class videoData {
  212.                 videoStat = {
  213.                     view: 0,
  214.                     like: 0,
  215.                     coin: 0,
  216.                     favorite: 0,
  217.                     share: 0
  218.                 };
  219.                 constructor() {
  220.                     this.initVideoStat();
  221.                 }
  222.                 initVideoStat() {
  223.                     for (let key in this.videoStat) {
  224.                         this.videoStat[key] = unsafeWindow.__INITIAL_STATE__.videoData.stat[key];
  225.                     }
  226.                 }
  227.                 // 计算点赞率、投币率、收藏率、转发率，并获取对应的颜色
  228.                 getRateAndColorByNameStr(nameStr) {
  229.                     return getRateAndColor(this.videoStat.view, this.videoStat[nameStr]);
  230.                 }
  231.             }
  232.  
  233.             const vData = new videoData();
  234.             //添加元素
  235.             const div = {
  236.                 like: {},
  237.                 coin: {},
  238.                 favorite: {},
  239.                 share: {}
  240.             };
  241.             for (let e in div) {
  242.                 div[e] = document.createElement('div');
  243.                 div[e].style.setProperty('display', 'flex')
  244.                 div[e].style.setProperty('align-items', 'center')
  245.                 if (isFractions) {
  246.                     div[e].innerHTML = `
  247.                         <span style="margin-left: 5px;margin-right: 3px;font-size:medium;">≈</span>
  248.                         <math xmlns="http://www.w3.org/1998/Math/MathML" style="font-size: 23px;">
  249.                             <mfrac>
  250.                                 <mrow>
  251.                                     <mn>1</mn>
  252.                                     </mrow><mrow>
  253.                                     <mi id="data"></mi>
  254.                                 </mrow>
  255.                             </mfrac>
  256.                         </math>
  257. 			        `;
  258.                 } else {
  259.                     div[e].innerHTML = `
  260.                         <span style="margin-left: 5px;margin-right: 3px;font-size:medium;">≈</span>
  261.                         <span id="data" style="font-family: math;font-size: initial;"></span><span style="font-family: math;margin-left: 2px;"> %</span>
  262. 			        `;
  263.                 }
  264.             }
  265.             // 更新数据
  266.             function updateRate() {
  267.                 for (let e in div) {
  268.                     let data = div[e].querySelector('#data');
  269.                     let rateAndColor = vData.getRateAndColorByNameStr(e);
  270.                     data.style.color = rateAndColor.color;
  271.                     data.textContent = rateAndColor.rate;
  272.                 }
  273.             }
  274.             updateRate();
  275.  
  276.             let addElementObserver = new MutationObserver(function (mutationsList) {
  277.                 for (let mutation of mutationsList) {
  278.                     if (mutation.type == 'attributes') {
  279.                         addElementObserver.disconnect();
  280.                         document
  281.                             .querySelector('.video-like')
  282.                             .parentNode.appendChild(div.like);
  283.                         document
  284.                             .querySelector('.video-coin')
  285.                             .parentNode.appendChild(div.coin);
  286.                         document
  287.                             .querySelector('.video-fav')
  288.                             .parentNode.appendChild(div.favorite);
  289.                         document
  290.                             .querySelector('.video-share-wrap')
  291.                             .parentNode.appendChild(div.share);
  292.                     }
  293.                 }
  294.             });
  295.             let observedElement = null;
  296.             if (currentPage == 'videoPage') {
  297.                 observedElement = document.querySelector('#arc_toolbar_report');
  298.             } else if (currentPage == 'videoPageWatchList') {
  299.                 observedElement = document.querySelector('#playlistToolbar');
  300.             }
  301.             addElementObserver.observe(observedElement, {
  302.                 childList: true,
  303.                 subtree: true,
  304.                 attributes: true
  305.             });
  306.  
  307.             // 当 bvid 发生改变时更新数据
  308.             let currentBvid = unsafeWindow.__INITIAL_STATE__.videoData.bvid;
  309.             new MutationObserver(function () {
  310.                 const newBvid = unsafeWindow.__INITIAL_STATE__.videoData.bvid;
  311.                 if (newBvid !== currentBvid) {
  312.                     vData.initVideoStat();
  313.                     updateRate();
  314.                     currentBvid = newBvid;
  315.                 }
  316.             }).observe(document.body, {
  317.                 childList: true,
  318.                 subtree: true
  319.             });
  320.         });
  321.     } else if (currentPage == 'searchPage') {
  322.         // 修改样式
  323.         GM.addStyle(`
  324.             .bili-video-card__stats--left{
  325.                 flex-wrap: wrap;
  326.                 align-self: flex-end;
  327.             }
  328.         `);
  329.         const urlToDataMap = new Map(); // 一个map，键是视频封面图片的url，值为该视频的各项数据（播放、点赞）
  330.         // 劫持 fetch 请求
  331.         const originFetch = unsafeWindow.fetch;
  332.         window.unsafeWindow.fetch = (url, options) => {
  333.             return originFetch(url, options).then(async (response) => {
  334.                 if (url.startsWith('https://api.bilibili.com/x/web-interface/wbi/search/type')) {
  335.                     const responseClone = response.clone();
  336.                     let res = await responseClone.json();
  337.                     for (let tmp of res.data.result) {
  338.                         if (tmp.type == 'video') {
  339.                             processURIAndStat('https:' + tmp.pic, { view: tmp.play, like: tmp.like }, urlToDataMap);
  340.                         }
  341.                     }
  342.                 } else if (url.startsWith('https://api.bilibili.com/x/web-interface/wbi/search/all/v2')) {
  343.                     const responseClone = response.clone();
  344.                     let res = await responseClone.json();
  345.                     for (let tmp of res.data.result[11].data) {
  346.                         if (tmp.type == 'video') {
  347.                             processURIAndStat('https:' + tmp.pic, { view: tmp.play, like: tmp.like }, urlToDataMap);
  348.                         }
  349.                     }
  350.                     setTimeout(() => {
  351.                         const cards = document.querySelectorAll('div.bili-video-card');
  352.                         for (let card of cards) {
  353.                             const rawPicUrl = card.querySelector('img').src;
  354.                             const key = rawPicUrl.slice(0, rawPicUrl.indexOf('@'));
  355.                             addLikeRateToCard(card, urlToDataMap, key);
  356.                         }
  357.                     }, 150);
  358.                 }
  359.                 return response;
  360.             });
  361.         };
  362.         // 当 DOMContentLoaded 事件发生后，将不是动态加载的那些视频的数据加入到 map 中
  363.         document.addEventListener('DOMContentLoaded', function () {
  364.             let data = unsafeWindow.__pinia.searchTypeResponse?.searchTypeResponse?.result;
  365.             if (data == undefined) {
  366.                 data = unsafeWindow.__pinia.searchResponse.searchAllResponse.result[11].data;
  367.             }
  368.             for (let tmp of data) {
  369.                 if (tmp.type == 'video') {
  370.                     processURIAndStat('https:' + tmp.pic, { view: tmp.play, like: tmp.like }, urlToDataMap);
  371.                 }
  372.             }
  373.             const cards = document.querySelectorAll('div.bili-video-card');
  374.             for (let card of cards) {
  375.                 const rawPicUrl = card.querySelector('img').src;
  376.                 const key = rawPicUrl.slice(0, rawPicUrl.indexOf('@'));
  377.                 addLikeRateToCard(card, urlToDataMap, key);
  378.             }
  379.         });
  380.         // 创建MutationObserver，监控新插入的视频卡片
  381.         new MutationObserver((mutationsList) => {
  382.             // 遍历每一个发生变化的mutation
  383.             for (let mutation of mutationsList) {
  384.                 // 检查每个添加的子节点
  385.                 if (mutation.type === 'childList' && mutation.addedNodes.length > 0 && mutation.target.classList.contains('search-page-wrapper')) {
  386.                     // 遍历每个添加的子节点
  387.                     mutation.addedNodes.forEach(node => {
  388.                         if (node.nodeName == 'DIV' && node.classList.contains('search-page')) {
  389.                             const cards = node.querySelectorAll('div.bili-video-card');
  390.                             for (const card of cards) {
  391.                                 const rawPicUrl = card.querySelector('img').src;
  392.                                 const key = rawPicUrl.slice(0, rawPicUrl.indexOf('@'));
  393.                                 addLikeRateToCard(card, urlToDataMap, key);
  394.                             }
  395.                         }
  396.                     });
  397.                 }
  398.             }
  399.         }).observe(document, {
  400.             childList: true,
  401.             subtree: true
  402.         });
  403.     }
  404. })();