☰

YouTube Boost Chat

完全替换 YouTube 聊天消息列表

作者
𝖢𝖸 𝖥𝗎𝗇𝗀
日安装量
4
总安装量
520
评分
10 0 1
版本
0.3.11
创建于
2024-12-15
更新于
2025-04-04
大小
211.9 KB
许可证
MIT
适用于

YouTube Boost Chat

  • Menu option: Ctrl Click the message please.

  • You might use YouTube Super Fast Chat to have smoother chatroom experience.

  • You might use YouTube RM3 to reduce memory usage.

Description

This is the full replacement of chat message list, like HyperChat.

We use the latest web technology called SolidJS for high efficient DOM tree handling.

You can feel the smooth update of messages with the least memory usage.

selector 參考

#items -> .bst-message-list

#message -> .bst-message-body

stylus / usercss 參考

original 原型

Example1 例1



    body .bst-message-list[class] {
        --bst-message-entry-pl:30px;
        --yt-live-chat-profile-icon-size:26px;
        --yt-live-chat-first-line-height:1.6;
        --yt-live-chat-emoji-size:  12px;
        --bst-author-badge-size: 12px;
    }
    .bst-message-body {
        display:block;
    }
    .bst-gift-message .bst-message-body {
        display: inline;
    }
    .bst-message-entry{
        font-size:8pt;
    }
    .bst-message-profile-holder{
        margin-top:2px;
        top:8px;

    }
    bst-tooltip {
        font-size: 8pt;
    }

Example2 例2

    body .bst-message-list[class] {
        --bst-message-entry-pl:14px;
        --yt-live-chat-profile-icon-size:20px;
        --yt-live-chat-first-line-height:1.6;
        --yt-live-chat-emoji-size:  18px;
        --bst-author-badge-size: 18px;
    }
    .bst-message-body {
        display:block;
    }
    .bst-gift-message .bst-message-body {
        display: inline;
    }
    .bst-message-entry{
        font-size:16pt;
    }
    .bst-message-profile-holder{
        margin-top:0px;
        top:0px;

    }
    body .bst-message-entry-highlight{
        left:-1.65rem;
        right:-1.65rem;
    }
    bst-tooltip {
        font-size: 10pt;
    }

Example3

    body .bst-message-list[class] {
        --bst-message-entry-pl:14px;
        --yt-live-chat-profile-icon-size:20px;
        --yt-live-chat-first-line-height:1.6;
        --yt-live-chat-emoji-size:  20px;
        --bst-author-badge-size: 14px;
    }
    .bst-message-head {
        font-size: 12pt;
    }
    .bst-message-body {
        font-size:16pt;
        display:block;
    }
    .bst-gift-message .bst-message-body {
        font-size: 12pt;
        display: inline;
    }
    .bst-message-profile-holder{
        margin-top:0px;
        top:0px;

    }
    body .bst-message-entry-highlight{
        left:-1.65rem;
        right:-1.65rem;
    }
    bst-tooltip {
        font-size: 10pt;
    }
    body .bst-message-profile-anchor{
        left: -6px;
    }

其他參數

  • --bst-author-badge-size: 16px;

  • --bst-author-badge-mb: .2rem;

  • --bst-default-text-color: #fff;

  • --bst-username-color: #a3e3e3;

  • --bst-list-pl: 20px;

  • --bst-list-pr: 20px;

  • --bst-list-pt: 8px;

  • --bst-list-pb: 8px;

  • --bst-list-gap: 10px;

How to use Stylus to make custom styling

You can customize the appearance of YouTube Boost Chat using the Stylus extension, even if you don’t know anything about coding!

🧩 Step 1: Install Stylus

Install the Stylus browser extension:

Once installed, you’ll see a small green “S” icon on your browser toolbar.

📝 Step 2: Create a new style for YouTube

  1. Go to YouTube in your browser.
  2. Click the Stylus “S” icon in your toolbar.
  3. Choose “Write style for: youtube.com”
  4. Copy and paste the full example below into the editor.
  5. Click Save.

✅ Step 3: Paste this example style

Here’s a working Stylus userCSS template. Just copy and paste everything below:

/* ==UserStyle==
@name         YouTube Boost Chat Custom Style
@namespace    https://example.com/
@version      1.0.0
@description  Personal styling for YouTube Boost Chat
@match        *://www.youtube.com/*
==/UserStyle== */

@-moz-document domain("youtube.com") {

  /* Custom variable overrides */
  body .bst-message-list[class] {
      --bst-message-entry-pl: 14px;
      --yt-live-chat-profile-icon-size: 20px;
      --yt-live-chat-first-line-height: 1.6;
      --yt-live-chat-emoji-size: 18px;
      --bst-author-badge-size: 16px;
  }

  /* Customize font and spacing */
  .bst-message-entry {
      font-size: 14px;
  }

  .bst-message-body {
      display: block;
  }

  .bst-gift-message .bst-message-body {
      display: inline;
  }

  .bst-message-profile-holder {
      margin-top: 0px;
      top: 0px;
  }

  .bst-message-head {
      font-size: 13px;
  }

  bst-tooltip {
      font-size: 10px;
  }

  /* Optional: highlight spacing tweak */
  body .bst-message-entry-highlight {
      left: -1.5rem;
      right: -1.5rem;
  }

}

💡 Bonus Tips

  • Want bigger emojis? Increase --yt-live-chat-emoji-size.
  • Want smaller profile icons? Reduce --yt-live-chat-profile-icon-size.
  • Tweak font-size in .bst-message-entry to change text size.

You can experiment with the values, then click Save and see the changes live—no need to refresh!