Navrhněte si vlastní překryvné vrstvy sociálního proudu

Vyberte překryvnou vrstvu, kterou chcete přepracovat

Můžete změnit barvy, písma, rozvržení, kresbu a pohyb existující stránky. The Soubor HTML je stránka; a URL OBS ukazuje na něj a dodává nastavení relace a zobrazení. Pro malou změnu stylu použijte na hostované stránce vlastní CSS OBS. Pro hlubší změny si stáhněte zdroj a spusťte vlastní kopii.

Tyto příručky pokrývají rodiny překryvů, včetně jejich témat. Vyberte příjemce funkce, kterou používáte: stránka chatu, stránka s vybranými zprávami a anketa nespotřebovávají stejný vstup.

Pro hotový návrh začněte v Galerie překryvů nebo Galerie šablon. Pro existující vzhled chatu StreamElements/Streamlabs postupujte podle průvodce importem. Importovaný samostatný HTML má své vlastní pokyny pro export/nastavení.

1. Stáhněte si aktuální soubory

1. Stáhnout zdrojový ZIP beta verzenebo otevřete beta úložiště a vyberte Kód → Stáhnout ZIP.
2. Extrahujte ZIP do složky, kterou si můžete ponechat, např C:\SSN\social_stream-beta\. Neupravujte uvnitř komprimovaného archivu. Toto jsou zdrojové soubory stránky; úprava samostatné kopie nevyžaduje přeinstalaci SSN.
3. Najděte soubor zobrazený v tabulce výše. Duplikujte jej vedle originálu: například poll.html se mění na my-poll.html. Pro themes/featured-styles/featured-modern.html, ponechte si kopii v themes/featured-styles/.
4. Otevřete kopii v textovém/kódovém editoru. Udělte svému nástroji AI přístup k tomuto souboru a odkazovaným stylům/skriptům, které potřebuje. Uložit HTML jako .html, ne .html.txt.

Udržujte extrahovanou strukturu složek. Jeden stažený soubor HTML může vedle něj načíst skripty, šablony stylů, písma, obrázky, zvuk nebo JSON. Zobrazení stránky GitHubu a „Uložit stránku“ prohlížeče nejsou spolehlivým kompletním balíkem. Každý typ průvodce identifikuje užitečné soubory, ale úplně extrahovaná složka je nejjednodušší způsob, jak zachovat závislosti.

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

Odkaz jako např ../../shared/utils/chatHtml.js je relativní ke stránce, která jej načítá. Přesunutí této stránky do kořenového adresáře přeruší cestu. Zkopírujte místní kresbu a písma také do projektu a poté použijte relativní adresy URL. Udržujte stažené verze pohromadě; vaše upravená kopie nebude automaticky přijímat budoucí opravy SSN.

2. Ponechte nastavení relace a připojení

Spusťte SSN, připojte zdroj a potvrďte, že původní překrytí funguje. Zkopírujte kompletní vygenerovaný odkaz z příslušného nástroje SSN. Hodnota po session= identifikuje vaši relaci SSN; nejde o kanál YouTube, uživatelské jméno Twitch, název souboru nebo název ankety.

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

V příkladu jsou použity zástupné symboly. SSN a stránka musí používat stejnou skutečnou relaci a jakékoli nakonfigurované heslo. Změna názvu souboru nezmění relaci. Udržujte SSN a zachycení spuštěné: překryvná vrstva přijímá data; nezachycuje chat platformy sám o sobě.

• ? spustí dotaz; použití následného nastavení &. Místo přepisování hodnoty zkopírujte. V atributu zdroje HTML napište &; v poli browser/OBS URL použijte obyčejný ampersand.
• Zachovat nastavení dopravy: server, server2, server3, místní koncové body, štítky a hodnoty verze jsou specifické pro stránku. Nepřidávejte příznak serveru jen proto, že jej podporuje jiné překrytí.
• Zachovat také fragmenty: vše po # může záležet. AI Event Overlay například používá privátní #aieventauth=... token zobrazení.
• Ve sdílených příkladech používejte zástupné symboly. Udržujte svůj skutečný odkaz na relaci, heslo a soukromé tokeny zobrazení mimo veřejné snímky obrazovky, úložiště a příklady výzev AI.

Když kopie zůstane prázdná, zkontrolujte nejprve originál vygenerovaný odkaz. Některé stránky vyzývají k chybějícímu nastavení; ostatní zůstanou skryty nebo přesměrovány. Poskytnutím správné relace se explicitně vyhnete spoléhání na tato výchozí nastavení konkrétní stránky.

3. Otevřete soubor v OBS

Otevřete upravený HTML přímo z vašeho počítače. Neexistuje žádný server, který by bylo možné nainstalovat nebo spustit.

1. Přetáhněte zkopírovaný soubor HTML do prohlížeče Chrome nebo Edge. Zkopírujte jeho úplnou adresu z adresního řádku; začíná to s file:///.
2. Zkopírujte vše z ? dále ve vašem pracovním překryvném odkazu SSN a přidejte jej na konec adresy souboru. Tím zůstane vaše relace, heslo, další nastavení a další # konec.
3. Otevřete kombinovanou adresu ve svém prohlížeči a otestujte ji.
4. V OBS přidejte Zdroj prohlížeče (Browser Source). Ponechte Místní soubor zrušte zaškrtnutí a vložte do něj celou adresu URL. Nastavte šířku a výšku pro svůj design.

Například tento odkaz SSN:

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

se stane touto adresou pro staženou kopii průzkumu ve Windows:

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

Použijte svou skutečnou adresu souboru a zkopírovaná nastavení. Na macOS adresa začíná na file:///Users/...; na Linuxu to obvykle začíná file:///home/.... Kopírování adresy prohlížeče zvládne mezery a lomítka za vás.

Nastavte to jednou. OBS uloží adresu se zdrojem. Udržujte staženou složku na stejném místě a ponechte SSN a váš zdroj chatu spuštěný, když používáte překryvnou vrstvu. Po uložení změny designu použijte Obnovit mezipaměť aktuální stránky ve vlastnostech zdroje.

Proč nechat místní soubor nezaškrtnuté? Pole URL vám umožňuje zahrnout ?session=.... Samotný výběr HTML pomocí nástroje pro výběr souboru tato nastavení nepřidá.

<!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 dokumentuje režimy souborů/URL, rozměry, vlastní CSS a ovládací prvky aktualizace v Odkaz na zdroj prohlížeče.

4. Změňte design nebo požádejte AI, aby to udělala

Pro změnu pouze CSS ponechte hostovaný odkaz a použijte OBS's Vlastní CSS pole. Vztahuje se pouze na tento zdroj, takže běžný prohlížeč, který otevírá stejnou adresu URL, tato přepsání nezobrazí. U upraveného souboru HTML přidejte přepisy za existující styly nebo za nimi připojte místní šablonu stylů. Dodejte své logo, soubory písem, barvy značky, velikost plátna a vizuální reference.

Některé stránky podporují &css= nebo &b64css=; podpora je na stránku. poll.html, například zní ani jedno. Před použitím možností adresy URL zkontrolujte analyzátor stránky. Webová stránka obecně nemůže načíst libovolné písmo nebo obrázek z místního disku jiného počítače.

Při změně označení zachovejte ID/třídy, na které skripty odkazují. Pokud JavaScript znovu sestaví prvek při každé aktualizaci, trvalá kresba musí žít mimo tento prvek nebo musí být znovu vytvořena vykreslovacím modulem. Pokud chcete, aby úprava ovlivnila pouze váš návrh, zkopírujte sdílenou šablonu stylů/skript a změňte odkaz na stránku.

Použijte typovou výzvu ve výše uvedených příručkách nebo začněte touto obecnou výzvou:

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.

Typové příručky popisují skutečný spouštěč, který je třeba zachovat. Neakceptujte návrh, který funguje pouze proto, že pevně kóduje ukázkové zprávy. Ponechte si kopii původního souboru a porovnejte upravené zobrazení pomocí stejných testovacích vstupů.

5. Zabraňte tomu, aby se z příchozího chatu stal kód

Zprávy, jména, názvy, částky, metadata a odkazy na média mohou pocházet od diváků nebo externích služeb. Dezinfikujte v místě, kam je vloží vlastní renderovací modul. Řetězec přijatý prostřednictvím SSN nemá oprávnění jej spustit. Pro obyčejná pole použijte prostý text DOM; použijte přibalený dezinfekční prostředek pro podporované HTML těla zprávy. Viz Vysvětlení OWASP k bezpečným jímkám a sanitaci HTML.

V SSN, textonly platí pouze pro chatmessage. Když je pravda, vykreslete toto tělo jako doslovný text. Jinak může obsahovat emoce a povolené formátování. Vykreslit ostatní normální pole jako text; mediální oblasti, jako je např chatimg a contentimg jsou adresy URL/data, nikoli úryvky HTML.

<!-- 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>

Ponechte si stávající ekvivalentní dezinfekční prostředek namísto přidávání druhého. U vnořených souborů upravte relativní cesty skriptů. Vytvořte avatary a odkazy s vlastnostmi DOM po ověření adresy URL podle stávajících zásad pro média/odkazy na stránce. Neinterpolujte nezpracovaná jména do řetězců atributů nebo nezpracované barvy do označení stylu; ověřte styly před nastavením jednotlivých vlastností. Dezinfekce HTML nezajistí, že řetězec bude bezpečný pro spuštění jako JavaScript nebo instrukce AI.

Vyzkoušejte renderer v izolovaném náhledu

• Použijte prostý název jako např Guest <b>One</b>: závorky by měly zůstat textem.
• Vyzkoušejte chatmessage: "<b>Hello</b>" s textonly: true, pak false. Doslovné označení a povolený formátovaný obsah by měly mít své vlastní cesty.
• Zkontrolujte podporovanou emoci a zprávu pouze s obrázkem, aby bezpečnostní změny tyto funkce neodstranily.
• Nechte AI otestovat neškodnou sondu jako např <img src=x onerror="window.__ssnInjectionProbe=1"> ve změněném rendereru. Nesmí se spustit, nastavit značku nebo ponechat atributy spustitelné události. Otestujte také odkaz na schéma skriptu. Spouštějte sondy lokálně, ne ve veřejném chatu.

Procházející sonda pouze kontroluje cvičené dráhy. Udržujte testy zaměřené na renderery a pole změněná návrhem.

6. Otestujte rozvržení, připojení a OBS samostatně

1. Rozložení: použijte zdokumentovaný režim náhledu/demo stránky, je-li k dispozici, nebo fiktivní místní vzorky. Otestujte dlouhá jména/zprávy, chybějící avatary, prázdná data a očekávaný počet řádků.
2. Dodávka SSN: ponechat SSN aktivní a používat Vytvořit testovací zprávu se stejnou relací. Potřebuje obvyklý režim zpracování rozhraní Extension API vzdálené ovládání rozšíření přes API (remote API control of extension) povoleno. Použijte izolované testovací nastavení; odeslané testy mohou spustit nakonfigurovanou automatizaci.
3. Skutečný spouštěč: zobrazte zprávu v Docku pro doporučenou kartu, odešlete hlasování v anketě, vyberte vítěze pro dárek, změňte text tickeru za ticker nebo spusťte časovač pro časovač. Obyčejný chat není univerzální test.
4. Skutečné zachycení: potvrďte, že se skutečná zdrojová zpráva/událost dostane na původní a upravenou stránku. Falešná událost dokazuje vykreslování, nikoli zachycení platformy.
5. OBS: zkontrolujte zdroj v jeho konečné velikosti, průhlednosti, animacích, zvuku, fontech a vrstvení. Cvičení zobrazit/skrýt, vymazat/resetovat a obnovit. Prohlížeč a OBS mají oddělené úložiště a relace; přihlášení do prohlížeče nebo localStorage není automaticky sdíleno.

U stránek, které shromažďují data v paměti, může uvolňování nebo obnovování ztratit stav. Před povolením automatického obnovení nebo vypnutí při skrytí zkontrolujte typového průvodce. Obrazovky spravované hostitelem mají různé chování při obnově. Odebrat demo/preview příznaků před očekáváním živých dat.

Užitečné soubory a odkazy, které poskytnou vaší AI

• docs/event-reference.html: kanonická pole, pojmenované události, metadata, média a hodnoty darů.
• docs/customoverlays.md: vlastní přijímače a příklady zapojení.
• Kompatibilita událostí a upozornění: jaké události/pole může design očekávat od zdroje.
• Průvodce zkušebními zprávami a createtestmessage.html: ukázkové užitečné zatížení a režimy doručení.
• libs/objects.js a shared/utils/chatHtml.js: zabalená dezinfekce displeje.
• shared/utils/chatBadges.js a shared/utils/contentImage.js: stávající odznak a manipulace s obrázky.
• js/transport-dedupe.js, js/local-server-url.js, a shared/overlay-control-transport.js: stávající podpora přenosu při načtení vaší stránky.
• currency.js: zachovat hasDonation pro zobrazení a respektování platného numerického USD donoValue, včetně nuly.
• Event Flow a Příkazy a API: znovu použít stávající ovládací prvky, když návrh potřebuje spouštěč.

Uveďte skutečný zdroj překrytí a odkazovaný CSS/JS a také tyto dokumenty. Samotný odkaz na událost nepopisuje stav řízení dotazování ani soukromou strukturu vykreslování každého překrytí.

Když kopírování nefunguje

Zastavte se u nejmenšího potvrzeného problému. Změna stylu by neměla vyžadovat změnu snímacích skriptů nebo vymýšlení nových polí událostí. Pokud sdílíte veřejnou větev, zahrňte její podpůrná aktiva a zamezte nahrávání soukromých spouštěčů.