設計您自己的社交流疊加層

五步製作自己的疊加層

1. 選擇疊加層 中要修改的內容。
2. 下載來源ZIP，解壓縮後複製對應疊加層的 HTML 檔案。
3. 編輯副本 ，可以自己做，也可以請 AI 工具完成。
4. 在 OBS 開啟副本 ，在位址中加入 SSN 工作階段設定。
5. 測試 ，使用疊加層的真實觸發操作。

選擇要修改的疊加層

你可以修改疊加層的顏色、字型、版面、圖案和動畫。 HTML 文件 是頁面。 OBS 網址 指向該檔案，並加入工作階段和顯示設定。

不同疊加層接收的內容不同。聊天頁、精選訊息頁和投票頁並不使用相同輸入。請開啟對應類型的設計指南：

想要現成的？試試 疊加畫面圖庫 或 範本庫。想匯入 StreamElements 或 Streamlabs 聊天外觀？請參照 導入指南。該匯出檔案有自己的設定步驟。

下載文件

1. 下載 beta 原始碼 ZIP。或者開啟 測試版儲存庫 並選擇 代碼 → 下載 ZIP.
2. 解壓縮到準備長期保留的資料夾，例如 C:\SSN\social_stream-beta\。不要在 ZIP 內直接編輯，也不需要重裝 SSN。
3. 找到疊加層檔案（見上表），在原檔旁建立副本，例如 poll.html → my-poll.html。對於如下主題： themes/featured-styles/featured-modern.html時，將副本保留在同一資料夾。
4. 在文字或程式碼編輯器中開啟副本，儲存為 .html，不是 .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

保留工作階段連結

啟動 SSN、連線來源並確認原疊加層正常運作，然後複製 完整連結 ，從該疊加層對應的 SSN 工具取得。

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

以下內容之後的值： session= 是 SSN 工作階段，不是 YouTube 頻道、Twitch 名稱、檔案名稱或投票標題。SSN 和頁面必須使用相同工作階段和密碼。保持 SSN 執行：疊加層只接收資料，不會自行擷取聊天。

副本一直空白時先檢查原始連結。有的頁面會詢問缺少的設定，有的會保持隱藏或重新導向。把正確工作階段寫進連結可避免猜測。

在 OBS 開啟檔案

直接從電腦開啟編輯後的檔案，不需要伺服器。

1. 將 HTML 副本拖進 Chrome 或 Edge，複製位址。位址以 file:///.
2. 從可用的 SSN 疊加層連結中複製從以下位置開始的全部內容： ? 起的全部內容，貼到檔案位址末尾。這樣保留工作階段、密碼、設定及任何 # 部分。
3. 在瀏覽器開啟組合好的位址進行測試。
4. 在 OBS 中，新增 瀏覽器來源。將 本機檔案 取消勾選。將完整位址貼到 URL ，再設定寬度和高度。

例如：這個 SSN 連結…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…在 Windows 上下載的投票副本中變為：

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

macOS 上以 file:///Users/...，Linux 上通常是 file:///home/...。從瀏覽器複製會幫你處理空格和斜線。

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS 的檔案/URL 模式、尺寸、自訂 CSS 和重新整理說明見其 瀏覽器原始碼參考.

修改設計，或請 AI

準備好標誌、字型檔案、品牌顏色、畫布尺寸和視覺參考。網頁通常無法載入另一台電腦磁碟上的字型或圖片。

AI提示

使用各設計指南中的專用提示詞，或從此提示詞開始。把副本及它載入的樣式和指令碼交給 AI。

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

防止聊天內容變成可執行程式碼

名稱、訊息、標題、金額和連結來自觀眾或外部服務。把它們當作文字，絕不能當作程式碼；在轉譯器寫入頁面的位置進行清理。

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• 頁面已有清理器時請保留，不要再加第二個。
• 子資料夾中的檔案需要調整指令碼路徑。
• 不要把原始姓名拼進屬性字串，也不要把未經檢查的顏色拼進樣式標記。驗證樣式值後逐項設定屬性。
• 即使 HTML 已清理，也不能安全地當作 JavaScript 執行或作為 AI 指令。

更多背景： OWASP 關於安全輸出位置與 HTML 清理的指南.

逐項測試

需要交給 AI 的檔案

把疊加層本身的檔案、載入的 CSS/JS，以及以下檔案交給 AI。單靠事件參考無法解釋投票控制項或各疊加層的版面程式碼。

解決問題

先修復已確認的最小問題。改變樣式不應需要修改擷取指令碼或加入事件欄位。分享公開分支時應包含素材，排除含私密連結的啟動頁。