设计您自己的社交流叠加层

五步制作自己的叠加层

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。单靠事件参考无法解释投票控件或各叠加层的布局代码。

解决问题

先修复已确认的最小问题。改变样式不应需要修改采集脚本或添加事件字段。分享公开分支时应包含素材，排除含私密链接的启动页。