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

Wybierz nakładkę, którą chcesz przeprojektować

Możesz zmienić kolory, czcionki, układ, grafikę i ruch istniejącej strony. The Plik HTML to strona; the Adres URL OBS wskazuje na to i podaje ustawienia sesji i wyświetlania. Aby dokonać niewielkiej zmiany stylu, użyj niestandardowego CSS OBS na hostowanej stronie. Aby uzyskać głębsze zmiany, pobierz źródło i uruchom własną kopię.

Przewodniki te dotyczą rodzin nakładek wraz z ich motywami. Wybierz odbiorcę funkcji, której używasz: strona czatu, strona z wybraną wiadomością i ankieta nie wymagają tego samego wkładu.

Aby rozpocząć gotowy projekt w Galeria nakładek lub Galeria szablonów. Aby uzyskać dostęp do istniejącej skórki czatu StreamElements/Streamlabs, postępuj zgodnie z instrukcją przewodnik importowania. Zaimportowany samodzielny kod HTML ma własne instrukcje eksportu/konfiguracji.

1. Pobierz aktualne pliki

1. Pobierz źródła beta w ZIPlub otwórz plik repozytorium wersji beta i wybierz Kod → Pobierz ZIP.
2. Wypakuj plik ZIP do folderu, który możesz zachować, np C:\SSN\social_stream-beta\. Nie edytuj wewnątrz skompresowanego archiwum. Są to pliki źródłowe strony; edycja osobnej kopii nie wymaga ponownej instalacji SSN.
3. Znajdź plik pokazany w tabeli powyżej. Zduplikuj go obok oryginału: na przykład poll.html staje się my-poll.html. Dla themes/featured-styles/featured-modern.html, zachowaj kopię themes/featured-styles/.
4. Otwórz kopię w edytorze tekstu/kodu. Daj swojemu narzędziu AI dostęp do tego pliku i potrzebnych mu stylów/skryptów, do których się odwołują. Zapisz HTML jako .html, nie .html.txt.

Zachowaj wyodrębnioną strukturę folderów. Pojedynczy pobrany plik HTML może ładować obok siebie skrypty, arkusze stylów, czcionki, obrazy, dźwięk lub JSON. Widok strony w GitHubie i „Zapisz stronę” w przeglądarce nie stanowią niezawodnego, kompletnego pakietu. Każdy przewodnik po typach identyfikuje przydatne pliki, ale całkowicie wyodrębniony folder to najprostszy sposób na zachowanie zależności.

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

Odniesienie takie jak ../../shared/utils/chatHtml.js odnosi się do strony, która go ładuje. Przeniesienie tej strony do katalogu głównego przerywa ścieżkę. Skopiuj także lokalną grafikę i czcionki do projektu, a następnie użyj względnych adresów URL. Przechowuj pobrane wersje razem; Twoja edytowana kopia nie będzie automatycznie otrzymywać przyszłych poprawek SSN.

2. Zachowaj ustawienia sesji i połączenia

Uruchom SSN, podłącz źródło i potwierdź, że oryginalna nakładka działa. Skopiuj kompletny wygenerowany link z odpowiedniego narzędzia SSN. Wartość po session= identyfikuje Twoją sesję SSN; nie jest to kanał YouTube, nazwa użytkownika Twitch, nazwa pliku ani tytuł ankiety.

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

W przykładzie zastosowano symbole zastępcze. SSN i strona muszą używać tej samej rzeczywistej sesji i dowolnego skonfigurowanego hasła. Zmiana nazwy pliku nie powoduje zmiany sesji. Kontynuuj pracę SSN i przechwytywanie: nakładka odbiera dane; sam nie przechwytuje czatu na platformie.

• ? rozpoczyna zapytanie; zastosowanie kolejnych ustawień &. Kopiuj wartości zamiast wpisywać je ponownie. W atrybucie źródłowym HTML napisz &; w polu URL przeglądarki/OBS użyj zwykłego ampersandu.
• Zachowaj ustawienia transportu: server, server2, server3lokalne punkty końcowe, etykiety i wartości wersji są specyficzne dla strony. Nie dodawaj flagi serwera tylko dlatego, że obsługuje ją inna nakładka.
• Zachowaj także fragmenty: wszystko później # może mieć znaczenie. Na przykład nakładka zdarzeń AI korzysta z prywatnego #aieventauth=... żeton wyświetlania.
• W udostępnianych przykładach używaj symboli zastępczych. Trzymaj swój prawdziwy link do sesji, hasło i prywatne tokeny wyświetlające z dala od publicznych zrzutów ekranu, repozytoriów i przykładów podpowiedzi AI.

Jeśli kopia pozostaje pusta, najpierw sprawdź oryginalnie wygenerowany link. Na niektórych stronach pojawia się monit o brakujące ustawienia; inne pozostają ukryte lub przekierowują. Podanie prawidłowej sesji pozwala uniknąć polegania na ustawieniach domyślnych specyficznych dla strony.

3. Otwórz swój plik w OBS

Otwórz edytowany kod HTML bezpośrednio ze swojego komputera. Nie ma serwera do zainstalowania lub uruchomienia.

1. Przeciągnij skopiowany plik HTML do przeglądarki Chrome lub Edge. Skopiuj jego pełny adres z paska adresu; zaczyna się od file:///.
2. Skopiuj wszystko z ? dalej w działającym łączu nakładki SSN i dodaj go na końcu adresu tego pliku. Dzięki temu zachowana zostanie Twoja sesja, hasło, inne ustawienia i dowolne dane # zakończenie.
3. Otwórz połączony adres w przeglądarce, aby go przetestować.
4. W OBS dodaj Źródło przeglądarki. Pozostaw Plik lokalny odznacz i wklej pełny adres URL. Ustaw szerokość i wysokość swojego projektu.

Przykładowo ten link SSN:

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

staje się tym adresem dla pobranej kopii ankiety w systemie Windows:

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

Użyj aktualnego adresu pliku i skopiowanych ustawień. W macOS adres zaczyna się od file:///Users/...; w systemie Linux zwykle zaczyna się od file:///home/.... Kopiowanie adresu przeglądarki obsługuje spacje i ukośniki.

Skonfiguruj to raz. OBS zapisuje adres ze źródłem. Trzymaj pobrany folder w tym samym miejscu i nie wyłączaj SSN oraz źródła czatu podczas korzystania z nakładki. Po zapisaniu zmiany w projekcie użyj Odśwież pamięć podręczną bieżącej strony we właściwościach źródłowych.

Dlaczego pozostawić plik lokalny niezaznaczony? Pole URL pozwala na dołączenie ?session=.... Samo wybranie kodu HTML za pomocą selektora plików nie powoduje dodania tych ustawień.

<!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 tryby plików/adresów URL, wymiary, niestandardowe CSS i elementy sterujące odświeżaniem w Odniesienie do źródła przeglądarki.

4. Zmień projekt lub poproś o to AI

W przypadku zmiany dotyczącej wyłącznie CSS, zachowaj hostowany link i użyj OBS Własny CSS pole. Dotyczy tylko tego źródła, więc zwykła przeglądarka otwierająca ten sam adres URL nie wyświetli tych zastąpień. W przypadku edytowanego pliku HTML dodaj zastąpienia po istniejących stylach lub połącz po nich lokalny arkusz stylów. Podaj swoje logo, pliki czcionek, kolory marki, rozmiar płótna i odniesienie wizualne.

Niektóre strony obsługują &css= lub &b64css=; wsparcie przypada na stronę. poll.htmlna przykład nie czyta żadnego z nich. Przed użyciem opcji adresu URL sprawdź parser strony. Strona internetowa zazwyczaj nie może załadować dowolnej czcionki lub obrazu z dysku lokalnego innego komputera.

Zmieniając znaczniki, zachowaj identyfikatory/klasy, do których odwołują się skrypty. Jeśli JavaScript odbudowuje element przy każdej aktualizacji, trwała grafika musi znajdować się poza tym elementem lub zostać odtworzona przez moduł renderujący. Skopiuj udostępniony arkusz stylów/skrypt i zmień odwołanie do swojej strony, jeśli chcesz, aby edycja miała wpływ tylko na Twój projekt.

Skorzystaj z monitu dotyczącego konkretnego typu w powyższych przewodnikach lub zacznij od tego ogólnego monitu:

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.

Przewodniki po typach opisują prawdziwy wyzwalacz, który należy zachować. Nie akceptuj projektu, który działa tylko dlatego, że zawiera na stałe przykładowe wiadomości. Zachowaj kopię oryginalnego pliku i porównaj edytowany wyświetlacz, korzystając z tych samych wejść testowych.

5. Nie pozwól, aby przychodzący czat stał się kodem

Wiadomości, nazwiska, tytuły, kwoty, metadane i linki do multimediów mogą pochodzić od widzów lub usług zewnętrznych. Oczyść w miejscu, w którym niestandardowy moduł renderujący je wstawia. Ciąg otrzymany poprzez SSN nie stanowi pozwolenia na jego wykonanie. Używaj zwykłego tekstu DOM dla zwykłych pól; użyj pakietu środka dezynfekującego dla obsługiwanego kodu HTML treści wiadomości. Zobacz Wyjaśnienie OWASP na temat bezpiecznych ujścia i oczyszczania HTML.

W SSN, textonly dotyczy tylko chatmessage. Jeśli ma wartość true, renderuj tę treść jako tekst dosłowny. W przeciwnym razie może zawierać emotikony i dozwolone formatowanie. Renderuj inne normalne pola jako tekst; dziedziny mediów, takie jak chatimg i contentimg to adresy URL/dane, a nie fragmenty 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>

Zachowaj istniejący równoważny środek dezynfekujący zamiast dodawać drugi. W przypadku plików zagnieżdżonych dostosuj względne ścieżki skryptów. Twórz awatary i linki z właściwościami DOM po sprawdzeniu adresu URL zgodnie z istniejącymi zasadami dotyczącymi multimediów/linków strony. Nie interpoluj surowych nazw na ciągi atrybutów ani surowych kolorów na znaczniki stylu; sprawdzaj style przed ustawieniem poszczególnych właściwości. Oczyszczanie kodu HTML nie sprawia, że ​​ciąg znaków można bezpiecznie wykonać jako instrukcję JavaScript lub sztuczną inteligencję.

Przetestuj moduł renderujący w izolowanym podglądzie

• Użyj zwykłej nazwy, takiej jak Guest <b>One</b>: nawiasy powinny pozostać tekstem.
• Wypróbuj chatmessage: "<b>Hello</b>" z textonly: true, następnie fałsz. Dosłowne znaczniki i dozwolona treść sformatowana powinny podążać swoimi odpowiednimi ścieżkami.
• Sprawdź obsługiwaną emotkę i wiadomość zawierającą wyłącznie obraz, aby zmiany bezpieczeństwa nie usunęły tych funkcji.
• Poproś sztuczną inteligencję o przetestowanie nieszkodliwej sondy, takiej jak <img src=x onerror="window.__ssnInjectionProbe=1"> w zmienionym rendererze. Nie może być wykonywany, ustawiać znacznika ani pozostawiać wykonywalnych atrybutów zdarzenia. Przetestuj także łącze do schematu skryptu. Uruchamiaj sondy lokalnie, a nie na czacie publicznym.

Przechodząca sonda sprawdza tylko przebyte ścieżki. Koncentruj testy na modułach renderujących i polach zmienionych przez projekt.

6. Przetestuj układ, połączenie i OBS oddzielnie

1. Układ: użyj udokumentowanego trybu podglądu/demo strony, jeśli jest dostępny, lub fikcyjnych próbek lokalnych. Przetestuj długie nazwy/wiadomości, brakujące awatary, puste dane i oczekiwaną liczbę wierszy.
2. Dostawa SSN: Utrzymuj SSN aktywnym i używaj Utwórz wiadomość testową (Create Test Message) z tą samą sesją. Wymagany jest zwykły tryb pozyskiwania interfejsu API rozszerzenia zdalne sterowanie rozszerzeniem przez API włączone. Użyj izolowanej konfiguracji testowej; przesłane testy mogą uruchomić skonfigurowane automatyzacje.
3. Rzeczywisty wyzwalacz: wyświetlają wiadomość w Docku dla wyróżnionej karty, wysyłają głosowanie w ankiecie, wybierają zwycięzcę rozdania, zmieniają tekst paska informacyjnego lub uruchamiają licznik czasu. Zwykły czat nie jest testem uniwersalnym.
4. Prawdziwe przechwytywanie: potwierdza, że faktyczna wiadomość/zdarzenie źródłowe dociera do oryginalnej i edytowanej strony. Próbne zdarzenie potwierdza renderowanie, a nie przechwytywanie platformy.
5. OBS: sprawdzają źródło pod kątem jego ostatecznego rozmiaru, przezroczystości, animacji, dźwięku, czcionek i warstw. Ćwiczenie pokaż/ukryj, wyczyść/resetuj i odśwież. Przeglądarka i OBS mają oddzielną pamięć i sesje; login przeglądarki lub localStorage nie jest automatycznie udostępniany.

W przypadku stron gromadzących dane w pamięci, wyładowanie lub odświeżenie może spowodować utratę stanu. Przed włączeniem automatycznego odświeżania lub wyłączania po ukryciu sprawdź przewodnik po typach. Wyświetlacze zarządzane przez hosta mają inne zachowanie podczas odzyskiwania. Usuń demo/preview flagi przed oczekiwaniem na aktualne dane.

Przydatne pliki i odniesienia do przekazania Twojej sztucznej inteligencji

• docs/event-reference.html: pola kanoniczne, nazwane zdarzenia, metadane, media i wartości darowizn.
• docs/customoverlays.md: niestandardowe odbiorniki i przykłady połączeń.
• Zgodność zdarzeń i alertów: jakich zdarzeń/pól projekt może oczekiwać od źródła.
• Przewodnik po wiadomościach testowych i createtestmessage.html: przykładowe ładunki i sposoby dostawy.
• libs/objects.js i shared/utils/chatHtml.js: dezynfekcja wyświetlaczy opakowanych.
• shared/utils/chatBadges.js i shared/utils/contentImage.js: istniejąca obsługa plakietek i obrazów.
• js/transport-dedupe.js, js/local-server-url.js i shared/overlay-control-transport.js: istniejąca obsługa transportu po załadowaniu przez Twoją stronę.
• currency.js: zachować hasDonation do wyświetlania i honorowania prawidłowego numerycznego USD donoValue, w tym zero.
• Event Flow i Polecenia i API: wykorzystaj ponownie istniejące elementy sterujące, gdy projekt wymaga uruchomienia.

Podaj rzeczywiste źródło nakładki i przywoływany do niej CSS/JS, a także te dokumenty. Samo odwołanie do zdarzenia nie opisuje stanu kontroli ankiety ani prywatnej struktury renderowania każdej nakładki.

Gdy kopia nie działa

Zatrzymaj się na najmniejszym potwierdzonym problemie. Zmiana stylu nie powinna wymagać zmiany skryptów przechwytywania ani wymyślania nowych pól zdarzeń. Jeśli udostępniasz publiczne rozwidlenie, dołącz jego zasoby pomocnicze i nie pozwalaj na przesyłanie prywatnych programów uruchamiających.