Zaprojektuj własne nakładki do strumieni społecznościowych

Stwórz własną nakładkę w 5 krokach

1. Wybierz nakładkę którą chcesz zmienić.
2. Pobierz źródłowy plik ZIP, rozpakuj i skopiuj plik HTML tej nakładki.
3. Edytuj kopię samodzielnie lub poproś narzędzie AI.
4. Otwórz kopię w OBS z ustawieniami sesji SSN dodanymi do adresu.
5. Przetestuj z rzeczywistym wyzwalaczem nakładki.

Wybierz nakładkę do zmiany

Możesz zmieniać kolory, czcionki, układ, grafikę i animacje nakładki. Strona Plik HTML to strona. Plik Adres URL OBS wskazuje go i dodaje ustawienia sesji oraz wyświetlania.

Każdy typ nakładki nasłuchuje czegoś innego. Strona czatu, wyróżnionej wiadomości i ankieta nie używają tych samych danych. Otwórz poradnik projektu dla używanego typu:

Chcesz coś gotowego? Wypróbuj Galeria nakładek lub Galeria szablonów. Chcesz użyć skórki czatu StreamElements lub Streamlabs? Postępuj według przewodnik importowania. Ten eksport ma własne kroki konfiguracji.

Pobierz pliki

1. Pobierz źródła beta w ZIP. Lub otwórz repozytorium wersji beta i wybierz Kod → Pobierz ZIP.
2. Rozpakuj do folderu, który zachowasz, np. C:\SSN\social_stream-beta\. Nie edytuj wewnątrz ZIP-a. Nie trzeba ponownie instalować SSN.
3. Znajdź plik nakładki (zobacz tabelę powyżej). Zrób kopię obok oryginału, np. poll.html → my-poll.html. Dla motywu takiego jak themes/featured-styles/featured-modern.html, trzymaj kopię w tym samym folderze.
4. Otwórz kopię w edytorze tekstu lub kodu. Zapisz jako .html, nie .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

Zachowaj link sesji

Uruchom SSN, podłącz źródło i sprawdź działanie oryginalnej nakładki. Następnie skopiuj pełny link z narzędzia SSN dla tej nakładki.

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

Wartość po session= to Twoja sesja SSN. Nie jest to kanał YouTube, nazwa Twitch, nazwa pliku ani tytuł ankiety. SSN i strona muszą mieć tę samą sesję i hasło. Pozostaw SSN uruchomione: nakładki tylko odbierają dane. Same nie przechwytują czatu.

Jeśli kopia jest pusta, najpierw sprawdź oryginalny link. Niektóre strony pytają o brakujące ustawienia, inne pozostają ukryte lub przekierowują. Właściwa sesja w linku eliminuje zgadywanie.

Otwórz plik w OBS

Otwórz edytowany plik prosto z komputera. Serwer nie jest potrzebny.

1. Przeciągnij kopię HTML do Chrome lub Edge. Skopiuj adres. Zaczyna się od file:///.
2. Z działającego linku nakładki SSN skopiuj wszystko od ? . Wklej na końcu adresu pliku. Zachowuje to sesję, hasło, ustawienia i wszelkie # .
3. Otwórz połączony adres w przeglądarce, aby przetestować.
4. W OBS dodaj Źródło przeglądarki. Pozostaw Plik lokalny odznaczone. Wklej pełny adres do URL i ustaw szerokość oraz wysokość.

Przykład: ten link SSN…

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

…staje się tym dla pobranej kopii ankiety w Windows:

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

Na macOS zaczyna się od file:///Users/..., na Linuksie zwykle file:///home/.... Kopiowanie z przeglądarki obsługuje za Ciebie spacje i ukośniki.

<!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 opisuje tryby pliku/URL, rozmiary, własny CSS i odświeżanie w Odniesienie do źródła przeglądarki.

Zmień projekt lub poproś o to AI

Przygotuj logo, pliki czcionek, kolory marki, rozmiar płótna i wzór wizualny. Strona internetowa zwykle nie może ładować czcionek ani obrazów z dysku innego komputera.

Podpowiedź AI

Użyj promptu dla danego typu z jego poradnika projektu lub zacznij od tego. Daj AI skopiowany plik oraz ładowane style i skrypty.

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.

Nie pozwól, by przychodzący czat stał się kodem

Nazwy, wiadomości, tytuły, kwoty i linki pochodzą od widzów i zewnętrznych usług. Traktuj je jako tekst, nigdy kod. Oczyszczaj tam, gdzie renderer wstawia je na stronę.

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

• Jeśli strona ma już mechanizm oczyszczania, zachowaj go. Nie dodawaj drugiego.
• Dla plików w podfolderach popraw ścieżki skryptów.
• Nie wklejaj surowych nazw do ciągów atrybutów ani surowych kolorów do znaczników stylów. Sprawdzaj wartości stylu przed ustawianiem każdej właściwości osobno.
• Nawet oczyszczonego HTML nie można bezpiecznie uruchamiać jako JavaScript ani traktować jako instrukcji dla AI.

Więcej informacji: Poradnik OWASP o bezpiecznych miejscach zapisu i oczyszczaniu HTML.

Testuj po jednej części

Pliki do przekazania AI

Daj AI plik nakładki, ładowane przez niego CSS/JS oraz te pliki. Sam opis zdarzeń nie wyjaśnia kontrolek ankiety ani kodu układu każdej nakładki.

Rozwiązywanie problemów

Najpierw napraw najmniejszy potwierdzony problem. Zmiana wyglądu nie powinna wymagać zmian skryptów przechwytywania ani nowych pól zdarzeń. Udostępniając publiczny fork, dołącz zasoby, ale pomiń prywatne pliki startowe.