YouTube Boost Chat

完全替換 YouTube 聊天訊息列表

安裝腳本 ?

發表問題、評論、或檢舉該腳本。

作者

𝖢𝖸 𝖥𝗎𝗇𝗀

今日安裝

安裝總數

658

評價

11 0 1

版本

0.3.25

建立日期

2024-12-15

更新日期

2025-09-15

尺寸

215.3 KB

授權條款

MIT

腳本執行於

youtube.com

YouTube Boost Chat

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.

How To Open Menu

Menu option: Ctrl Click the message please.

Other Fixes

You might use YouTube Super Fast Chat to have smoother chatroom experience. ( Ticker Bar )

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

Go to YouTube in your browser.
Click the Stylus “S” icon in your toolbar.
Choose “Write style for: youtube.com”
Copy and paste the full example below into the editor.
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!