Panel edycji obok strony — Ctrl+Alt+I, O, P
Czasem chcesz mieć panel edycji JustZix obok strony, nie zamiast niej. Tworzysz regułę dla Wikipedii, ale jednocześnie patrzysz, jak Twoje selektory CSS trafiają w realne elementy. Trzy nowe skróty z v3.2.4 — Ctrl+Alt+I, Ctrl+Alt+O, Ctrl+Alt+P — otwierają panel w drugim oknie przeglądarki, automatycznie zaznaczają pierwszy aktywny zestaw na bieżącej stronie i ustawiają kursor na właściwej zakładce.
Trzy skróty, trzy zakładki
Ctrl+Alt+I— panel edycji, zakładka CSS.Ctrl+Alt+O— panel edycji, zakładka JS.Ctrl+Alt+P— panel edycji, zakładka Akcje.
Skrót otwiera panel w osobnym oknie przeglądarki (typ normal, 1200×850 — wygodne na monitorach średnich i większych), nie w nowej karcie. Możesz je zostawić obok strony albo przenieść na drugi monitor.
Auto-zaznaczenie aktywnego zestawu
Po otwarciu panel przegląda drzewo Twoich reguł, znajduje pierwszy zestaw, który jest aktywny na bieżącej stronie (folder/grupa/zestaw mają cascade włączony, wzorce URL pasują) i automatycznie go zaznacza. Drzewo rozwija się do tego elementu, wybrana zakładka jest aktywowana — od razu możesz pisać.
Jeśli żaden zestaw nie pasuje, panel otwiera się czysty, gotowy do utworzenia nowego. To celowe: jesteś na facebook.com, nie masz jeszcze żadnej reguły — naciskasz Ctrl+Alt+I, masz pusty panel z otwartą zakładką CSS, dwa kliknięcia i tworzysz pierwszy zestaw.
Ten sam skrót w panelu = przełącznik zakładek
Gdy okno panelu już jest otwarte i jesteś na poziomie zestawu (a nie na pulpicie czy w edytorze folderu/grupy), ponowne naciśnięcie tej samej trójki przełącza zakładkę aktywnego zestawu:
Ctrl+Alt+I→ zakładka CSSCtrl+Alt+O→ zakładka JSCtrl+Alt+P→ zakładka Akcje
Skrót nie tworzy drugiego okna — system aktywuje już istniejące. Jeśli akurat patrzysz na pulpit lub edytujesz folder/grupę, skrót w panelu nic nie robi (no-op), bo nie ma „aktywnej zakładki" do przełączenia.
Zgodność z każdym układem klawiatury
Pierwsza wersja skrótu dopasowywała klawisz po e.key. Na polskim układzie Programmers okazało się to problemem: AltGr+O daje znak ó, więc Ctrl+Alt+O z prawym Altem (= AltGr) generował e.key === 'ó' i skrót nie odpalał. I i P na PL nie mają diakrytyk pod AltGr, więc działały.
W v3.2.5 dopasowanie przeszło na e.code (KeyI / KeyO / KeyP) — fizyczny klawisz, niezależny od układu klawiatury i AltGr. Ten sam wzorzec, którego używamy dla AI Helpera (e.code === 'Backslash'). Skrót działa identycznie na każdym layoucie: polskim, niemieckim, francuskim, rosyjskim, chińskim.
Use case 1 — pisanie reguły dla facebook.com obok podglądu
Otwierasz facebook.com, naciskasz Ctrl+Alt+I — w drugim oknie pojawia się panel z otwartą zakładką CSS. Piszesz selektor, zapisujesz, patrzysz na facebook.com — element zniknął. Patrzysz na facebook.com, ewidentnie czegoś brakuje, przełączasz fokus na panel i edytujesz. Z dwoma monitorami robisz to bez Alt-Tab — z jednym przeciągasz okno na pół ekranu i pracujesz w trybie split.
Use case 2 — szybka edycja JS już istniejącego zestawu
Jesteś na YouTube, Twoja reguła „YouTube: ukryj wskazówki" przestała działać po update'ie strony. Naciskasz Ctrl+Alt+O — drugie okno otwiera się od razu na zakładce JS Twojego YouTube'owego zestawu (bo to jedyny zestaw aktywny na tej karcie). Poprawiasz, zapisujesz, reload na pierwszej karcie — działa. Bez wyszukiwania zestawu w drzewie.
Use case 3 — drugi monitor jako stały panel
Jeśli pracujesz przy dwóch monitorach: na lewym masz przeglądarkę z odwiedzaną stroną, prawy poświęcasz panelowi JustZix. Ctrl+Alt+I/O/P na lewym otwiera lub aktywuje panel na prawym i przeskakuje na odpowiednią zakładkę. Workflow w stylu IDE z otwartym deweloperskim panelem, ale na żywej stronie.
Architektura
Pod maską: content script wykrywa skrót i wysyła cel (typ skrótu + URL bieżącej karty) do background. Background sprawdza, czy okno panelu już istnieje:
- Nie istnieje → tworzy nowe okno (
chrome.windows.createtypnormal, 1200×850), zapisuje pending-nav wchrome.storage.local.jzPendingEditNav. Panel przy starcie konsumuje cel z storage i wybiera zestaw + zakładkę. - Istnieje → aktywuje okno (
chrome.windows.update focused:true), wysyła cel przez storage. Panel reaguje nastorage.onChanged.
To podejście jest w pełni asynchroniczne i nie wymagało modyfikacji options.js — wystarczy konsumować _ruleEditorTab i jzPendingEditNav przy starcie i przy zmianie storage.
Zobacz też
- Okna na froncie — okna deweloperskie wewnątrz strony
- Skróty klawiaturowe JustZix — kompletna ściąga — wszystkie wbudowane skróty
- Reguły JS działają na Facebooku, X i GitHubie — ten sam workflow obok strony
Zainstaluj JustZix — i miej edytor obok przeglądanej strony pod jednym skrótem.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.