JustZix — instrukcja obsługi

Wstrzykiwanie własnych stylów CSS, kodu JavaScript i przycisków akcji na dowolne strony

Koncepcja i główne pojęcia

JustZix pozwala automatycznie wstrzykiwać własny CSS i JavaScript na wybrane strony, a także definiować przyciski akcji (skróty wykonujące fragmenty kodu na żądanie).

Hierarchia danych

Wzorce URL na poziomie zestawu i grupy

Każdy zestaw oraz każda grupa może dostać własną listę dodatkowych wzorców URL (chip-input). Gdy lista jest pusta — element działa wszędzie tam, gdzie pasuje wzorzec katalogu. Gdy ustawisz np. https://justzix.com/admin/* — element zadziała tylko na podstronach admina.

Samouczek — interaktywne wprowadzenie

Dla nowych użytkowników JustZix ma wbudowany interaktywny samouczek, który prowadzi krok po kroku przez zbudowanie kompletnego rozwiązania — od katalogu, przez grupę i zestaw, po kod CSS/JS i przycisk akcji. Podpowiedzi pojawiają się jako dymki przy kolejnych elementach panelu.

Jak go uruchomić:

• Automatycznie — przy pierwszym otwarciu panelu, gdy nie masz jeszcze żadnego katalogu.
• Ręcznie — w dowolnej chwili z menu ustawień → Samouczek.

W oknie „Centrum samouczków" wybierasz samouczek i klikasz Rozpocznij. Podczas samouczka:

• Przyciski Wstecz i Dalej przechodzą między krokami; pasek u dołu dymka pokazuje postęp.
• Niektóre kroki czekają, aż wykonasz wskazaną akcję — np. klikniesz podświetlony przycisk.
• Kroki z przykładowym kodem mają przycisk Kopiuj.
• Klawisz Esc lub przycisk × zamyka samouczek w dowolnym momencie.

Interfejs i nawigacja

Tryb edycji

Dostęp przez prawy klik na ikonę wtyczki → "Opcje", lub klik na ikonę → przycisk "Panel edycji".

• Logo na górze sidebara — pełny logotyp justzix (sygnet + wordmark Inter). Automatycznie zmienia się między wariantem light a dark zgodnie z trybem aplikacji (inline SVG + CSS variables, bez podmiany pliku). Klik na logo otwiera Pulpit.
• Sekcja "Katalogi" — pod logotypem: label "KATALOGI" + przycisk dodawania katalogu, wyszukiwarka, filtr "Tylko aktywne".
• Drzewo katalogów — folder ▶ grupa ▶ zestaw. Strzałka rozwijająca toggle'uje. Klik na zestaw przechodzi do edycji tylko tego zestawu.
• Menu Ustawienia (drop-up na dole sidebara) — pojedynczy przycisk otwierający panel z opcjami: Tryb ciemny, Instrukcja obsługi, Eksport ustawień, Import ustawień, Importuj z URL, Synchronizacja chmurowa, Moje share, AI Helper, Strona projektu, wybór języka, wskaźnik Storage quota oraz numer wersji wtyczki. Zamykany przez Escape lub klik poza panelem.
• Pasek katalogu — etykieta przycisku (3 litery), kolor, nazwa, wzorzec URL, opcje panelu akcji, eksport/import, usunięcie.
• Karty zestawów — każda z 3 zakładkami: CSS JavaScript Akcje.
• Pasek breadcrumb — w edytorze katalogu, grupy i zestawu pokazuje ścieżkę nawigacji; skrajnie po lewej jest ikona „dom" — szybki powrót na Pulpit.
• Resize edytora — pasek pod każdym edytorem (CSS i JS) można przeciągnąć w dół, by powiększyć obszar pracy.
• Toggle sidebara — pionowy pasek między sidebarem a edytorem chowa lewy panel dla większego miejsca.

Pływający przycisk (na stronach pasujących)

Mały okrągły przycisk pojawia się automatycznie na stronach pasujących do dowolnego katalogu. Domyślnie wyświetla napis ZIX, ale każdy katalog może mieć własną etykietę.

Etykieta katalogu: w pasku katalogu, skrajnie po lewej (obok color pickera) jest pole tekstowe na etykietę przycisku. Wymuszone limity: max 3 znaki, zawsze UPPERCASE (zamiana na duże litery dzieje się od razu w trakcie pisania). Pole akceptuje litery i cyfry — przykłady: ZIX, QA, DEV, ADM, X. Przy wielu pasujących katalogach brana jest etykieta z pierwszego, który ją ma ustawioną; pozostałe są pomijane (puste pole = fallback do ZIX).

Stan kolorem (paleta brand):

• Inject Green (lub kolor katalogu jeśli ustawiony) — wszystkie pasujące katalogi włączone
• Syntax Orange (lub stonowany kolor katalogu) — niektóre włączone, niektóre wyłączone
• Muted Gray — wszystkie wyłączone
• Halt Red (z opacity 0.7) — wtyczka globalnie wyłączona

Kolor katalogu: jeśli przy katalogu ustawisz color picker, pływający przycisk na pasujących stronach przyjmie ten kolor. Stany "mixed" i "off" automatycznie modulują saturację. Przy wielu pasujących katalogach brany jest kolor pierwszego z ustawionym kolorem.

Pulpit

Po wejściu w panel edycji wtyczka otwiera Pulpit — stronę główną z podsumowaniem biblioteki i szybkimi skrótami. Wcześniej panel automatycznie zaznaczał pierwszy katalog z listy; teraz zamiast tego widzisz przegląd.

Pulpit jest dostępny przez klik na logo w sidebarze oraz przez ikonę „dom" na pasku breadcrumb każdego edytora (katalogu, grupy, zestawu). Sam nagłówek Pulpitu ma również ikonę „dom" — jej kliknięcie odświeża dane (przeładowuje bibliotekę ze storage i renderuje Pulpit od nowa).

Pulpit ma układ w stałych rzędach kart:

• Biblioteka — inwentarz: liczby katalogów, grup, zestawów, akcji, pasków akcji, okien na froncie oraz zestawów z CSS i zestawów z JS.
• Statystyki użycia — faktyczne liczniki: kliknięć akcji, zastosowań CSS, uruchomień JS i wyświetleń okien. Wartości są sumowane ze wszystkich sparowanych urządzeń (przez synchronizację chmurową).
• Ostatnio edytowane zestawy — lista do 6 ostatnich zestawów (sortowana po dacie modyfikacji); klik otwiera zestaw w edytorze.
• Wskazówka — losowa porada z instrukcji; pula liczy 30 wskazówek, między którymi przechodzisz przyciskami „poprzednia" / „następna". Obok jest link do pełnej instrukcji.
• Ostatnie przykłady — najnowsze przykłady z biblioteki justzix.com (z kategorią i datą dodania).
• Z bloga — najnowsze wpisy blogowe ze strony projektu.
• Stan wtyczki — rząd trzech kart: wersja zainstalowana (z informacją, czy dostępna jest nowsza), zużycie pamięci chrome.storage.local oraz data ostatniego backupu chmurowego.

Karty „Ostatnie przykłady" i „Z bloga" pobierają treść ze strony projektu; gdy endpoint jest niedostępny (np. offline), obie karty są ukrywane. Wersja wtyczki jest sprawdzana na świeżo przy każdym wejściu na pulpit.

Drzewo katalogów (sidebar)

Lewy panel w trybie edycji wyświetla katalogi w hierarchii — można rozwinąć każdy katalog by zobaczyć jego zestawy i przejść do edycji konkretnego.

Nawigacja

Zmiana kolejności (drag & drop)

Najedź na katalog, grupę lub zestaw — po lewej stronie pojawi się uchwyt drag&drop. Złap myszą i przeciągnij:

Katalogi

• Katalog → katalog — zmiana kolejności (niebieska linia pokazuje miejsce wstawienia: nad lub pod elementem)

Grupy

• Grupa → grupa (ten sam katalog) — zmiana kolejności w katalogu
• Grupa → grupa (inny katalog) — przeniesienie grupy między katalogami
• Grupa → nazwa katalogu — przeniesienie grupy na koniec docelowego katalogu

Zestawy

• Zestaw → zestaw (ta sama grupa) — zmiana kolejności wewnątrz grupy
• Zestaw → zestaw (inna grupa) — przeniesienie zestawu między grupami z zachowaniem pozycji
• Zestaw → nazwa grupy — przeniesienie zestawu na koniec docelowej grupy
• Zestaw → nazwa katalogu — przeniesienie zestawu do pierwszej grupy katalogu (gdy katalog ma wiele grup)

Toggle sidebara

Pionowy pasek między sidebarem a edytorem chowa lewy panel — przydatne gdy potrzebujesz więcej miejsca na edytor. Stan jest zapamiętywany między sesjami. Po pokazaniu/ukryciu CodeMirror automatycznie aktualizuje swoją szerokość.

Resize edytorów

Pod każdym edytorem (CSS, JS, kod akcji) jest poziomy pasek z uchwytem do przeciągania w pionie. Łap myszą i pociągnij w dół by powiększyć edytor. Min. wysokość 80px, max nieograniczona — strona scrolluje się naturalnie wraz z zawartością.

Wyszukiwarka w edytorach kodu

Nad każdym edytorem kodu CodeMirror — CSS i JavaScript w karcie zestawu oraz „Kod JS" w edytorze akcji — znajduje się pasek wyszukiwania: pole tekstowe i przycisk z ikoną lupy.

• Po uruchomieniu wyszukiwania wszystkie znalezione fragmenty są podświetlane — bieżące trafienie na żółto (czarny tekst), pozostałe na niebiesko (biały tekst).
• Obok pola pojawia się licznik trafień w formacie n / razem.
• Gdy trafień jest więcej niż jedno, pojawiają się strzałki ▲ ▼ do przechodzenia między wynikami. Bieżące trafienie jest przewijane do widoku.
• Edycja kodu unieważnia wyniki — trzeba wyszukać ponownie.

Skróty

Wzorce URL

Wzorzec URL definiuje, na których stronach katalog się aktywuje.

Stany zestawów (Aktywny / Włączony)

Każdy zestaw ma dwie niezależne flagi:

Kaskada przełączników

Toggle katalogu  →  zmienia enabled wszystkich active rules w jego grupach
Toggle grupy     →  zmienia enabled wszystkich active rules tej grupy
Toggle zestawu   →  zmienia tylko enabled tego zestawu

Reguły z Aktywny: NIE (badge ○) są pomijane przy kaskadach — sterujesz nimi tylko ręcznie, niezależnie od stanu folderu i grupy.

Praktyczne przykłady

Pływający przycisk i panel

W rozwijanym panelu (prawy klik) możesz:

• Włączać/wyłączać poszczególne katalogi
• Włączać/wyłączać poszczególne grupy (gdy folder ma więcej niż jedną grupę)
• Włączać/wyłączać pojedyncze zestawy w katalogu
• Włączać/wyłączać paski akcji — sekcja „Paski akcji" pod listą zestawów, checkbox per pasek, modyfikuje actionBar.enabled (persistent, propaguje do panelu edycji)
• Rozłączać paski — sekcja „Połączenia" pojawia się gdy pływający przycisk jest sklejony z paskami (snap & connect), przyciski „Rozłącz od: X" + „Rozłącz wszystkie"

Panel pokazuje tylko aktywne zestawy (●) — niezależne (○) są ukrywane dla zwięzłości. Gdy folder ma tylko jedną grupę o nazwie "Domyślna", nagłówek grupy jest pomijany — widać same zestawy.

Widget popupu (ikona rozszerzenia)

Klik ikony JustZix w pasku rozszerzeń Chrome otwiera widget popupu — kompaktowy panel sterowania dla bieżącej karty. Od góry:

• Panel edycji — przycisk otwierający tryb edycji (stronę opcji) w nowej karcie.
• Plugin enabled — duży przełącznik globalnego włącznika wtyczki (zielony = włączona, szary = wyłączona).
• Tryb edycji paska — przełącznik trybu edycji paska akcji dla bieżącej karty.
• AI Helper — przełącznik otwierający / zamykający okno asystenta AI na bieżącej karcie.
• Adres URL bieżącej karty.
• Lista katalogów pasujących do strony — checkbox włączający/wyłączający każdy katalog oraz ikona „eye-off" ukrywająca pływający przycisk dla tej strony.
• Paski akcji — sekcja z checkboxem per pasek (persistent actionBar.enabled).
• Przywróć pływający przycisk — link pojawiający się, gdy przycisk został ukryty dla bieżącej strony.

Paski akcji (ActionBars)

W jednym workspace możesz mieć wiele pasków akcji — każdy z własną nazwą, orientacją, kolorem tła, własnym zestawem przycisków i niezależną pozycją per okno przeglądarki. Pasek może być przypisany do folderu, grupy lub pojedynczego zestawu (decyduje widoczność i kaskadę).

Tworzenie i edycja paska

W edytorze katalogu, grupy lub zestawu znajduje się przycisk „Paski akcji (N)". Klik otwiera modal zarządzania paskami. W modalu:

• Dodaj pasek — wybierasz poziom przypisania (folder / grupa / zestaw aktualnego kontekstu)
• Nazwa (max 6 znaków UPPERCASE) — opcjonalny tab z nazwą wystaje znad krawędzi paska
• Orientacja — pozioma lub pionowa
• Kolor tła — color picker (paleta brand JustZix)
• Włączony — gdy odznaczony, pasek nie jest renderowany w ogóle (nie tylko ukryty wizualnie). Stan zapisany w storage, niezależny od per-window position

Widoczność dziedziczona w dół

• Pasek folderu jest widoczny dla wszystkich aktywnych zestawów tego folderu (agreguje ich akcje przez barId).
• Pasek grupy — tylko dla zestawów tej grupy.
• Pasek zestawu — tylko gdy zestaw jest aktywny.
• Pasek bez żadnej widocznej i włączonej akcji w danej gałęzi nie jest renderowany w ogóle.

Przypisanie akcji do paska

Każda akcja w zakładce „Akcje" karty zestawu ma dropdown „Pasek akcji" — wybierasz docelowy pasek z listy widocznych dla tego zestawu (paski własne zestawu + paski grupy + paski folderu).

Sklejanie pasków (snap & connect)

Podczas przeciągania paska wtyczka wykrywa krawędzie sąsiednich pasków i pływającego przycisku w odległości ≤ 12 px. Pojawia się sticky visual indicator, a po puszczeniu paski łączą się w grupę połączeń. Następnie:

• Połączone paski przesuwają się razem (group drag).
• Pływający przycisk JustZix może też brać udział w połączeniach (__float jako pseudo-bar).
• Połączenia są zapamiętane per okno w pamięci sesji.

Prawy klik na drag handle paska → menu kontekstowe:

• Ukryj ten pasek (do reloadu) — runtime hide per okno przeglądarki. Pasek wraca po F5 / zmianie URL / zamknięciu i otwarciu karty. Trwałe wyłączenie: zobacz Pokaż/ukryj paski niżej.
• Rozłącz od: X () — pojawia się dla każdego sąsiedniego połączenia.
• Rozłącz wszystkie połączenia () — gdy pasek jest połączony z więcej niż jednym.

W trybie edycji paska to menu jest wyciszone; prawy klawisz na labelce daje wtedy opcję „Usuń etykietę".

Pokaż/ukryj paski — z 3 miejsc

Do trwałego włączania/wyłączania pasków akcji (bez F5) wtyczka oferuje trzy punkty wejścia, wszystkie mapowane na to samo actionBar.enabled w storage — zmiana z jednego miejsca propaguje do panelu edycji i pozostałych UIs:

1. Floating panel (prawy klik na głównym pływającym przycisku JustZix) — sekcja „Paski akcji" pod listą folderów/grup/zestawów. Checkbox per pasek pokazuje persistent state. Klik → toggle actionBar.enabled.
2. Widget popupu (klik ikony rozszerzenia obok adresu) — sekcja „Paski akcji" pod listą folderów. Plus per folder mała ikona „eye-off" — schowuje pływający przycisk dla bieżącej strony (przywrócenie linkiem „Przywróć pływający przycisk").
3. chrome.contextMenus (prawy klik na stronie → JustZix → Paski akcji) — dynamiczne submenu z checkbox per pasek. Lista przebudowywana per aktywna karta i na każdą zmianę state.

Tryb edycji paska — swobodny układ

Tryb edycji paska akcji włącza się na trzy sposoby: skrótem Ctrl+Alt+S (działa z dowolnego miejsca strony), przełącznikiem w widgecie popupu wtyczki, oraz z menu kontekstowego Chrome (prawy klawisz → „Tryb edycji paska akcji"). U góry ekranu pojawia się pasek informacyjny; ponowne użycie dowolnego z przełączników wychodzi z trybu.

W trybie edycji normalne działanie elementów jest wstrzymane (klik nie odpala kodu, pola nie przyjmują fokusa) — zamiast tego elementy można rozmieszczać i skalować:

• Zaznaczanie — klik = pojedynczy element; Ctrl+klik = dodaj/odłącz od zaznaczenia; klik w puste pole lub Esc = odznacz wszystko. Shift+przeciągnięcie po pustym polu = zaznaczenie zakresowe (prostokąt).
• Przesuwanie — przeciągnięcie zaznaczenia myszką. Wiele zaznaczonych elementów przesuwa się razem.
• Zmiana rozmiaru elementu — przy pojedynczym zaznaczeniu pojawia się ramka z 8 uchwytami (4 narożniki + 4 krawędzie).
• Zmiana rozmiaru paska — pasek ma uchwyty na krawędzi prawej, dolnej i w rogu (zmiana wielkości płótna).
• Labelki — przycisk „+ Label" nad paskiem dodaje statyczną etykietę tekstową w pierwszym wolnym miejscu. Dwuklik na labelce otwiera edytor (tekst, font, rozmiar, kolor, „Usuń"). Labelki przesuwa się i skaluje jak elementy akcji.
• Usuwanie labelek — klawisz Delete usuwa wszystkie zaznaczone etykiety naraz; prawy klawisz na labelce daje opcję „Usuń etykietę"; jest też przycisk „Usuń" w edytorze labelki. Elementy akcji usuwa się w panelu edycji (należą do reguł).
• Reset paska — przycisk „Reset paska" nad paskiem przywraca układ domyślny (flow): usuwa custom pozycje i rozmiary elementów oraz wszystkie labelki (z potwierdzeniem).
• Cofanie — Ctrl+Z cofa ostatnią zmianę (przesunięcie, resize, dodanie/edycję/usunięcie labelki, reset). Historia obejmuje bieżącą sesję edycji.

Tryb edycji jest „twardy": przesuwanie i resize dosuwają do siatki 8 px, elementu nie da się wyciągnąć poza pasek ani położyć na innym — przy kolizji oba elementy (przesuwany i ten pod nim) dostają czerwoną ramkę, a po puszczeniu element wraca na poprzednie miejsce. Paska nie da się zmniejszyć tak, by element znalazł się na zewnątrz; gdy nowy element lub labelka nie mieści się w pasku, płótno paska automatycznie się powiększa. Prawy klawisz myszy na pasku w trybie edycji nie pokazuje menu „ukryj/rozłącz pasek".

Tryby układu paska: pasek startuje w trybie flow (klasyczny flexbox — elementy jeden za drugim, pionowo lub poziomo). Pierwsze przesunięcie lub przeskalowanie elementu konwertuje pasek na tryb custom (płótno z pozycjonowaniem swobodnym) — wizualnie bez zmian, bo bieżący układ jest snapshotowany jako punkt startowy.

Typy akcji: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Każda akcja ma typ — wybierany dropdownem na początku każdej akcji w karcie zestawu. Dostępnych jest 6 typów:

Statyczne etykiety tekstowe nie są typem akcji — dodaje się je bezpośrednio na pasku w trybie edycji (zobacz „Tryb edycji paska" → labelki).

Pola wspólne

• Label — max 6 znaków (uppercase, monospace). Pokazywany na przycisku, jako placeholder INPUT/TEXTAREA, lub jako tab nad SELECT/SLIDER/TOGGLE3.
• Kolor — color picker (tło elementu; dla TOGGLE3 = tło aktywnego stanu).
• Drugi kolor (colorText) — picker obok pierwszego, plus pole hex z natywnym ctrl+C/V. Semantyka per typ:
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — kolor tekstu
  • SLIDER — kolor paska (accent-color suwaka); tekst labela i wartości to osobne pola (zobacz „Granularne kolory" niżej)
  • TOGGLE3 — kolor tekstu aktywnego stanu
  Każdy picker ma przycisk × przywracający default (puste = renderer fallback do CSS default — zazwyczaj białego).
• Pasek akcji — dropdown przypisujący akcję do konkretnego ActionBar.
• Widoczność — checkbox „widoczna" pozwala szybko ukryć bez usuwania.
• Skrót klawiszowy — kliknij i naciśnij kombinację (zarezerwowane skróty Chrome są ostrzegane).
• Kod JS — wykonywany przy aktywacji. Dostępne zmienne: value, $el (DOM element), $action ({ id, label, type, el }); dla TOGGLE3 dodatkowo stateIdx (0-2) i stateLabel.

SELECT — modal opcji

Klik „Opcje (N)" w karcie akcji typu SELECT otwiera modal:

• Variant: static (opcje konfigurowane tutaj) lub js (kod populuje natywny <select>).
• Lista opcji dla static: każdy wiersz to { name, value }. name = co widzi użytkownik, value = co trafia do JS jako zmienna value.
• Granularne kolory dropdownu — wspólne dla obu wariantów:
  • colorDropdownBg — tło popup panelu (static) + tło <option> (js variant)
  • colorOption — kolor tekstu nazwy opcji w dropdown
  • colorSelected — tło wybranej opcji (static; w js native browser-specific)
  • colorHover — tło opcji pod kursorem (static)
• Stabilne ID akcji — pełen action.id z przyciskiem copy + przykładowy selektor JS.

INPUT — modal konfiguracji

• Placeholder — tekst widoczny przed wpisaniem.
• Default value — wartość początkowa (gdy brak entry w memory).
• colorPlaceholder — kolor tekstu placeholder (przez CSS variable bo pseudo-element ::placeholder nie jest stylowalny inline).
• Stabilne ID akcji + przykładowy selektor JS.

SLIDER — modal konfiguracji

• Min / Max — zakres liczbowy (np. 0–100). Wymagane: min < max.
• Step — krok (np. 1, 5, 0.1). Default 1.
• Default value — wartość początkowa (gdy brak memory). Default (min+max)/2.
• Unit — jednostka pokazywana po wartości (np. „px", „%"). Opcjonalna.
• colorLabel — kolor etykiety po lewej od paska.
• colorValue — kolor liczby+jednostki po prawej.
• Kod JS — wykonywany na change (puszczenie myszy / Tab / Enter). value = wartość liczbowa.

TEXTAREA — modal konfiguracji

• Placeholder / Default value — analogicznie do INPUT (wartość początkowa może zawierać \n dla newlinów).
• Rows — liczba widocznych wierszy (1-20, default 3). Steruje wysokością pola.
• colorPlaceholder — analogicznie do INPUT.
• Kod JS — wykonywany na change (blur, NIE Enter — Enter w textarea to legit newline). User wychodzi z pola → wartość zapisana i kod odpalony. value = string z newlinami.

TOGGLE3 — modal konfiguracji

• 3 stany — dokładnie 3, każdy z polami label (max 5 znaków, uppercase) i value (string przekazywany do kodu jako value). Domyślne labels: OFF / MID / ON.
• Default state — radio button przy każdym stanie wskazuje który jest initial (gdy brak memory). Default 0.
• colorBg — tło wrap container (cały segmented control).
• colorHover — tło hover na nieaktywnym buttonie.
• colorInactiveText — kolor tekstu nieaktywnych stanów (aktywny stan używa colorText).
• Kod JS — wykonywany przy każdej zmianie stanu (klik na nieaktywny). Zmienne: value (state.value, fallback do state.label), stateIdx (0-2), stateLabel, $el (kontener div).

Persistent memory (SELECT, INPUT, SLIDER, TEXTAREA, TOGGLE3)

Wybór / wartość / pozycja suwaka / treść textarea / aktywny stan toggle3 są automatycznie zapamiętywane per akcja. Po F5 wartość wraca; po zamknięciu karty i otwarciu jej ponownie (na stronie pasującej do reguły) też. Singleton per action.id — jedna wartość niezależna od konkretnego URL.

Format wartości w memory per typ:

• SELECT (oba warianty), INPUT, TEXTAREA → string
• SLIDER → number (lub string-numeric po roundtripie z storage)
• TOGGLE3 → integer 0-2 (INDEX aktywnego stanu, nie value)

Storage:

• Primary: sessionStorage — synchroniczny, F5-safe, per karta.
• Backup: chrome.storage.local.actionMemory[id] — cross-tab, durable.

Brak syncu cross-device: memory zostaje lokalnie. Dwa komputery mogą mieć różne wartości (np. inny filtr per użytkownika).

Stabilne ID akcji

Każda akcja ma niezmienne action.id (format a_<base36>_<random>). W karcie zestawu obok każdej akcji jest badge z numerem rzędu — klik kopiuje pełny ID do schowka, tooltip pokazuje pełen ID.

W user-JS odwołuj się przez data-jz-action-id:

const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');
el.value = 'nowa wartość';
el.dispatchEvent(new Event('change'));

Lub przez window.JZ helpers — patrz Programatyczne wywoływanie akcji z JS.

Menu kontekstowe Chrome

Prawy klik na dowolnej stronie → JustZix:

• Włącz/wyłącz pływający przycisk dla tej strony — toggle widoczności głównego floating button (analogicznie do „eye-off" w popupie).
• Tryb edycji paska akcji (włącz/wyłącz) — przełącza tryb edycji paska na aktywnej karcie; trzeci punkt wejścia obok skrótu Ctrl+Alt+S i przełącznika w popupie.
• AI Helper (włącz/wyłącz) — otwiera lub zamyka okno asystenta AI na aktywnej karcie.
• Paski akcji ▸ — submenu z checkbox per pasek. Lista wyłącznie pasków relevantnych dla aktywnej karty. Checkbox = persistent actionBar.enabled state.
• Okna CSS ▸ / Okna JS ▸ / Konsole JS ▸ / Konsole Output ▸ — analogiczne submenu dla każdego z 4 typów okien na froncie (zobacz sekcję niżej). Checkbox = enabled state per okno.
• Tymczasowe okno (TEMP) ▸ — submenu z 4 pozycjami: TEMP CSS pane / TEMP JS pane / TEMP JS Console / TEMP Output Console. Klik = toggle (utwórz lub zamknij). Działa na dowolnej stronie, niezależnie od dopasowania folderu.

Submenu okien przebudowują się na: tabs.onActivated, tabs.onUpdated (URL change), i storage.onChanged dla folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. TEMP submenu jest statyczne (zawsze 4 pozycje).

Okna na froncie (CSS / JS / Konsole)

Wtyczka oferuje cztery typy pływających okien wstrzykiwanych na strony, obok pasków akcji. Każde okno jest przypisane do folderu, grupy lub zestawu (dziedziczy widoczność kaskadowo, tak jak paski akcji) i pojawia się na stronach pasujących URL-em.

Zarządzanie: w edytorze folderu / grupy / zestawu znajdziesz przycisk „Okna ▾ (N)". Klik rozwija menu z 4 typami — wybierasz typ, otwiera się modal z listą okien tego poziomu (plus okna dziedziczone z poziomów wyżej). Dodajesz, nazywasz, kolorujesz, usuwasz.

CSS pane

Pływające okno z polem tekstowym na CSS. Każda zmiana (po krótkiej pauzie) aktualizuje wstrzyknięty <style> — widzisz efekt na żywo. Treść jest zapamiętana per karta przeglądarki (przeżywa F5, znika z zamknięciem karty). Idealne do szybkiego testowania CSS bez zapisywania w regule.

JS pane

Pole tekstowe na JavaScript wykonywany w kontekście strony. Kod uruchamia się po zmianie (z opóźnieniem) albo ręcznie przyciskiem ▶ Run / skrótem Ctrl+Enter. Błędy wykonania pokazują się w czerwonym pasku pod kodem. Gdy kod jest zmieniony od ostatniego uruchomienia, przycisk Run świeci na żółto (stan „dirty").

JS Console (REPL)

Pełnoprawna konsola w stronie. Wpisujesz kod w dolne pole, Ctrl+Enter (lub ▶) wykonuje, wynik dopisuje się do obszaru logów powyżej. Funkcje:

• Historia komend — strzałki ↑/↓ na pierwszej/ostatniej linii inputu przewijają wcześniejsze komendy (jak w terminalu).
• Ctrl+L — czyści output.
• Przechwytywanie console.* — wywołania console.log/warn/error/info w trakcie wykonania są pokazane w logu (kolorowane wg typu).
• Linie kolorowane: komenda (niebieski), wynik (jasny), błąd (czerwony), console.log (szary), console.warn (żółty).

Input, output i historia są zapamiętane per karta. Konsola wykonuje kod w MAIN world strony — masz dostęp do wszystkich zmiennych i funkcji strony.

Output Console

Tylko-do-odczytu podgląd logów — automatycznie przechwytuje wszystko, co dzieje się na stronie: console.log/warn/error/info/debug, niezłapane wyjątki, nieobsłużone Promise rejections, ruch sieciowy oraz pushe do dataLayer, a także Twój własny logger window.JUSTZIX.*. W odróżnieniu od JS Console (gdzie sam wpisujesz kod) — tu logi płyną same.

Sześć zakładek z licznikami

Okno jest podzielone na 6 zakładek, każda z licznikiem wpisów (badge):

Pasek filtrów kontekstowych

Między zakładkami a polem wyszukiwania jest pasek filtrów, który zmienia się zależnie od wybranej zakładki:

• All — brak dodatkowych filtrów.
• JZconsole / Console — pola wyboru poziomów: log, info, warn, error, debug. Odznacz poziom → linie znikają z podglądu.
• Network — trzy rzędy: typ zasobu (document, script, stylesheet, image, xhr/fetch, font, …), klasa statusu HTTP (2xx/3xx/4xx/5xx) oraz suwaki zakresu rozmiaru i czasu (0–100000 ms) plus pole filtrowania po domenie. Rzędy checkboxów mają skróty zaznacz wszystko / odznacz wszystko.
• Errors — brak checkboxów; każdy błąd rozwijasz, by zobaczyć szczegóły.
• DataLayer — okno dzieli się na pół (patrz niżej).

Wyszukiwarka

Pod paskiem filtrów jest stale widoczne pole wyszukiwania. Filtruje wpisy aktywnej zakładki na żywo (dopasowanie fragmentu, bez rozróżniania wielkości liter). Esc czyści pole.

Logi konsoli — zwijane jak w DevTools

Wpisy console.* są domyślnie zwinięte — pokazują skrócony podgląd (np. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). Klik rozwija pełne argumenty (obiekty/tablice jako rozwijane drzewo JSON), analogicznie do konsoli DevTools.

Zakładka Network

Network przechwytuje żądania przez chrome.webRequest (uprawnienie webRequest w manifeście). Każdy wpis pokazuje m.in. metodę, URL, status, typ zasobu, rozmiar, czas trwania, adres zdalny (Remote address) i inicjatora (Initiator). Bufor żądań jest utrzymywany w tle, więc wpisy sprzed otwarcia okna również się pojawią.

Zakładka DataLayer

Okno DataLayer jest podzielone na dwie kolumny:

• Lewa — Nowe pushe: strumień kolejnych wywołań dataLayer.push(...) w kolejności zdarzeń.
• Prawa — Aktualny stan: żywa zawartość obiektu window.dataLayer jako indeksowane (0:, 1:, …) rozwijane drzewo JSON — wchodzisz w głąb na zagnieżdżone dane, analogicznie do inspektora obiektu w DevTools. Migawka aktualizuje się po każdym pushu. W nagłówku prawej kolumny są przyciski rozwiń wszystko / zwiń wszystko — działają rekurencyjnie na całym drzewie.

Kliknięcia we własnym UI JustZix (rozwijanie węzłów drzewa, przyciski okna) nie trafiają do tej zakładki. Gdyby strona zbierała zdarzenia click (np. GTM auto-event), klik w okno generowałby push do dataLayer i resetował rozwinięcie drzewa — wtyczka rozpoznaje takie pushe i ich nie raportuje (realny window.dataLayer strony pozostaje nietknięty).

Własny logger — window.JUSTZIX

Output Console udostępnia globalne API do logowania z Twojego kodu (JS pane, akcje, kod strony):

JUSTZIX.log('zwykły log');
JUSTZIX.warn('ostrzeżenie');
JUSTZIX.error(new Error('błąd'));   // pokaże stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('szczegóły');          // domyślnie ukryte (filtr)

Dostępne aliasy:

• window.JUSTZIX — główny, zawsze działa
• window.__JUSTZIX__ — alias zawsze dostępny
• window.JZ — alias tylko jeśli strona nie ma własnego window.JZ (niektóre strony, np. Google Ads, zajmują tę nazwę)

Po pojawieniu się Output Console w logu zobaczysz powitalną linię informującą który alias jest dostępny na tej stronie.

Co jest przechwytywane

• console.log/warn/error/info/debug(...) ze strony — przechodzą też do normalnej konsoli DevTools (nie blokujemy)
• window.JUSTZIX.*(...) — Twój dedykowany kanał (nie idzie do DevTools)
• Niezłapane wyjątki (throw new Error(...)) — pokazane jako czerwone z miejscem błędu
• Nieobsłużone Promise rejections — Promise.reject(...) bez .catch

Błędy żądań fetch/XHR nie trafiają do zakładki Errors (to nie wyjątki JS) — znajdziesz je w zakładce Network po statusie 4xx/5xx. Nie łapiemy naruszeń CSP ani wewnętrznych ostrzeżeń Chrome.

Pomoc szybka — Ctrl+Shift+H

Ctrl+Shift+H otwiera przesuwalne okno pomocy szybkiej — przewodnik po obsłudze JustZix na froncie: skróty globalne, skróty wewnątrz okien, Output Console, obsługa okien myszą, tryb edycji paska oraz logowanie do Output Console. Działa na każdej stronie. Okno przeciągasz za nagłówek; Esc / klik poza / × / ponowny Ctrl+Shift+H zamyka.

Dostosowanie wyglądu okna

Kolory: w modalu zarządzania (panel edycji) każde okno ma color picker — kropka nagłówka, tło i tekst nagłówka, tło i tekst body, kolor przycisków akcji.

Font i rozmiar: prawy klik na pasek nagłówka okna → menu z wyborem fontu (Consolas, Menlo, Monaco, Courier New i inne monospace) oraz rozmiaru (10–24 px).

Przeciąganie, przyklejanie i łączenie

Każde okno przeciągasz za pasek nagłówka. Przy zbliżeniu krawędzi do innego okna / paska akcji / pływającego przycisku (≤ 12 px) pojawia się magnetyczne przyciąganie — okna sklejają się w grupę. Przeciąganie sklejonej grupy przesuwa wszystkie elementy razem. Pozycje są zapamiętane per okno przeglądarki.

Zmiana rozmiaru okna

Każde okno ma 8 uchwytów resize: 4 w narożnikach (zmiana szerokości i wysokości naraz) oraz 4 na krawędziach (zmiana tylko jednej osi). Przeciągany uchwyt utrzymuje przeciwległą krawędź w miejscu. Zakres: szerokość 180–1200 px, wysokość 120–900 px. Nowy rozmiar (pane.size) jest zapisywany — dla okien trwałych synchronizowany między urządzeniami, dla okien TEMP per karta.

Przewijanie wewnątrz okna

Przewijanie kółkiem myszy wewnątrz okna przewija wyłącznie zawartość tego okna — strona pod spodem się nie przewija. Dotyczy to także sytuacji, gdy obszar okna osiągnie koniec przewijania albo gdy kursor jest nad fragmentem nieprzewijalnym (nagłówek, pasek filtra).

Prawy klik na nagłówek okna

• Ustaw wyżej / Ustaw niżej — zmiana kolejności okien, gdy się nakładają (skok jednorazowy ponad / pod wszystkie kolidujące sąsiedztwo).
• Rozłącz od: X / Rozłącz wszystkie połączenia — gdy okno jest sklejone.
• Zamknij okno [typ] — chowa okno (można je włączyć ponownie z panelu / popupu).
• Font / Rozmiar — wybór fontu i rozmiaru tekstu.

Krzyżyk zamykający i podwójne kliknięcie nagłówka

Każde okno (zarówno tymczasowe TEMP jak i trwałe persistent) ma w prawym rogu nagłówka krzyżyk × zamykający. TEMP zostają ukryte (otworzysz ponownie z menu kontekstowego strony lub skrótem), persistent — wyłączone (włączysz checkboxem w popupie). Podwójne kliknięcie w pasek nagłówka:

• Persistent (CSS pane / JS pane / JS Console / Output Console) — zwija / rozwija okno do samej belki. Stan zapamiętany.
• TEMP — przełącza zapamiętany rozmiar ↔ domyślny.
• AI Helper — przełącza zapamiętany rozmiar ↔ domyślny.

Sklejanie i podświetlenie krawędzi

Przy zbliżeniu krawędzi okna do innego okna JustZix (próg 12 px) pokazuje się czerwona krawędź po stronie sklejania (na obu oknach). Puszczenie kursora w tym położeniu wykonuje snap — okna lecą dalej jako grupa. W tym mechanizmie biorą udział wszystkie okna wtyczki: paski akcji, FAB, persistent panes (CSS/JS/Console/Output), TEMP oraz AI Helper.

TEMP panes — tymczasowe okna

Możesz utworzyć tymczasowe okno na dowolnej stronie — nawet takiej, dla której nie masz żadnego folderu. TEMP panes to szybkie narzędzie ad-hoc: testujesz CSS/JS na obcej stronie bez konfigurowania reguł.

Cechy TEMP panes:

• Działają na każdej stronie (pomijają dopasowanie folderu)
• Zapamiętane per karta — przeżywają F5, znikają z zamknięciem karty. Nie synchronizują się między urządzeniami.
• Inny kolor niż okna standardowe — pomarańczowy (CSS), czerwony (JS), różowy (JS Console), cyjan (Output) — cała ramka okna w tym kolorze.
• „TEMP" w nazwie.
• Czerwony krzyżyk × w prawym górnym rogu nagłówka — zamyka okno. Dane (kod, log, geometria) zostają w sesji — ponowne otwarcie okna tego samego typu je przywraca. Znikają dopiero przy zamknięciu karty.
• Ikona kosza w nagłówku TEMP CSS / TEMP JS — czyści zawartość edytora jednym kliknięciem. Czyszczenie trafia do historii undo przeglądarki (Ctrl+Z cofa). Dla CSS aktualizacja żywego <style> jest natychmiastowa.
• Maksymalnie jedna sztuka danego typu — drugie naciśnięcie skrótu zamyka istniejące okno, trzecie otwiera je ponownie z zachowaną zawartością.
• Pamięć rozmiaru (per urządzenie) — po zmianie rozmiaru okna TEMP jego ostatni rozmiar zostaje zapamiętany osobno dla każdego typu (CSS / JS / JS Console / Output) w pamięci urządzenia. Przeżywa restart przeglądarki, nie synchronizuje się między urządzeniami. Nowo otwarte okno TEMP startuje w rozmiarze domyślnym (380×240).
• Dwuklik w belkę = przełącznik rozmiaru — podwójne kliknięcie w pasek nagłówka okna TEMP przełącza je między rozmiarem domyślnym a zapamiętanym.

Tworzenie / zamykanie (toggle):

• Ctrl+Alt+G — TEMP CSS pane
• Ctrl+Alt+H — TEMP JS pane
• Ctrl+Alt+J — TEMP JS Console
• Ctrl+Alt+K — TEMP Output Console
• albo: prawy klik na stronie → JustZix → Tymczasowe okno (TEMP) ▸

AI Helper — asystent AI

AI Helper to wbudowany w wtyczkę asystent AI, który pomaga przygotować i wdrożyć rozwiązanie CSS/JS pod konkretne zadanie na bieżącej stronie. Model może badać stronę, testować kod na żywo w oknach TEMP i — po Twojej akceptacji — utworzyć gotowy katalog, grupę i zestaw.

Konfiguracja kluczy API

W menu Ustawienia sidebara pozycja „AI Helper" otwiera modal konfiguracji:

• Klucze API dla trzech dostawców: OpenAI, Anthropic i Gemini (Google). Wystarczy klucz jednego dostawcy, by korzystać z asystenta.
• Domyślny dostawca i domyślny model — używane przy otwarciu okna czatu (model można też pobrać automatycznie — wtedy wybierany jest najwyższy dostępny).
• Przy każdym kluczu jest checkbox „synchronizuj" (domyślnie wyłączony).

Okno czatu

Okno AI Helper to pływające okno (per karta, jak okna TEMP — przeciągane, skalowalne 8 uchwytami, krzyżyk zamykający, jedna instancja). Otwierasz / zamykasz je:

• skrótem Ctrl+Alt+\,
• przełącznikiem „AI Helper" w widgecie popupu,
• z menu kontekstowego Chrome → JustZix → AI Helper.

W oknie: wybór dostawcy (gdy masz więcej niż jeden klucz) i modelu (lista pobierana na żywo), historia rozmowy, przycisk czyszczenia rozmowy oraz pole tekstowe (wyślij przyciskiem lub Ctrl+Enter). Model dostaje automatycznie kontekst bieżącej strony — URL, tytuł i fragment HTML.

Workflow agentowy

AI Helper prowadzi rozmowę według ustalonego workflow:

1. Dopytuje o szczegóły — zakres URL, nazwy folderu/grupy/zestawu, kolory, dokładny cel.
2. Bada stronę narzędziem query_page (selektory, struktura DOM) przed napisaniem kodu.
3. Wstawia przygotowany kod CSS/JS do tymczasowego okna TEMP, które widzisz na żywo na stronie.
4. Samodzielnie weryfikuje błędy — narzędziami read_temp_pane i read_console sprawdza, czy testowany kod nie zgłasza błędów, zanim pokaże Ci wynik.
5. Prosi o sprawdzenie efektu i wprost pyta, czy test się udał.
6. Gdy test nie wyszedł — poprawia kod i testuje ponownie.
7. Dopiero po Twoim potwierdzeniu utrwala rozwiązanie: tworzy katalog → grupę → zestaw, a w razie potrzeby również pasek akcji i akcje. Każde utworzenie encji wymaga osobnego potwierdzenia w wtyczce.

Model używa narzędzi przez prosty protokół tekstowy (blok @@JZ_TOOL@@ … @@END@@) działający identycznie dla OpenAI, Anthropic i Gemini. Wywołania narzędzi i ich wyniki pokazują się w oknie jako osobne „chipy". Dostępne narzędzia:

Wygląd okna AI Helper

Prawy klik na pasek nagłówka okna AI Helper otwiera menu z opcjami „Ustaw wyżej" / „Ustaw niżej" (zmiana kolejności okien JustZix, gdy się nakładają), „Rozłącz od: X" (gdy AI Helper jest sklejony z innym oknem) oraz „Wygląd…". Panel „Wygląd…" pozwala osobno stylizować cztery role w rozmowie: Twoje wiadomości, odpowiedzi AI, wynik narzędzia, formularze inline — każda z osobnym fontem, rozmiarem, kolorem tekstu i tłem. Wartości zapisywane są per urządzenie.

Sklejanie z innymi oknami i kolejność (Z-order)

Okno AI Helper bierze udział w tym samym mechanizmie sklejania co paski akcji, okna persistent (CSS / JS / Console / Output) i okna TEMP. Przeciągnięcie krawędzi w okolice innego okna JustZix (próg 12 px) → magnetyczne przyciąganie, czerwona krawędź wskazuje stronę sklejania na obu oknach. Sklejone okna przesuwają się jako grupa.

Gdy okna się nakładają, opcje „Ustaw wyżej" / „Ustaw niżej" w menu kontekstowym każdego okna (prawy klik na nagłówku) wykonują skok jednorazowy — okno przeskakuje ponad / pod wszystkie kolidujące sąsiedztwo, nie trzeba klikać wielokrotnie.

Screenshot strony (dla modeli vision)

Narzędzie screenshot_page wykonuje zrzut bieżącego widoku strony i przesyła go modelowi jako obraz. Cały interfejs JustZix jest automatycznie ukrywany przed zrzutem (FAB, paski akcji, AI Helper, persistent panes, TEMP). Bufor 3 ostatnich screenów, jednorazowo dołączane do kolejnego zapytania (po wysłaniu — usuwane z bufora, by oszczędzić tokeny). Wymaga modelu vision-capable (np. gpt-4o, claude-3+/4, gemini-1.5+/2). Pod chipem wyniku w czacie pokazuje się miniaturka — klik otwiera pełny widok modal.

Skróty klawiaturowe

Globalne (działają z dowolnego miejsca strony)

Wewnątrz okna (gdy ma fokus)

Edytory kodu (panel edycji)

Eksport i import

Wtyczka oferuje pięć formatów eksportu (pełny, częściowy, katalog, grupa, zestaw) z automatycznym wykrywaniem typu pliku przy imporcie, by uniknąć przypadkowego nadpisania.

Eksport — pełny lub wybranych elementów

W menu Ustawienia sidebara: Eksport ustawień. Modal otwiera dwa tryby:

• Wszystko — eksportuje wszystkie katalogi, grupy, zestawy i ustawienia globalne (pływający przycisk, ukryte panele itp.)
• Wybrane — pokazuje drzewo folder → grupy → zestawy z checkboxami:
  • Checkbox katalogu / grupy zaznacza wszystkie elementy poniżej
  • Stan indeterminate (kreska) pokazuje częściową selekcję na każdym poziomie
  • Przyciski Zaznacz wszystkie / Odznacz wszystkie dla szybkiej manipulacji
  • Live podsumowanie u dołu pokazuje co zostanie wyeksportowane

Pliki częściowego eksportu mają nazwę justzix-partial-DATA.json (vs. justzix-backup-DATA.json dla pełnego), a w środku flagę partial: true i pole groups[].

Eksport pojedynczego katalogu (z selekcją)

W pasku katalogu: Eksport — otwiera modal z drzewem grup i zestawów (analogicznie jak w eksporcie częściowym, ale ograniczonym do tego katalogu). Eksportowane są tylko zaznaczone zestawy oraz grupy, do których one należą — puste grupy nie trafiają do pliku.

Format justzix-folder — plik zawiera pole groups[] z hierarchią grup i zestawów katalogu.

Eksport grupy

W pasku grupy: Eksport — modal z listą zestawów grupy (checkboxy). Plik: justzix-grupa-<nazwa>-<data>.json, format justzix-group.

Eksport pojedynczego zestawu

W widoku zestawu: Eksport zestawu — od razu pobiera plik (bez modalu). Format justzix-rule, nazwa: justzix-zestaw-<nazwa>-<data>.json.

Import — automatyczna detekcja typu (modal pełnego importu)

Po wczytaniu pliku/wklejeniu JSON-u wtyczka automatycznie rozpoznaje typ i pokazuje kolorowy panel detekcji:

Tryby importu częściowego (fioletowy panel)

• Scal z obecnymi (domyślne) — dopasowuje katalogi po ID, dodaje nowe; pozostałe katalogi w obecnych ustawieniach zostają nietknięte.
  Przy konflikcie ID pojawia się prompt z 3 opcjami:
  • 1 / nadpisz — nadpisz istniejące katalogi (usunie ich grupy i zestawy)
  • 2 / kopia (domyślne) — zaimportuj jako kopie z nowymi ID, "(import)" w nazwie folderu, brak utraty istniejących danych
  • Anuluj — przerwij import
• Zastąp obecne — czyści wszystko i wstawia tylko zaznaczone elementy z pliku.

Import pojedynczego katalogu

W pasku katalogu: Import. Sprawdza konflikty po ID i nazwie:

• Importuj jako nowy — z dopiskiem "(import)" w nazwie
• Nadpisz — usuwa stare grupy i zestawy katalogu i wstawia nowe
• Scal — dodaje nowe grupy / zestawy do istniejącego katalogu (zachowując oba)

Import grupy

W pasku grupy: Import — akceptuje 3 formaty:

• justzix-group — wstawia wszystkie zestawy grupy z pliku
• justzix-folder — wstawia wszystkie zestawy ze wszystkich grup folderu
• justzix-rule — wstawia jeden zestaw

Wszystkie zestawy z pliku trafiają do bieżącej grupy z nowymi ID (operacja zawsze typu "dodaj kopię" — brak konfliktów).

Import pojedynczego zestawu

W widoku zestawu: Import zestawu — akceptuje tylko justzix-rule. Prompt z 3 opcjami:

• 1 / zastap — zastąp zawartość obecnego zestawu (id i groupId zachowane)
• 2 / kopia (domyślne) — dodaj jako nowy zestaw obok obecnego, w tej samej grupie, z dopiskiem "(import)"
• Anuluj — przerwij

Praktyczne zastosowania częściowego eksportu

• Współdzielenie z zespołem — wyeksportuj 2-3 katalogi z konfiguracją projektu, koledzy zaimportują je w trybie "Scal" bez utraty swoich ustawień
• Backup tylko ważnych konfiguracji — np. produkcja zostaje, eksperymenty pomijasz
• Migracja częściowa — przenieś tylko jeden zestaw między urządzeniami
• Wersjonowanie — eksportuj konkretny katalog do gita razem z dokumentacją projektu

Synchronizacja chmurowa

Ustawienia → Synchronizacja chmurowa otwiera modal konta synchronizacji. Wtyczka trzyma Twoją bibliotekę (katalogi, grupy, zestawy, akcje, paski akcji, okna na froncie) w chmurze justzix.com i utrzymuje ją spójną między urządzeniami. Synchronizacja działa tylko po zalogowaniu — bez konta wtyczka pracuje wyłącznie lokalnie.

Konto i klucz synchronizacji

• Rejestracja — wtyczka generuje klucz synchronizacji (unikalny sekret konta). Zapisz go bezpiecznie — to jedyny sposób zalogowania na innym urządzeniu.
• Logowanie — wklejasz klucz synchronizacji oraz opcjonalną etykietę urządzenia (np. „Laptop praca"). Możesz zdecydować, czy klucz ma być zapamiętany w pamięci wtyczki, czy trzymany tylko na czas sesji.
• Do konta można podpiąć e-mail (weryfikowany linkiem) — służy do odzyskania dostępu.

Pierwsza synchronizacja — rozwiązanie konfliktu

Przy logowaniu wtyczka porównuje dane lokalne z tymi w chmurze:

• Tylko chmura ma dane → pobiera je na to urządzenie.
• Tylko urządzenie ma dane → wysyła je do chmury.
• Oba mają dane → pojawia się modal konfliktu z trzema strategiami:

Można też Anuluj — wtedy wtyczka się wylogowuje i nic nie zmienia.

Bieżąca synchronizacja

Po pierwszym uzgodnieniu synchronizacja chodzi w tle: wtyczka co około minutę wysyła zmiany i pobiera nowe encje. Zmiana zrobiona na jednym urządzeniu pojawia się na innych po krótkiej chwili. Kropka stanu przy pozycji „Synchronizacja chmurowa" pokazuje, czy konto jest połączone.

Zakładka Status — biblioteka w chmurze, historia, akcje

Zakładka Status modala synchronizacji pokazuje stan konta i daje przyciski akcji:

• Synchronizuj teraz — natychmiastowy push zmian i pull nowych encji.
• Pełen snapshot — pobiera migawkę biblioteki z konta.
• Odśwież dane konta — odświeża informacje o koncie i listę aktywnych sesji.
• Pełny resync z kontem — dwukierunkowy: najpierw pobiera całą bibliotekę z konta, potem wysyła encje lokalne, których na koncie brakuje. Naprawia encje „utknięte" lokalnie — takie, które nigdy nie trafiły na serwer (push odrzucony, brak w pierwszym zrzucie) i których zwykła synchronizacja nie wyłapuje, bo się nie zmieniają. Niedestrukcyjny: encje już obecne na koncie są pomijane (bez nadpisywania nowszych wersji), a encje skasowane na innym urządzeniu nie są wskrzeszane.

Biblioteka w chmurze

Liczniki encji znajdujących się na koncie: katalogi, grupy, zestawy, akcje, paski akcji, okna na froncie. Liczone są wyłącznie encje osiągalne w drzewie (grupa musi mieć istniejący katalog, zestaw — grupę, pasek/okno — istniejącego rodzica) — spójnie z licznikami Pulpitu. Odświeżają się przy otwarciu panelu i po ręcznej synchronizacji.

Historia synchronizacji

Lokalny dla urządzenia log ostatnich synchronizacji. Na stronie widać ostatnie 10 wpisów; przycisk „Pokaż pełną historię" otwiera okno z pełną listą (do 100 wpisów). Każdy wpis zawiera:

• czas oraz urządzenie inicjujące — nazwa i numeryczne ID sesji (to samo, co w „Aktywnych sesjach");
• podsumowanie liczbowe — ↑ wysłane, ↓ pobrane, ✕ usunięte;
• konkretne zmiany — zgrupowane wg typu z licznikiem (np. „Akcje ×10") oraz nazwami elementów, gdy są znane;
• stan ilościowy biblioteki po synchronizacji (sześć liczników).

Log jest lokalny — nie jest synchronizowany między urządzeniami. Wpis powstaje po każdym ticku synchronizacji, który coś realnie zmienił; ręczne „Synchronizuj teraz" zostawia wpis zawsze, nawet przy zerowych zmianach.

Co się synchronizuje, a co nie

• Synchronizowane: katalogi, grupy, zestawy, akcje, paski akcji, okna na froncie (CSS/JS pane, konsole), motyw (jasny/ciemny) i język interfejsu, a także klucze API AI Helpera — ale tylko te z zaznaczonym checkboxem „synchronizuj" przy kluczu (zob. AI Helper).
• Niesynchronizowane (stan per urządzenie): pozycje pływających okien i pasków, rozmiary okien, pamięć wartości SELECT/INPUT, okna TEMP, klucze API bez zaznaczonego checkboxa.

Statystyki użycia (zastosowania CSS, uruchomienia JS, wyświetlenia okien) są synchronizowane jako osobne encje per-urządzenie — kafelek Pulpitu sumuje je ze wszystkich sparowanych urządzeń. Motyw i język są synchronizowane jako wspólne ustawienie konta i stosowane przy kolejnym otwarciu panelu na drugim urządzeniu.

Udostępnianie po linku (Shares)

Alternatywa dla wysyłania pliku JSON na komunikator. Wystawiasz publiczny link z czasem życia (1h / 6h / 12h / 24h / 48h) i przekazujesz odbiorcy. Backend justzix.com trzyma payload w chmurze do wygaśnięcia, potem zostaje skasowany.

Wymaga zalogowanego konta synchronizacji (Sync). Sam token to publiczny secret — każdy z linkiem pobierze, więc nie wysyłaj na publicznych kanałach jeśli zawartość jest wrażliwa.

Format tokena

JZS-XXXX-XXXX-XXXX-XXXX (16 znaków Crockford base32, ~80-bit entropy). Przyjmowany jest też cały URL https://www.justzix.com/s/JZS-... — wtyczka parsuje i normalizuje (mylące litery I/L→1, O→0, U→V).

Limity konta

• max 20 aktywnych linków per konto
• max 50 MB sumarycznie
• max 5 MB na pojedynczy share
• max 30 nowych linków na godzinę

Przekroczenie limitu = błąd z polskim komunikatem. Odwołaj nieużywane linki w panelu Moje share.

Tworzenie linku (nadawca)

Przycisk „Udostępnij URL" w czterech punktach wejścia, obok „Pobierz plik":

• Cały eksport — Ustawienia → Eksport ustawień → przycisk „Udostępnij URL" (typ justzix-full)
• Katalog — pasek katalogu → Eksport → „Udostępnij URL" (typ justzix-folder)
• Grupa — pasek grupy → Eksport → „Udostępnij URL" (typ justzix-group)
• Zestaw — toolbar w widoku zestawu → „Udostępnij URL" obok Eksport / Import (typ justzix-rule)

Klik otwiera modal generowania linku: subject + summary co udostępniasz, radio z TTL (domyślnie 24h), „Wygeneruj link". Po sukcesie modal przełącza się na widok wyniku z dwiema kopiowalnymi wartościami:

• Pełen URL https://www.justzix.com/s/JZS-... — do wysłania komuś bez wtyczki (pokaże stronę landing)
• Sam token JZS-XXXX-XXXX-XXXX-XXXX — do wklejenia w wtyczce odbiorcy w „Importuj z URL"

Każdy ma swój przycisk „Skopiuj". Pokazany jest też czas wygaśnięcia w lokalnej strefie czasowej.

Panel „Moje share"

Ustawienia → Moje share (osobny modal, nie część synchronizacji — to dwie różne funkcjonalności). Pokazuje listę aktywnych linków: counter w nagłówku X/20 aktywnych · Y MB / 50 MB, a dla każdego share'a kartę z:

• Typem (Cały eksport / Katalog / Grupa / Zestaw) i ID
• Czasem wygaśnięcia („wygasa za Xh Ymin") oraz licznikiem pobrań
• Tokenem w monospace (kliknij = zaznacza całość)
• Summary X katalogów · Y grup · Z zestawów · N linii JS · A KB
• Przyciskami Kopiuj link / Kopiuj token / Odwołaj

Odwołanie nie wycofuje już pobranej zawartości. Jeśli ktoś zdążył pobrać payload, ma go lokalnie u siebie. Share to "best-effort time-limit", nie DRM.

Importowanie z linka (odbiorca)

Ustawienia → Importuj z URL (między „Import ustawień" a „Synchronizacja chmurowa", ikona łańcucha). Modal ma dwa kroki:

Krok 1 — input. Wklejasz link albo sam token. Walidacja klient-side: wyciągany jest token z URL, normalizowany Crockford-base32, sprawdzane 16 znaków + format. Błędny format → komunikat z hintem na poprawny format.

Krok 2 — preview. Wtyczka pokazuje podsumowanie share'a:

• Nadawca (display name lub „anonimowy" jeśli nie ustawił)
• Wygasa za (czas relatywny)
• Typ (Cały eksport / Katalog / Grupa / Zestaw)
• Rozmiar payloadu
• Zawartość (liczby katalogów / grup / zestawów / akcji)
• CSS chars / JS lines
• Pobrań

Jeśli share zawiera JavaScript (jsLines > 0) — pojawia się czerwony banner ostrzeżenia z linkiem „Pokaż kod JavaScript". Otwiera overlay z pełnym kodem JS każdej reguły i akcji — przejrzyj przed zaimportowaniem, bo kod będzie wykonywać się na pasujących stronach.

Krok 3 — import. Klik „Zaimportuj" → backend zwraca pełen payload → wtyczka tworzy nowe encje z zawsze świeżymi ID (nigdy nie nadpisuje istniejących po ID):

Nazwa nowego kontenera: <nazwa-nadawcy lub "Import"> <data PL> — możesz potem dowolnie przenazwać / przenieść.

Błędy odbiorcy

Backend nie rozróżnia 404 „nigdy nie istniał" od 404 „wygasł / odwołany" — celowo, żeby nie ujawniać czy token kiedykolwiek istniał.

Programatyczne wywoływanie akcji z JS

Każdą akcję (z zakładki „Akcje" w karcie zestawu) możesz wywołać programatycznie z poziomu JS zestawu lub kodu innej akcji. Globalna namespace window.JZ jest instalowana w MAIN world automatycznie przed każdym wykonaniem user-JS.

API — akcje

Przykład — czytanie i ustawianie wartości

// === Czytanie ===
const filter = JZ.value('FILT');           // INPUT/TEXTAREA — string
const opacity = JZ.value('OPAC');          // SLIDER — string numeric ("75")
const mode = JZ.value('MODE');             // SELECT static — string (option.value)
const theme = JZ.value('THM');             // TOGGLE3 — state.value aktywnego stanu

// === Ustawianie ===
JZ.setValue('FILT', 'nowa wartość');       // INPUT/TEXTAREA — string + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp do min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — natywne select + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js robi flow (memory + UI + kod)
JZ.setValue('THM', 'dark');                // TOGGLE3 — lookup po state.value (fallback do label, potem idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — równoważne; numeric idx też działa

API — paski i floating button

Context vars w kodzie akcji

W polu „Kod JS" akcji masz automatycznie dostępne zmienne — wstrzykiwane jako const przez background service worker przed wykonaniem:

Snippet w UI

W modalu konfiguracji akcji typu SELECT i INPUT panel „Stabilne ID akcji" pokazuje pełen action.id z przyciskiem copy oraz przykładowy selektor JS (document.querySelector('[data-jz-action-id="..."]')). Pod listą BUTTON-ów widać chipy JZ.click('LBL') — klik chipa kopiuje snippet do schowka.

Wymagania

• Element akcji musi być widoczny w pasku akcji na bieżącej stronie (akcja ma visible: true, pasek jest widoczny w drzewie + URL strony pasuje do reguł).
• Akcja niewidoczna lub strona, na której pasek jest ukryty → JZ.click() zwróci false, JZ.action() zwróci null.
• Skrót klawiszowy zdefiniowany na akcji ma własny mechanizm (capture-phase keydown listener w content.js) — nie wymaga JZ.click().

Przykład — akcja AUTO wywołująca sekwencję

// Kod akcji "AUTO"
JZ.click('LOAD');                          // klik na akcję LOAD (np. ładuje dane)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms później PROC (przetwarza)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms później SAVE (zapis)

Przykład — JS zestawu reagujące na DOM

Po pojawieniu się dynamicznego elementu kliknij akcję usuwającą go:

// Kod JS zestawu — observer na modal który pojawia się dynamicznie
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // kliknij akcję usuwającą banner
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Przykład — programatyczne ustawienie wartości INPUT

// JZ.click na INPUT nie zmienia wartości — użyj wzorca z dispatchem 'change':
const el = JZ.action('SRCH');           // lub JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'nowy filtr';
  el.dispatchEvent(new Event('change'));
}

Bezpośredni dostęp przez DOM

Jeśli wolisz pracować z DOM bezpośrednio (np. zmieniasz styl, nie wywołujesz):

// Lookup po stabilnym ID (zalecane — odporne na zmianę labela):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Lookup po labelu (case-insensitive — UPPERCASE w data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // przyciemnij
btn.dataset.busy = 'true';      // własny atrybut

Gdzie żyją elementy akcji w DOM:

Wszystkie elementy mają atrybut data-jz-action-id (unikalny stabilny identyfikator). Selektor .jz-actions-bar jest bezpieczny — nie koliduje z DOM-em strony.

Wybrane funkcje

Wyszukiwarka w sidebarze

Pole "Szukaj" filtruje drzewo katalogów. Logika dopasowania:

• Match po nazwie katalogu lub URL → cały katalog z wszystkimi zestawami zostaje widoczny i auto-rozwinięty
• Match po nazwie zestawu, tagu lub treści CSS/JS → pokazane są tylko pasujące zestawy w katalogu, katalog auto-rozwinięty
• Brak wyników → komunikat "Brak wyników dla [zapytanie]"

Match jest case-insensitive, podświetlanie na żółto pokazuje miejsce dopasowania.

Globalny włącznik

Po kliknięciu ikony wtyczki w toolbarze Chrome pojawia się widget popupu z dużym zielono/szarym przełącznikiem „Plugin enabled". W trybie wyłączonym żaden CSS/JS nie jest wstrzykiwany na żadnej stronie, niezależnie od ustawień katalogów. Pływający przycisk wtedy jest wyłączony (Halt Red, opacity 0.7). Stan przeżywa restart Chrome.

Wstaw URL z karty

Przycisk obok pola wzorca URL — wstawia protocol://host/* z aktywnej karty. Tworzenie katalogu w 2 sekundy. Adres strony opcji wtyczki jest pomijany — bierze najświeższą zewnętrzną kartę.

Walidacja URL na żywo

Inline po prawej stronie pola URL pojawia się informacja "Pasuje do X otwartych kart" lub ostrzeżenie. Łapie literówki natychmiast.

Historia zmian zestawu

Snapshot CSS i JS jest tworzony 3 sekundy po ostatniej edycji (debounce). Limit 5 wersji — najstarsza zostaje wypchnięta. Przy przywracaniu wersji obecna zawartość zostaje dodana do historii jako najnowszy snapshot, więc zawsze możesz cofnąć cofnięcie.

Tagi i wyszukiwanie po tagach

W nagłówku karty zestawu jest pole na tagi — wpisuj oddzielone przecinkami. Pojawiają się jako małe etykiety w sidebarze obok nazwy zestawu. Wyszukiwarka znajduje też po tagach.

Etykieta i kolor katalogu

Każdy katalog może mieć własną etykietę na pływającym przycisku (max 3 litery, UPPERCASE) i kolor (color picker). Etykieta i kolor pomagają wzrokowo rozpoznać, który projekt jest aktywny na danej stronie.

Statystyki kliknięć akcji

Każdy przycisk akcji liczy ile razy został kliknięty. Pomaga zobaczyć które są naprawdę używane.

Walidacja CSS

Pod edytorem CSS wyświetla się pasek z listą problemów składniowych:

• Niedomknięty komentarz /* ... */
• Niedomknięte klamry (brakuje })
• Nadmiarowa klamra zamykająca } (z numerem linii)

To prosta walidacja syntaktyczna — nie sprawdza poprawności properties/values. CSS z błędem nadal się wstrzykuje (przeglądarka po prostu pominie błędne reguły).

Preview JS przy imporcie

W modalu Import pojedynczego katalogu, po wczytaniu pliku, pojawia się lista zestawów z metryką:

Zawartość pliku (3 zestawów):
  Auto-login              CSS: 0L • JS: 4L                    JS
  Ukryj banner cookie     CSS: 8L • JS: 0L
  Debug GTM               CSS: 0L • JS: 12L • 2 akcji (8L)    JS

Ostrzeżenie z liczbą linii JS, jeśli jakiekolwiek są obecne. Klik na przycisk JS pokazuje pełen kod do przejrzenia przed importem.

Try/catch izolacja JS

Każdy zestaw JS jest wykonywany osobno, z własnym try/catch. Błąd w jednym zestawie nie blokuje wykonania innych. Błędy są logowane w konsoli z nazwą zestawu/akcji i pełnym stack trace.

Storage quota

Wskaźnik zużycia pamięci w menu Ustawienia sidebara (np. 1.2 MB / 10 MB). Czerwony powyżej 80%.

Filtr "Tylko aktywne"

Checkbox nad listą — ukrywa zestawy oznaczone jako niezależne (○) i pokazuje tylko te aktywne w katalogu (●). Pomaga odsiać "ręczne" zestawy gdy katalog ma ich wiele. Reaguje natychmiast na zmiany przełączników.

Aktualizacja wtyczki

Wtyczka ma stały klucz w manifeście (build Firefox — stały gecko.id), co oznacza że ID rozszerzenia jest niezmienne między aktualizacjami — dane (katalogi, zestawy, ustawienia) zostają zachowane. JustZix jest wydawany na cztery przeglądarki: Chrome, Edge, Operę i Firefoksa.

Powiadomienie o nowej wersji

W menu Ustawienia (przy numerze wersji) pojawia się zielony banner „Dostępna nowa wersja", gdy serwer wystawi nowszą paczkę niż zainstalowana. Banner zawiera link do pobrania. Sprawdzanie jest ciche — przy braku sieci banner po prostu się nie pokazuje.

Procedura aktualizacji (Chrome / Edge / Opera)

1. Pobierz nowy ZIP z aktualizacją
2. Rozpakuj nadpisując ten sam folder, w którym była poprzednia wersja
3. W chrome://extensions/ (Edge: edge://extensions/) znajdź wtyczkę i kliknij ikonę odświeżania na kafelku
4. Wtyczka przeładuje się z nowymi plikami, dane zostają

Firefox

Build Firefox wczytuje się przez about:debugging → „Ten Firefox" → „Wczytaj tymczasowy dodatek" (wskazując manifest.json w folderze justzix_firefox/). Aktualizacja = ponowne wczytanie po nadpisaniu plików.

Przykłady CSS

/* Ukryj typowe reklamy */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"] {
  display: none !important;
}

/* Ukryj cookie banner */
.cookie-banner, #cookie-notice {
  display: none !important;
}

html {
  filter: invert(0.92) hue-rotate(180deg);
}
img, video, picture, iframe, [style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Pokoloruj wszystkie elementy z data-testid */
[data-testid] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: -2px;
}
[data-testid]::before {
  content: attr(data-testid);
  position: absolute;
  background: #f59e0b;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 9999;
}

/* Zwiększ czytelność tabel admina */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Sticky header tabeli */
table.admin-list thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* Naprzemienne wiersze */
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Często strony mają sztywne max-width 1200px - wymuś szerokość */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "ŚRODOWISKO DEV";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #dc2626;
  color: white;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  z-index: 999999;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body { padding-top: 28px !important; }

Przykłady JavaScript

// Tylko dla dev! Nigdy nie zapisuj prawdziwych haseł
window.addEventListener('load', () => {
  const login = document.querySelector('input[name="login"]');
  const pass = document.querySelector('input[name="password"]');
  if (login) login.value = 'admin@dev.local';
  if (pass) pass.value = 'devpass123';
});

// Przechwyć dataLayer.push (GTM)
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]', 'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

// Przechwyć gtag
const origGtag = window.gtag;
if (origGtag) {
  window.gtag = function(...args) {
    console.log('%c[GA4]', 'color:#2563eb;font-weight:bold', args);
    return origGtag.apply(window, args);
  };
}

// Co 500ms przez 10s sprawdzaj i klikaj przyciski "Akceptuj"
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const buttons = [...document.querySelectorAll('button, a')];
  const target = buttons.find(b =>
    /akceptuj|zgoda|accept all/i.test(b.textContent || '')
  );
  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - zapisz formularz
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - przejdź do edycji (nieprzetestowany przykład)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Pomijaj denerwujące confirm i beforeunload na czas testów
window.confirm = () => true;
window.alert = (msg) => console.log('[stłumiony alert]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Pamiętaj - czysty CSS tego nie zrobi gdy rodzic ma display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Pokaż wszystkie ukryte input type="hidden"
document.querySelectorAll('input[type="hidden"]').forEach(input => {
  const wrapper = document.createElement('div');
  wrapper.style.cssText = 'background:#fef3c7;padding:4px;font-size:11px;font-family:monospace;border:1px dashed #f59e0b;';
  wrapper.innerHTML = `${input.name}: ${input.value}`;
  input.parentNode.insertBefore(wrapper, input);
});

Przykłady przycisków akcji

document.querySelectorAll('input, textarea, select').forEach(el => {
  if (el.type === 'hidden') return;
  if (el.type === 'checkbox' || el.type === 'radio') {
    el.checked = false;
  } else {
    el.value = '';
  }
  el.dispatchEvent(new Event('change', { bubbles: true }));
});

const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Jan',
  lastName: 'Testowy',
  street: 'Testowa 1',
  city: 'Warszawa',
  zip: '00-001'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

// Dla typowego sklepu — kliknij pierwszy "dodaj do koszyka"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Nie znaleziono przycisku dodaj do koszyka');

navigator.clipboard.writeText(location.href).then(() => {
  console.log('Skopiowano:', location.href);
});

// Wyciąga token JWT z localStorage / cookies dla debugowania
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token skopiowany. Pierwsze znaki: ' + token.slice(0, 20) + '...');
} else {
  alert('Brak tokena');
}

// Przechwytuj wszystkie fetch i pokaż w konsoli
const origFetch = window.fetch;
window.fetch = async function(...args) {
  console.log('%c[FETCH]', 'color:#2563eb', args[0]);
  const res = await origFetch.apply(this, args);
  return res;
};
console.log('Włączono logowanie fetch. Każde wywołanie pojawi się w konsoli.');

const info = {
  url: location.href,
  userAgent: navigator.userAgent.split(' ').pop(),
  cookies: document.cookie.split(';').length,
  localStorage: Object.keys(localStorage).length,
  framework: window.React ? 'React' : window.Vue ? 'Vue' : window.jQuery ? 'jQuery' : 'unknown'
};
alert(JSON.stringify(info, null, 2));

Scenariusze użycia

1. Praca z wieloma klientami / projektami

Każdy projekt ma własny katalog z własnym wzorcem URL. Możesz mieć katalogi:

• justzix.com — modyfikacje produkcji
• justzix dev — dla https://dev.justzix.com/* z czerwonym bannerem "DEV"
• klient X — modyfikacje na innej domenie

Na prawym panelu prywatne katalogi można szybko włączać/wyłączać. Eksport pojedynczego katalogu pozwala podzielić się konfiguracją z zespołem.

2. Środowisko developerskie z wizualnym oznaczeniem

Na każdym dev/staging dodaj banner i auto-login. Jeden zestaw CSS (banner) i jeden JS (auto-fill). Tworzysz osobny katalog dla każdego środowiska, scala się prostym checkboxem.

3. Narzędzia dla product managera / QA

Panel akcji z przyciskami: FILL (testowe dane), CART (testowy zakup), CLR (czyść formularz), STATE (pokaż stan aplikacji w alercie). Bez programisty, bez konsoli, jeden klik.

4. Modyfikacje publicznych stron

Ulubione blogi/dokumentacje z lepszą czytelnością — większy kontener, czcionka, ciemny tryb. Każda strona w osobnym katalogu, "Aktywny" zostawiony na zawsze włączony.

5. Debugowanie analityki / GTM

Jeden zestaw na każdą domenę z JS przechwytującym dataLayer.push i gtag. Włączasz go gdy klient zgłasza problem z analityką, bez dotykania kodu strony.

6. Praca na panelach administracyjnych

Wzorzec *://*.justzix.com/admin/* i CSS poprawiający tabele, listy, formularze. Plus akcja "Filtr testowy" automatycznie ustawiająca filtry dla typowego workflow.

7. Bezpieczne testy na produkcji

Akcja RO (read-only) wstrzykuje CSS który ukrywa wszystkie przyciski "Usuń", "Zapisz", "Wyślij" — tymczasowy "tryb tylko do odczytu" by się nie pomylić.

// Ukryj groźne przyciski
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('TRYB READ-ONLY włączony');

Częste problemy i rozwiązania

JavaScript się nie wykonał

• Sprawdź czy strona pasuje do wzorca — pływający przycisk powinien być widoczny
• JS odpala się raz na życie strony — zmieniłeś kod? Przeładuj stronę (F5)
• Sprawdź konsolę DevTools — błędy JS są tam logowane jako [JustZix] JS error
• Zestaw musi być Włączony — sam "Aktywny" nie wystarczy

CSS nie działa

• Specyficzność — strona ma swoje style; użyj !important lub bardziej specyficznych selektorów
• Dynamiczne klasy — niektóre frameworki generują klasy typu .css-1abcd które się zmieniają. Użyj atrybutów ([data-testid]) lub stabilnych selektorów
• Shadow DOM — niektóre elementy są w Shadow DOM i CSS spoza nie ma do nich dostępu. Trzeba JS

Pływający przycisk się nie pojawia

• URL nie pasuje do żadnego wzorca
• Przycisk został wcześniej ukryty — w widgecie popupu kliknij Przywróć pływający przycisk
• Strona zablokowała wstrzykiwane skrypty (rzadkie)

Po update wtyczki straciłem dane

Wtyczka ma stały klucz w manifeście — kolejne update'y zachowują dane. Jeśli mimo to dane zniknęły:

• Regularnie eksportuj ustawienia (Eksport)
• Aktualizuj nadpisując ten sam folder — nie zmieniaj ścieżki
• W chrome://extensions/ użyj przycisku odświeżania, nie usuwaj i nie instaluj ponownie
• Jeśli stracisz dane, zaimportuj poprzedni eksport — wystarczy 1-2 kliknięcia

Pozycje przycisków/paneli się resetują

To normalne — pozycje są per okno przeglądarki i przechowywane w pamięci sesji (chrome.storage.session). Po zamknięciu okna pozycje znikają, w nowym oknie startujesz od domyślnych. Pozycja przeżywa nawigację między kartami w tym samym oknie.

Częściowy eksport pominął jakieś ustawienia globalne

Tak — częściowy eksport zawiera tylko zaznaczone katalogi i zestawy plus związane z nimi ustawienia widoczności. Nie zawiera pozycji pływających paneli (są per okno) ani innych globalnych preferencji. Dla pełnego backupu użyj trybu "Wszystko".

Import częściowy nadpisał mi nieistniejący wcześniej katalog

Tryb "Scal" dopasowuje katalogi po ID. Jeśli importowany plik miał ID konfliktujące z istniejącym katalogiem (np. ten sam plik był już raz importowany), pojawia się prompt: 1 nadpisz / 2 kopia (domyślne, bezpieczne) / Anuluj. Wybierając 2 dostajesz kopie z nowymi ID i dopiskiem "(import)" w nazwie folderu — nic nie tracisz.

Drzewo katalogów się nie rozwija

Strzałka rozwijania pojawia się tylko jeśli katalog ma zestawy. Pusty katalog ma wyszarzoną kropkę zamiast strzałki. Stan rozwinięcia każdego katalogu jest zapamiętywany w chrome.storage.local.

Nie widzę przycisku Eksport/Import katalogu

Te przyciski są w pasku katalogu (na górze obszaru edycji), obok przycisku "Usuń katalog". Nie mylić z przyciskami w menu Ustawienia, które dotyczą całych ustawień.

AI Helper nie odpowiada

• Brak klucza API — w Ustawieniach → AI Helper wpisz klucz przynajmniej jednego dostawcy (OpenAI / Anthropic / Gemini).
• Nieprawidłowy klucz — okno pokaże błąd zwrócony przez dostawcę; sprawdź klucz i limity konta u dostawcy.
• Klucz nie zsynchronizował się na drugie urządzenie — synchronizacja działa tylko dla kluczy z zaznaczonym checkboxem „synchronizuj" i wymaga zalogowanego konta synchronizacji JustZix.

Konflikt z Content Security Policy

JS reguł i akcji jest wykonywany w kontekście strony warstwową strategią odporną na restrykcyjne reguły Content Security Policy. Większość stron — w tym duże serwisy jak Facebook — działa od razu, bez żadnej konfiguracji.

Strony z bardzo restrykcyjnym CSP (niektóre banki, serwisy korporacyjne) mogą blokować wykonanie. Aby JS działał na każdej stronie, włącz dla JustZix opcję „Zezwól na skrypty użytkownika": otwórz chrome://extensions, wejdź w szczegóły JustZix i włącz przełącznik (w starszych przeglądarkach wymagany jest też tryb dewelopera). Gdy strona zablokuje wykonanie, okno JavaScript / Konsola JS pokaże stosowny komunikat.

JustZix — instrukcja