B站动态首页展示所有正在直播列表

直接在动态首页展示所有的正在直播名单，而不是默认10个

< Feedback on B站动态首页展示所有正在直播列表

Review: Bad - script does not work

Laster2800 Liang
§
Posted: 2022-05-28
Edited: 2022-05-28
Report comment

没有人直播时，刷新会出错

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at init (userscript.html?name=B站动态首页展示所有正在直播列表.user.js&id=d9645174-4036-44ff-8092-75aa61f598b7:212:24)
    at async HTMLButtonElement.<anonymous> (userscript.html?name=B站动态首页展示所有正在直播列表.user.js&id=d9645174-4036-44ff-8092-75aa61f598b7:232:9)
init @ userscript.html?name=B站动态首页展示所有正在直播列表.user.js&id=d9645174-4036-44ff-8092-75aa61f598b7:212
Laster2800 Liang
§
Posted: 2023-01-21
Report comment

看来作者已经放弃，在忍了这个不痛不痒的小问题半年后终于忍不住，在改完自己的脚本后顺手改了，有需要者自取。作者要用的话记得改下版本号，不然我还接收不到更新。

// ==UserScript==
// @name         B站动态首页展示所有正在直播列表
// @namespace    http://tampermonkey.net/
// @version      0.2.5.alpha
// @description  直接在动态首页展示所有的正在直播名单，而不是默认10个
// @author       tuntun, fixed by Laster2800
// @noframes
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .bili-dyn-live-users {
      max-height: calc(100vh - 276px);
      overflow-y: overlay;
    }

    .bili-dyn-live-users::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #ccc;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
      display: none;
    }
    .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
      background-color: #9f9f9f;
    }

    .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
      display: block;

    }

    .bili-dyn-live-users::-webkit-scrollbar-track {
      display: none;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      display: none;
    }
  `)

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getLiver: async (num = 0) => {
      try {
        let params = {};
        if (num !== 0) {
          params = {
            size: num
          }
        }
        let res = await API.Get({
          url: 'https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/w_live_users',
          params,
        });
        return res;
      } catch (error) {
        console.log('getLiver', error);
      }
    },
    getCard: async (mid) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/card',
          params: {
            mid,
            photo: 'true',
          },
        });
        return res;
      } catch (error) {
        console.log('getCard', error);
      }
    }
  }

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
  }

  const getListItemTemplete = (prop) => {
    return `
      <div class="bili-dyn-live-users__item">
        <a href="${prop.link}" target="_blank" style="display: flex">
          <div class="bili-dyn-live-users__item__left">
            <div class="bili-dyn-live-users__item__face-container">
              <div class="bili-dyn-live-users__item__face">
                <div class="bili-awesome-img" style="background-image: url(${prop.face.slice(6)}@47w_47h_1c.webp);">
                </div>
              </div>
            </div>
          </div>
          <div class="bili-dyn-live-users__item__right">
            <div class="bili-dyn-live-users__item__uname bili-ellipsis">
              ${prop.uname}
            </div>
            <div class="bili-dyn-live-users__item__title bili-ellipsis">
              ${prop.title}
            </div>
          </div>
        </a>
      </div>
    `
  }

  const getCardTemplete = async (params) => {
    const {mid, x, y} = params;
    let data = await API.getCard(mid);
    let card = data.card;
    return `
      <div data-v-6c7ff250="" class="userinfo-wrapper" style="top: ${x}px; left: ${y}px">
        <div data-v-1b335720="" data-v-6c7ff250="" class="userinfo-content">
          <!---->
          <div data-v-1b335720="" class="bg" style="
              background-image: url('${data.space.l_img.slice(5)}@120h.webp');
            "></div>
          <a data-v-1b335720="" href="//space.bilibili.com/${mid}/dynamic" target="_blank" class="face">
            <img
              data-v-1b335720="" src="${card.face.slice(5)}@50w_50h_1c.webp" />
            ${card.official_verify.type !== -1 ? `<div data-v-1b335720="" class="verify-box type-${card.official_verify.type}"></div>` : ''}
          </a>
          <div data-v-1b335720="" class="info">
            <p data-v-1b335720="" class="user">
              <a data-v-1b335720="" target="_blank" href="//space.bilibili.com/${mid}/dynamic" class="name ${card.vip.status === 0 ? '' : 'vip'}"
              ${card.vip.status === 0 ? '' : 'style="color: rgb(251, 114, 153)"'}>${card.name}</a>
              <!----><a data-v-1b335720="" target="_blank" href="//www.bilibili.com/html/help.html#k_5"><img
                  data-v-1b335720=""
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI+SURBVHgB7ZcxbNNAFIb/M0lKsSNgadaSmVZstExIBQmkimaFDgixIhqYEDMgJpoCY1GnlhkhYAkrYu8e5mRBiDptCM31Xlq7cc7xpXGU1NL7Flt353vvv3v33hlgGIZhGIZhEovAGPizeHtFShQxIBJYu/jlW4neUxgDyoGCWrppDIiAXFKPoIDfi7euW8K6jxEgIadJBWFdykPYtvmbWhWtWk1r9wUIiFUp5RWMEHI++/Z93+N3Hj/C/q9KcA7/TeICRkw/Kx8Y7+jjrbBJs+sbOP/5K+xXr2Fisvi0PTb7YSPUIWsq157PWXuHzJ0CBkW6LlrVqtauHWJhO7ByucPOmVmYSF2e8R09k8/j//Z2oD+9cONoPtXftf2dtFSM/334ACfFQsJJvICx1IEwKHQn7i737KcQa34va+2nSICNs/eWI8e4SkT3GeMQGhaUJps/f2jt6blrkfViqAJSV+e1LabU2g/S3cFuaVWfc302UkDsECLDHhNLhcBBpCKXnps/HlutYdjEFlB/+SJQIekgUvEiIRn19KAMsvdxE8PGGEKTxSdaG8VrY2vzsLyrzOA+f9a+dngV/Jxa+U7I+XrpDaKgNBpmSzgOYgnILNwMbW+Wy/7NMEyER0Ot+t6WeeUpznvZimLgEOq+GXoiOsPJ6HzdRVy0HSBHdtV2i6lcz48odLqzjfctiaAz0KtydrJfqRhtmWyGhtA/g+EoyPHGCQ5rHFuEL4B+lIWUK0gAEuITGIZhGIZhmORzAFVa0dNZxTNHAAAAAElFTkSuQmCC"
                  class="level" /></a>
                  <span data-v-1b335720="" class="vip-label" style="
                  background-color: rgb(251, 114, 153);
                  color: rgb(255, 255, 255);
                "><span data-v-1b335720="" class="label-size">年度大会员</span></span>
            </p>
            <p data-v-1b335720="" class="social">
              <a data-v-1b335720="" href="//space.bilibili.com/7706705/fans/follow" target="_blank"><span data-v-1b335720=""
                  class="follow">281</span><span data-v-1b335720="" class="label">关注</span></a><a data-v-1b335720=""
                href="//space.bilibili.com/7706705/fans/fans" target="_blank"><span data-v-1b335720=""
                  class="fans">48.5万</span><span data-v-1b335720="" class="label">粉丝</span></a><span data-v-1b335720=""><span
                  data-v-1b335720="" class="like">202.3万</span><span data-v-1b335720="" class="label">获赞</span></span>
            </p>
            <p data-v-1b335720="" class="verify-desc">
              <i data-v-1b335720="" class="verify-icon type--0"></i><span data-v-1b335720="">bilibili个人认证：bilibili
                直播高能主播</span>
            </p>
            <p data-v-1b335720="" class="sign">
              ${card.sign}
            </p>
          </div>
          <div data-v-1b335720="" class="btn-box">
            <a data-v-1b335720="" class="like liked"><span data-v-1b335720="">已关注</span></a><a data-v-1b335720=""
              href="//message.bilibili.com/#whisper/mid7706705" target="_blank" class="message">发消息</a>
          </div>
        </div>
      </div>
    `
  }

  const init = async () => {
    const liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
    const allLiver = await API.getLiver((await API.getLiver()).count);
    const items = allLiver.items ?? []
    liveUpListDom.textContent = ''
    items.forEach(item => liveUpListDom.append(Tool.s2d(getListItemTemplete(item))));
    document.querySelector('.bili-dyn-live-users__title span').innerHTML = `（${items.length}）`
  }

  const addRefleshBtn =  () => {
    let header = document.querySelector('.bili-dyn-live-users__header');
    if (!header) {
      const left = document.querySelector('.bili-dyn-home--member .left')
      left.insertAdjacentHTML('beforeend', '<section class="sticky"><div class="bili-dyn-live-users"><div class="bili-dyn-live-users__header"><div class="bili-dyn-live-users__title"> 正在直播 <span>（0）</span></div> <div class="bili-dyn-live-users__more"> 更多 </div></div> <div class="bili-dyn-live-users__body"></div></div></section>')
      header = document.querySelector('.bili-dyn-live-users__header');
      header._fake = true
    }
    const more = document.querySelector('.bili-dyn-live-users__more');
    if (header._fake) {
      more.addEventListener('click', () => window.open('https://link.bilibili.com/p/center/index#/user-center/follow/1'))
    }
    const refleshBtn = Tool.s2d(`
      <button style="background: white; color: #99a2aa; cursor: pointer; border: #99a2aa;font-size: 12px;">刷新</button>
    `);
    try {
      header.insertBefore(refleshBtn, more);
      refleshBtn.addEventListener('click', async () => {
        refleshBtn.innerHTML = '正在刷新';
        await init();
        refleshBtn.innerHTML = '刷新';
      });
      refleshBtn.onmouseover = () => {
        refleshBtn.style.color = '#00a1d6';
      }
      refleshBtn.onmouseout  = () => {
        refleshBtn.style.color = '#99a2aa';
      }
    } catch (error) {
      console.log(error);
    }
  }

  window.addEventListener(
    'load',
    () => {
      addRefleshBtn();
      init();
    },
  )
})();
233YUZI
§
Posted: 2023-03-01
Report comment

兄弟，现在似乎头像显示不出来了

233YUZI
§
Posted: 2023-03-01
Report comment

我找了一个差不多的，Bilibili Evolved脚本里的直播信息扩充插件，但是只能显示十个且没有刷新按钮

Davinci_D7
§
Posted: 2023-03-01
Report comment

头像显示不出+1，其他版本的也尝试了

Laster2800 Liang
§
Posted: 2023-03-01
Report comment

随便改了改，暂且能用的程度，稳定性堪忧。现在属于一坨（）的状态，最好来个人把它重新做一下。

// ==UserScript==
// @name         B站动态首页展示所有正在直播列表
// @namespace    http://tampermonkey.net/
// @version      0.2.5.alpha.1
// @description  直接在动态首页展示所有的正在直播名单，而不是默认10个
// @author       tuntun, fixed by Laster2800
// @noframes
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .bili-dyn-live-users {
      max-height: calc(100vh - 276px);
      overflow-y: overlay;
    }

    .bili-dyn-live-users::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #ccc;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
      display: none;
    }
    .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
      background-color: #9f9f9f;
    }

    .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
      display: block;

    }

    .bili-dyn-live-users::-webkit-scrollbar-track {
      display: none;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      display: none;
    }
  `)

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getLiver: async (num = 0) => {
      try {
        let params = {};
        if (num !== 0) {
          params = {
            size: num
          }
        }
        let res = await API.Get({
          url: 'https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/w_live_users',
          params,
        });
        return res;
      } catch (error) {
        console.log('getLiver', error);
      }
    },
    getCard: async (mid) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/card',
          params: {
            mid,
            photo: 'true',
          },
        });
        return res;
      } catch (error) {
        console.log('getCard', error);
      }
    }
  }

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
  }

  const getListItemTemplete = (prop) => {
    return `
        <a class="bili-dyn-live-users__item" href="${prop.link}" target="_blank">
            <div class="bili-dyn-live-users__item__left">
                <div class="bili-dyn-live-users__item__face-container">
                    <div class="bili-dyn-live-users__item__face">
                        <div class="b-img--face b-img">
                            <picture class="b-img__inner">
                                <source type="image/avif" srcset="${prop.face.slice(6)}@76w_76h_!web-dynamic.avif">
                                <source type="image/webp" srcset="${prop.face.slice(6)}@76w_76h_!web-dynamic.webp">
                                <img src="${prop.face.slice(6)}@76w_76h_!web-dynamic.webp" loading="lazy" onload="bmgCmptOnload(this)">
                            </picture>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bili-dyn-live-users__item__right">
                <div class="bili-dyn-live-users__item__uname bili-ellipsis">${prop.uname}</div>
                <div class="bili-dyn-live-users__item__title bili-ellipsis">${prop.title}</div>
            </div>
        </a>
    `
  }

  const getCardTemplete = async (params) => {
    const {mid, x, y} = params;
    let data = await API.getCard(mid);
    let card = data.card;
    return `
      <div data-v-6c7ff250="" class="userinfo-wrapper" style="top: ${x}px; left: ${y}px">
        <div data-v-1b335720="" data-v-6c7ff250="" class="userinfo-content">
          <!---->
          <div data-v-1b335720="" class="bg" style="
              background-image: url('${data.space.l_img.slice(5)}@120h.webp');
            "></div>
          <a data-v-1b335720="" href="//space.bilibili.com/${mid}/dynamic" target="_blank" class="face">
            <img
              data-v-1b335720="" src="${card.face.slice(5)}@50w_50h_1c.webp" />
            ${card.official_verify.type !== -1 ? `<div data-v-1b335720="" class="verify-box type-${card.official_verify.type}"></div>` : ''}
          </a>
          <div data-v-1b335720="" class="info">
            <p data-v-1b335720="" class="user">
              <a data-v-1b335720="" target="_blank" href="//space.bilibili.com/${mid}/dynamic" class="name ${card.vip.status === 0 ? '' : 'vip'}"
              ${card.vip.status === 0 ? '' : 'style="color: rgb(251, 114, 153)"'}>${card.name}</a>
              <!----><a data-v-1b335720="" target="_blank" href="//www.bilibili.com/html/help.html#k_5"><img
                  data-v-1b335720=""
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI+SURBVHgB7ZcxbNNAFIb/M0lKsSNgadaSmVZstExIBQmkimaFDgixIhqYEDMgJpoCY1GnlhkhYAkrYu8e5mRBiDptCM31Xlq7cc7xpXGU1NL7Flt353vvv3v33hlgGIZhGIZhEovAGPizeHtFShQxIBJYu/jlW4neUxgDyoGCWrppDIiAXFKPoIDfi7euW8K6jxEgIadJBWFdykPYtvmbWhWtWk1r9wUIiFUp5RWMEHI++/Z93+N3Hj/C/q9KcA7/TeICRkw/Kx8Y7+jjrbBJs+sbOP/5K+xXr2Fisvi0PTb7YSPUIWsq157PWXuHzJ0CBkW6LlrVqtauHWJhO7ByucPOmVmYSF2e8R09k8/j//Z2oD+9cONoPtXftf2dtFSM/334ACfFQsJJvICx1IEwKHQn7i737KcQa34va+2nSICNs/eWI8e4SkT3GeMQGhaUJps/f2jt6blrkfViqAJSV+e1LabU2g/S3cFuaVWfc302UkDsECLDHhNLhcBBpCKXnps/HlutYdjEFlB/+SJQIekgUvEiIRn19KAMsvdxE8PGGEKTxSdaG8VrY2vzsLyrzOA+f9a+dngV/Jxa+U7I+XrpDaKgNBpmSzgOYgnILNwMbW+Wy/7NMEyER0Ot+t6WeeUpznvZimLgEOq+GXoiOsPJ6HzdRVy0HSBHdtV2i6lcz48odLqzjfctiaAz0KtydrJfqRhtmWyGhtA/g+EoyPHGCQ5rHFuEL4B+lIWUK0gAEuITGIZhGIZhmORzAFVa0dNZxTNHAAAAAElFTkSuQmCC"
                  class="level" /></a>
                  <span data-v-1b335720="" class="vip-label" style="
                  background-color: rgb(251, 114, 153);
                  color: rgb(255, 255, 255);
                "><span data-v-1b335720="" class="label-size">年度大会员</span></span>
            </p>
            <p data-v-1b335720="" class="social">
              <a data-v-1b335720="" href="//space.bilibili.com/7706705/fans/follow" target="_blank"><span data-v-1b335720=""
                  class="follow">281</span><span data-v-1b335720="" class="label">关注</span></a><a data-v-1b335720=""
                href="//space.bilibili.com/7706705/fans/fans" target="_blank"><span data-v-1b335720=""
                  class="fans">48.5万</span><span data-v-1b335720="" class="label">粉丝</span></a><span data-v-1b335720=""><span
                  data-v-1b335720="" class="like">202.3万</span><span data-v-1b335720="" class="label">获赞</span></span>
            </p>
            <p data-v-1b335720="" class="verify-desc">
              <i data-v-1b335720="" class="verify-icon type--0"></i><span data-v-1b335720="">bilibili个人认证：bilibili
                直播高能主播</span>
            </p>
            <p data-v-1b335720="" class="sign">
              ${card.sign}
            </p>
          </div>
          <div data-v-1b335720="" class="btn-box">
            <a data-v-1b335720="" class="like liked"><span data-v-1b335720="">已关注</span></a><a data-v-1b335720=""
              href="//message.bilibili.com/#whisper/mid7706705" target="_blank" class="message">发消息</a>
          </div>
        </div>
      </div>
    `
  }

  const init = async () => {
    const liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
    const allLiver = await API.getLiver((await API.getLiver()).count);
    const items = allLiver.items ?? []
    liveUpListDom.textContent = ''
    items.forEach(item => liveUpListDom.append(Tool.s2d(getListItemTemplete(item))));
    document.querySelector('.bili-dyn-live-users__title span').innerHTML = `（${items.length}）`
  }

  const addRefleshBtn =  () => {
    let header = document.querySelector('.bili-dyn-live-users__header');
    if (!header) {
      const left = document.querySelector('.bili-dyn-home--member .left')
      left.insertAdjacentHTML('beforeend', '<section class="sticky"><div class="bili-dyn-live-users"><div class="bili-dyn-live-users__header"><div class="bili-dyn-live-users__title"> 正在直播 <span>（0）</span></div> <div class="bili-dyn-live-users__more"> 更多 </div></div> <div class="bili-dyn-live-users__body"></div></div></section>')
      header = document.querySelector('.bili-dyn-live-users__header');
      header._fake = true
    }
    const more = document.querySelector('.bili-dyn-live-users__more');
    if (header._fake) {
      more.addEventListener('click', () => window.open('https://link.bilibili.com/p/center/index#/user-center/follow/1'))
    }
    const refleshBtn = Tool.s2d(`
      <button style="background: white; color: #99a2aa; cursor: pointer; border: #99a2aa;font-size: 12px;">刷新</button>
    `);
    try {
      header.insertBefore(refleshBtn, more);
      refleshBtn.addEventListener('click', async () => {
        refleshBtn.innerHTML = '正在刷新';
        await init();
        refleshBtn.innerHTML = '刷新';
      });
      refleshBtn.onmouseover = () => {
        refleshBtn.style.color = '#00a1d6';
      }
      refleshBtn.onmouseout  = () => {
        refleshBtn.style.color = '#99a2aa';
      }
    } catch (error) {
      console.log(error);
    }
  }

    window.addEventListener(
        'load',
        () => setTimeout(() => {
            addRefleshBtn();
            init();
        }, 2000)
    )
})();
LetMeFork
§
Posted: 2023-03-01
Report comment

原来不止我一个人头像显示不出，这个脚本很好用的，头像只是小问题，当然能解决了最好

Notofnice
§
Posted: 2023-03-04
Edited: 2023-03-04
Report comment

用了下上面恢复头像的代码，现在在直播列表中移到头像上没有用户卡片显示，这代码里只有个半成品，只能用getCard获取数据，应该是没想到要怎么显示出来，官方的代码是用mouseenter中的js脚本来实现的，但点进去那段代码实在是看不懂，逆向太麻烦了...

Laster2800 Liang
§
Posted: 2024-07-11
Report comment

又不行了，再瞎改改：

// ==UserScript==
// @name         B站动态首页展示所有正在直播列表
// @namespace    http://tampermonkey.net/
// @version      0.2.5.alpha.6
// @description  直接在动态首页展示所有的正在直播名单，而不是默认10个
// @author       tuntun, fixed by Laster2800
// @noframes
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .bili-dyn-live-users {
      max-height: calc(100vh - 276px);
      overflow-y: overlay;
    }

    .bili-dyn-live-users::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #ccc;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
      display: none;
    }
    .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
      background-color: #9f9f9f;
    }

    .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
      display: block;

    }

    .bili-dyn-live-users::-webkit-scrollbar-track {
      display: none;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      display: none;
    }
  `)

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getLiver: async () => {
      try {
        const res = await API.Get({ url: 'https://api.bilibili.com/x/polymer/web-dynamic/v1/portal' });
        return res.live_users;
      } catch (error) {
        console.log('getLiver', error);
      }
    },
    getCard: async (mid) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/card',
          params: {
            mid,
            photo: 'true',
          },
        });
        return res;
      } catch (error) {
        console.log('getCard', error);
      }
    }
  }

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
  }

  const getListItemTemplate = (prop) => {
    return `<div class="bili-dyn-live-users__container"><a href="${prop.jump_url}" target="_blank"><div class="bili-dyn-live-users__item-container"><div class="bili-dyn-live-users__item"><div class="bili-dyn-live-users__item__left"><div class="bili-dyn-live-users__item__face"><div class="b-img--face b-img"><picture class="b-img__inner"><source type="image/avif" srcset="${prop.face}@96w_96h_!web-dynamic.avif"><source type="image/webp" srcset="${prop.face}@96w_96h_!web-dynamic.webp"><img src="${prop.face}@96w_96h_!web-dynamic.webp" loading="lazy" onload="bmgCmptOnload(this)" onerror="bmgCmptOnerror(this)"></picture></div></div> <div class="bili-dyn-live-users__item__living"></div></div> <div class="bili-dyn-live-users__item__right"><div class="bili-dyn-live-users__item__uname bili-ellipsis">${prop.uname}</div> <div class="bili-dyn-live-users__item__title bili-ellipsis">${prop.title}</div></div></div></div></a></div>`
  }

  const getCardTemplete = async (params) => {
    const {mid, x, y} = params;
    let data = await API.getCard(mid);
    let card = data.card;
    return `
      <div data-v-6c7ff250="" class="userinfo-wrapper" style="top: ${x}px; left: ${y}px">
        <div data-v-1b335720="" data-v-6c7ff250="" class="userinfo-content">
          <!---->
          <div data-v-1b335720="" class="bg" style="
              background-image: url('${data.space.l_img.slice(5)}@120h.webp');
            "></div>
          <a data-v-1b335720="" href="//space.bilibili.com/${mid}/dynamic" target="_blank" class="face">
            <img
              data-v-1b335720="" src="${card.face.slice(5)}@50w_50h_1c.webp" />
            ${card.official_verify.type !== -1 ? `<div data-v-1b335720="" class="verify-box type-${card.official_verify.type}"></div>` : ''}
          </a>
          <div data-v-1b335720="" class="info">
            <p data-v-1b335720="" class="user">
              <a data-v-1b335720="" target="_blank" href="//space.bilibili.com/${mid}/dynamic" class="name ${card.vip.status === 0 ? '' : 'vip'}"
              ${card.vip.status === 0 ? '' : 'style="color: rgb(251, 114, 153)"'}>${card.name}</a>
              <!----><a data-v-1b335720="" target="_blank" href="//www.bilibili.com/html/help.html#k_5"><img
                  data-v-1b335720=""
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI+SURBVHgB7ZcxbNNAFIb/M0lKsSNgadaSmVZstExIBQmkimaFDgixIhqYEDMgJpoCY1GnlhkhYAkrYu8e5mRBiDptCM31Xlq7cc7xpXGU1NL7Flt353vvv3v33hlgGIZhGIZhEovAGPizeHtFShQxIBJYu/jlW4neUxgDyoGCWrppDIiAXFKPoIDfi7euW8K6jxEgIadJBWFdykPYtvmbWhWtWk1r9wUIiFUp5RWMEHI++/Z93+N3Hj/C/q9KcA7/TeICRkw/Kx8Y7+jjrbBJs+sbOP/5K+xXr2Fisvi0PTb7YSPUIWsq157PWXuHzJ0CBkW6LlrVqtauHWJhO7ByucPOmVmYSF2e8R09k8/j//Z2oD+9cONoPtXftf2dtFSM/334ACfFQsJJvICx1IEwKHQn7i737KcQa34va+2nSICNs/eWI8e4SkT3GeMQGhaUJps/f2jt6blrkfViqAJSV+e1LabU2g/S3cFuaVWfc302UkDsECLDHhNLhcBBpCKXnps/HlutYdjEFlB/+SJQIekgUvEiIRn19KAMsvdxE8PGGEKTxSdaG8VrY2vzsLyrzOA+f9a+dngV/Jxa+U7I+XrpDaKgNBpmSzgOYgnILNwMbW+Wy/7NMEyER0Ot+t6WeeUpznvZimLgEOq+GXoiOsPJ6HzdRVy0HSBHdtV2i6lcz48odLqzjfctiaAz0KtydrJfqRhtmWyGhtA/g+EoyPHGCQ5rHFuEL4B+lIWUK0gAEuITGIZhGIZhmORzAFVa0dNZxTNHAAAAAElFTkSuQmCC"
                  class="level" /></a>
                  <span data-v-1b335720="" class="vip-label" style="
                  background-color: rgb(251, 114, 153);
                  color: rgb(255, 255, 255);
                "><span data-v-1b335720="" class="label-size">年度大会员</span></span>
            </p>
            <p data-v-1b335720="" class="social">
              <a data-v-1b335720="" href="//space.bilibili.com/7706705/fans/follow" target="_blank"><span data-v-1b335720=""
                  class="follow">281</span><span data-v-1b335720="" class="label">关注</span></a><a data-v-1b335720=""
                href="//space.bilibili.com/7706705/fans/fans" target="_blank"><span data-v-1b335720=""
                  class="fans">48.5万</span><span data-v-1b335720="" class="label">粉丝</span></a><span data-v-1b335720=""><span
                  data-v-1b335720="" class="like">202.3万</span><span data-v-1b335720="" class="label">获赞</span></span>
            </p>
            <p data-v-1b335720="" class="verify-desc">
              <i data-v-1b335720="" class="verify-icon type--0"></i><span data-v-1b335720="">bilibili个人认证：bilibili
                直播高能主播</span>
            </p>
            <p data-v-1b335720="" class="sign">
              ${card.sign}
            </p>
          </div>
          <div data-v-1b335720="" class="btn-box">
            <a data-v-1b335720="" class="like liked"><span data-v-1b335720="">已关注</span></a><a data-v-1b335720=""
              href="//message.bilibili.com/#whisper/mid7706705" target="_blank" class="message">发消息</a>
          </div>
        </div>
      </div>
    `
  }

  const init = async () => {
    const liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
    const allLiver = await API.getLiver();
    const items = allLiver.items ?? []
    liveUpListDom.textContent = ''
    items.forEach(item => liveUpListDom.append(Tool.s2d(getListItemTemplate(item))));
    document.querySelector('.bili-dyn-live-users__title span').innerHTML = `${items.length}`
  }

  const addRefleshBtn = () => {
    let header = document.querySelector('.bili-dyn-live-users__header');
    if (!header) {
      const left = document.querySelector('.bili-dyn-home--member .left')
      left.insertAdjacentHTML('beforeend', '<section class="sticky"><div class="bili-dyn-live-users"><div class="bili-dyn-live-users__header"><div class="bili-dyn-live-users__title"> 直播 <span>0</span></div> <div class="bili-dyn-live-users__more"> 更多 </div></div> <div class="bili-dyn-live-users__body"></div></div></section>')
      header = document.querySelector('.bili-dyn-live-users__header');
      header._fake = true
    }
    const more = document.querySelector('.bili-dyn-live-users__more');
    if (header._fake) {
      more.addEventListener('click', () => window.open('https://link.bilibili.com/p/center/index#/user-center/follow/1'))
    }
    const refleshBtn = Tool.s2d(`
      <button style="background:white;color:#9499a0;cursor:pointer;border:none;font-size:13px">刷新</button>
    `);
    try {
      header.insertBefore(refleshBtn, more);
      refleshBtn.addEventListener('click', async () => {
        refleshBtn.innerHTML = '. . .';
        await init();
        refleshBtn.innerHTML = '刷新';
      });
      refleshBtn.onmouseover = () => {
        refleshBtn.style.color = '#00a1d6';
      }
      refleshBtn.onmouseout  = () => {
        refleshBtn.style.color = '#99a2aa';
      }
    } catch (error) {
      console.log(error);
    }
  }

    window.addEventListener(
        'load',
        () => setTimeout(() => {
            addRefleshBtn();
            init();
        }, 2000)
    )
})();
Davinci_D7
§
Posted: 2024-07-12
Report comment

感谢分享！
如果这个不能用了，也找到了替补
脚本 Bilibili Evolved 中有一个“直播信息扩充”的功能可以用。

Davinci_D7
§
Posted: 2024-07-13
Report comment

又不行了，再瞎改改：

// ==UserScript==
// @name         B站动态首页展示所有正在直播列表
// @namespace    http://tampermonkey.net/
// @version      0.2.5.alpha.6
// @description  直接在动态首页展示所有的正在直播名单，而不是默认10个
// @author       tuntun, fixed by Laster2800
// @noframes
// @match        https://t.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .bili-dyn-live-users {
      max-height: calc(100vh - 276px);
      overflow-y: overlay;
    }

    .bili-dyn-live-users::-webkit-scrollbar {
      width: 10px; /*滚动条的宽度*/
      height: 8px; /*滚动条的高度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      background-color: #fff; /*滚动条的背景颜色*/
      -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      opacity: 0;
    }

    .bili-dyn-live-users::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: #ccc;
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
      display: none;
    }
    .bili-dyn-live-users::-webkit-scrollbar-thumb:hover {
      background-color: #9f9f9f;
    }

    .bili-dyn-live-users:hover::-webkit-scrollbar-thumb {
      display: block;

    }

    .bili-dyn-live-users::-webkit-scrollbar-track {
      display: none;
    }

    .bili-dyn-live-users::-webkit-scrollbar-track-piece {
      display: none;
    }
  `)

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}${pStr !== '' ? '?' : ''}${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getLiver: async () => {
      try {
        const res = await API.Get({ url: 'https://api.bilibili.com/x/polymer/web-dynamic/v1/portal' });
        return res.live_users;
      } catch (error) {
        console.log('getLiver', error);
      }
    },
    getCard: async (mid) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/card',
          params: {
            mid,
            photo: 'true',
          },
        });
        return res;
      } catch (error) {
        console.log('getCard', error);
      }
    }
  }

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
  }

  const getListItemTemplate = (prop) => {
    return `<div class="bili-dyn-live-users__container"><a href="${prop.jump_url}" target="_blank"><div class="bili-dyn-live-users__item-container"><div class="bili-dyn-live-users__item"><div class="bili-dyn-live-users__item__left"><div class="bili-dyn-live-users__item__face"><div class="b-img--face b-img"><picture class="b-img__inner"><source type="image/avif" srcset="${prop.face}@96w_96h_!web-dynamic.avif"><source type="image/webp" srcset="${prop.face}@96w_96h_!web-dynamic.webp"><img src="${prop.face}@96w_96h_!web-dynamic.webp" loading="lazy" onload="bmgCmptOnload(this)" onerror="bmgCmptOnerror(this)"></picture></div></div> <div class="bili-dyn-live-users__item__living"></div></div> <div class="bili-dyn-live-users__item__right"><div class="bili-dyn-live-users__item__uname bili-ellipsis">${prop.uname}</div> <div class="bili-dyn-live-users__item__title bili-ellipsis">${prop.title}</div></div></div></div></a></div>`
  }

  const getCardTemplete = async (params) => {
    const {mid, x, y} = params;
    let data = await API.getCard(mid);
    let card = data.card;
    return `
      <div data-v-6c7ff250="" class="userinfo-wrapper" style="top: ${x}px; left: ${y}px">
        <div data-v-1b335720="" data-v-6c7ff250="" class="userinfo-content">
          <!---->
          <div data-v-1b335720="" class="bg" style="
              background-image: url('${data.space.l_img.slice(5)}@120h.webp');
            "></div>
          <a data-v-1b335720="" href="//space.bilibili.com/${mid}/dynamic" target="_blank" class="face">
            <img
              data-v-1b335720="" src="${card.face.slice(5)}@50w_50h_1c.webp" />
            ${card.official_verify.type !== -1 ? `<div data-v-1b335720="" class="verify-box type-${card.official_verify.type}"></div>` : ''}
          </a>
          <div data-v-1b335720="" class="info">
            <p data-v-1b335720="" class="user">
              <a data-v-1b335720="" target="_blank" href="//space.bilibili.com/${mid}/dynamic" class="name ${card.vip.status === 0 ? '' : 'vip'}"
              ${card.vip.status === 0 ? '' : 'style="color: rgb(251, 114, 153)"'}>${card.name}</a>
              <!----><a data-v-1b335720="" target="_blank" href="//www.bilibili.com/html/help.html#k_5"><img
                  data-v-1b335720=""
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI+SURBVHgB7ZcxbNNAFIb/M0lKsSNgadaSmVZstExIBQmkimaFDgixIhqYEDMgJpoCY1GnlhkhYAkrYu8e5mRBiDptCM31Xlq7cc7xpXGU1NL7Flt353vvv3v33hlgGIZhGIZhEovAGPizeHtFShQxIBJYu/jlW4neUxgDyoGCWrppDIiAXFKPoIDfi7euW8K6jxEgIadJBWFdykPYtvmbWhWtWk1r9wUIiFUp5RWMEHI++/Z93+N3Hj/C/q9KcA7/TeICRkw/Kx8Y7+jjrbBJs+sbOP/5K+xXr2Fisvi0PTb7YSPUIWsq157PWXuHzJ0CBkW6LlrVqtauHWJhO7ByucPOmVmYSF2e8R09k8/j//Z2oD+9cONoPtXftf2dtFSM/334ACfFQsJJvICx1IEwKHQn7i737KcQa34va+2nSICNs/eWI8e4SkT3GeMQGhaUJps/f2jt6blrkfViqAJSV+e1LabU2g/S3cFuaVWfc302UkDsECLDHhNLhcBBpCKXnps/HlutYdjEFlB/+SJQIekgUvEiIRn19KAMsvdxE8PGGEKTxSdaG8VrY2vzsLyrzOA+f9a+dngV/Jxa+U7I+XrpDaKgNBpmSzgOYgnILNwMbW+Wy/7NMEyER0Ot+t6WeeUpznvZimLgEOq+GXoiOsPJ6HzdRVy0HSBHdtV2i6lcz48odLqzjfctiaAz0KtydrJfqRhtmWyGhtA/g+EoyPHGCQ5rHFuEL4B+lIWUK0gAEuITGIZhGIZhmORzAFVa0dNZxTNHAAAAAElFTkSuQmCC"
                  class="level" /></a>
                  <span data-v-1b335720="" class="vip-label" style="
                  background-color: rgb(251, 114, 153);
                  color: rgb(255, 255, 255);
                "><span data-v-1b335720="" class="label-size">年度大会员</span></span>
            </p>
            <p data-v-1b335720="" class="social">
              <a data-v-1b335720="" href="//space.bilibili.com/7706705/fans/follow" target="_blank"><span data-v-1b335720=""
                  class="follow">281</span><span data-v-1b335720="" class="label">关注</span></a><a data-v-1b335720=""
                href="//space.bilibili.com/7706705/fans/fans" target="_blank"><span data-v-1b335720=""
                  class="fans">48.5万</span><span data-v-1b335720="" class="label">粉丝</span></a><span data-v-1b335720=""><span
                  data-v-1b335720="" class="like">202.3万</span><span data-v-1b335720="" class="label">获赞</span></span>
            </p>
            <p data-v-1b335720="" class="verify-desc">
              <i data-v-1b335720="" class="verify-icon type--0"></i><span data-v-1b335720="">bilibili个人认证：bilibili
                直播高能主播</span>
            </p>
            <p data-v-1b335720="" class="sign">
              ${card.sign}
            </p>
          </div>
          <div data-v-1b335720="" class="btn-box">
            <a data-v-1b335720="" class="like liked"><span data-v-1b335720="">已关注</span></a><a data-v-1b335720=""
              href="//message.bilibili.com/#whisper/mid7706705" target="_blank" class="message">发消息</a>
          </div>
        </div>
      </div>
    `
  }

  const init = async () => {
    const liveUpListDom = document.querySelector('.bili-dyn-live-users__body');
    const allLiver = await API.getLiver();
    const items = allLiver.items ?? []
    liveUpListDom.textContent = ''
    items.forEach(item => liveUpListDom.append(Tool.s2d(getListItemTemplate(item))));
    document.querySelector('.bili-dyn-live-users__title span').innerHTML = `${items.length}`
  }

  const addRefleshBtn = () => {
    let header = document.querySelector('.bili-dyn-live-users__header');
    if (!header) {
      const left = document.querySelector('.bili-dyn-home--member .left')
      left.insertAdjacentHTML('beforeend', '<section class="sticky"><div class="bili-dyn-live-users"><div class="bili-dyn-live-users__header"><div class="bili-dyn-live-users__title"> 直播 <span>0</span></div> <div class="bili-dyn-live-users__more"> 更多 </div></div> <div class="bili-dyn-live-users__body"></div></div></section>')
      header = document.querySelector('.bili-dyn-live-users__header');
      header._fake = true
    }
    const more = document.querySelector('.bili-dyn-live-users__more');
    if (header._fake) {
      more.addEventListener('click', () => window.open('https://link.bilibili.com/p/center/index#/user-center/follow/1'))
    }
    const refleshBtn = Tool.s2d(`
      <button style="background:white;color:#9499a0;cursor:pointer;border:none;font-size:13px">刷新</button>
    `);
    try {
      header.insertBefore(refleshBtn, more);
      refleshBtn.addEventListener('click', async () => {
        refleshBtn.innerHTML = '. . .';
        await init();
        refleshBtn.innerHTML = '刷新';
      });
      refleshBtn.onmouseover = () => {
        refleshBtn.style.color = '#00a1d6';
      }
      refleshBtn.onmouseout  = () => {
        refleshBtn.style.color = '#99a2aa';
      }
    } catch (error) {
      console.log(error);
    }
  }

    window.addEventListener(
        'load',
        () => setTimeout(() => {
            addRefleshBtn();
            init();
        }, 2000)
    )
})();

大佬，显示数量只有30个，请问要怎样改

Post reply

Sign in to post a reply.