JustZix — user manual

Inject your own CSS styles, JavaScript code and action buttons into any page

Concept and core terms

JustZix lets you automatically inject your own CSS and JavaScript into selected pages, and also define action buttons (shortcuts that run code snippets on demand).

Data hierarchy

URL patterns at the rule and group level

Each rule and each group can get its own list of additional URL patterns (chip input). When the list is empty, the element works everywhere the folder pattern matches. When you set e.g. https://justzix.com/admin/*, the element only works on admin subpages.

Tutorial — interactive introduction

For new users JustZix has a built-in interactive tutorial that walks you step by step through building a complete solution — from a folder, through a group and a rule set, to CSS/JS code and an action button. Hints appear as bubbles next to successive elements of the panel.

How to launch it:

• Automatically — the first time you open the panel, when you do not have any folder yet.
• Manually — at any time from the settings menu → Tutorial.

In the "Tutorial centre" window you pick a tutorial and click Start. During the tutorial:

• The Back and Next buttons move between steps; the bar at the bottom of the bubble shows progress.
• Some steps wait until you perform the indicated action — e.g. click the highlighted button.
• Steps with sample code have a Copy button.
• The Esc key or the × button closes the tutorial at any moment.

Interface and navigation

Edit mode

Access it via a right click on the extension icon → "Options", or a click on the icon → the "Edit panel" button.

• Logo at the top of the sidebar — the full justzix logotype (mark + Inter wordmark). It automatically switches between light and dark variants according to the app mode (inline SVG + CSS variables, with no file swapping). Clicking the logo opens the Dashboard.
• The "Folders" section — below the logotype: a "FOLDERS" label + an add-folder button, a search box, an "Active only" filter.
• Folder tree — folder ▶ group ▶ rule. The expand arrow toggles. Clicking a rule jumps to editing just that rule.
• Settings menu (a drop-up at the bottom of the sidebar) — a single button that opens a panel with options: Dark mode, User manual, Export settings, Import settings, Import from URL, Cloud sync, My shares, AI Helper, Project website, the language selector, the Storage quota indicator and the extension version number. Closed with Escape or a click outside the panel.
• Folder bar — the button label (3 letters), color, name, URL pattern, action-panel options, export/import, deletion.
• Rule cards — each has 3 tabs: CSS JavaScript Actions.
• Breadcrumb bar — in the folder, group and rule editor it shows the navigation path; at the far left is the "home" icon — a quick return to the Dashboard.
• Editor resize — the bar below each editor (CSS and JS) can be dragged down to enlarge the working area.
• Sidebar toggle — the vertical bar between the sidebar and the editor hides the left panel for more room.

Floating button (on matching pages)

A small round button appears automatically on pages that match any folder. By default it shows the label ZIX, but each folder can have its own label.

Folder label: in the folder bar, at the far left (next to the color picker) there is a text field for the button label. Enforced limits: max 3 characters, always UPPERCASE (the conversion to uppercase happens immediately while typing). The field accepts letters and digits — examples: ZIX, QA, DEV, ADM, X. When several folders match, the label is taken from the first one that has it set; the rest are ignored (an empty field = fallback to ZIX).

State by color (brand palette):

• Inject Green (or the folder color if set) — all matching folders are enabled
• Syntax Orange (or a muted folder color) — some enabled, some disabled
• Muted Gray — all disabled
• Halt Red (at opacity 0.7) — the extension is globally disabled

Folder color: if you set the color picker on a folder, the floating button on matching pages takes on that color. The "mixed" and "off" states automatically modulate the saturation. When several folders match, the color of the first one with a color set is used.

Dashboard

When you enter the edit panel the extension opens the Dashboard — a home page with a summary of your library and quick shortcuts. Previously the panel automatically selected the first folder in the list; now you see an overview instead.

The Dashboard is reachable through a click on the logo in the sidebar and through the "home" icon on the breadcrumb bar of every editor (folder, group, rule). The Dashboard header itself also has a "home" icon — clicking it refreshes the data (reloads the library from storage and re-renders the Dashboard from scratch).

The Dashboard is laid out in fixed rows of cards:

• Library — an inventory: the counts of folders, groups, rules, actions, action bars, in-page windows, plus rules with CSS and rules with JS.
• Usage stats — actual counters: action clicks, CSS applications, JS executions and window displays. The values are summed across all paired devices (via cloud sync).
• Recently edited rule sets — a list of up to 6 most recent rules (sorted by modification date); clicking opens the rule in the editor.
• Tip — a random tip from the manual; the pool holds 30 tips, which you move between with the "previous" / "next" buttons. Next to it is a link to the full manual.
• Latest examples — the newest examples from the justzix.com library (with their category and date added).
• From the blog — the latest blog posts from the project website.
• Extension status — a row of three cards: the installed version (with information on whether a newer one is available), chrome.storage.local usage and the date of the last cloud backup.

The "Latest examples" and "From the blog" cards fetch their content from the project website; when the endpoint is unavailable (e.g. offline), both cards are hidden. The extension version is re-checked fresh on every dashboard open.

Folder tree (sidebar)

The left panel in edit mode shows folders in a hierarchy — you can expand each folder to see its rules and jump to editing a specific one.

Navigation

Reordering (drag & drop)

Hover over a folder, group or rule — a drag & drop handle appears on the left side. Grab it with the mouse and drag:

Folders

• Folder → folder — reorder (a blue line shows the insertion point: above or below the element)

Groups

• Group → group (same folder) — reorder within the folder
• Group → group (different folder) — move the group between folders
• Group → folder name — move the group to the end of the target folder

Rules

• Rule → rule (same group) — reorder within the group
• Rule → rule (different group) — move the rule between groups, keeping its position
• Rule → group name — move the rule to the end of the target group
• Rule → folder name — move the rule to the folder's first group (when the folder has several groups)

Sidebar toggle

The vertical bar between the sidebar and the editor hides the left panel — useful when you need more room for the editor. The state is remembered between sessions. After showing/hiding it, CodeMirror automatically updates its width.

Editor resize

Below each editor (CSS, JS, action code) there is a horizontal bar with a handle for dragging vertically. Grab it with the mouse and pull down to enlarge the editor. Minimum height 80px, no maximum — the page scrolls naturally with the content.

Search in code editors

Above each CodeMirror code editor — CSS and JavaScript in the rule card, and "JS code" in the action editor — there is a search bar: a text field and a button with a magnifying-glass icon.

• After running a search, all matching fragments are highlighted — the current match in yellow (black text), the rest in blue (white text).
• A match counter appears next to the field in the format n / total.
• When there is more than one match, ▲ ▼ arrows appear for moving between results. The current match is scrolled into view.
• Editing the code invalidates the results — you have to search again.

Shortcuts

URL patterns

A URL pattern defines which pages a folder activates on.

Rule states (Active / Enabled)

Each rule has two independent flags:

Toggle cascade

Folder toggle  →  changes "enabled" for all active rules in its groups
Group toggle   →  changes "enabled" for all active rules in that group
Rule toggle    →  changes "enabled" for that rule only

Rules with Active: NO (badge ○) are skipped by cascades — you control them manually only, independently of the folder and group state.

Practical examples

Floating button and panel

In the drop-down panel (right click) you can:

• Enable/disable individual folders
• Enable/disable individual groups (when a folder has more than one group)
• Enable/disable individual rules in a folder
• Enable/disable action bars — an "Action bars" section below the rule list, a checkbox per bar, modifies actionBar.enabled (persistent, propagates to the edit panel)
• Disconnect bars — a "Connections" section appears when the floating button is snapped to bars (snap & connect), with "Disconnect from: X" + "Disconnect all" buttons

The panel only shows active rules (●) — independent ones (○) are hidden for brevity. When a folder has only one group named "Default", the group header is omitted — only the rules are shown.

Popup widget (extension icon)

Clicking the JustZix icon in Chrome's extension toolbar opens the popup widget — a compact control panel for the current tab. From the top:

• Edit panel — a button that opens edit mode (the options page) in a new tab.
• Plugin enabled — the large toggle of the extension's global switch (green = enabled, gray = disabled).
• Bar edit mode — the toggle of the action bar edit mode for the current tab.
• AI Helper — a toggle that opens / closes the AI assistant window on the current tab.
• The URL of the current tab.
• The list of folders matching the page — a checkbox enabling/disabling each folder and an "eye-off" icon hiding the floating button for this page.
• Action bars — a section with a checkbox per bar (persistent actionBar.enabled).
• Restore floating button — a link that appears when the button has been hidden for the current page.

Action bars (ActionBars)

In a single workspace you can have several action bars — each with its own name, orientation, background color, its own set of buttons and an independent position per browser window. A bar can be assigned to a folder, a group or a single rule (this determines visibility and cascade).

Creating and editing a bar

In the folder, group or rule editor there is an "Action bars (N)" button. Clicking it opens the bar management modal. In the modal:

• Add bar — you pick the assignment level (folder / group / rule of the current context)
• Name (max 6 UPPERCASE characters) — an optional tab with the name sticks out above the bar edge
• Orientation — horizontal or vertical
• Background color — a color picker (the JustZix brand palette)
• Enabled — when unchecked, the bar is not rendered at all (not just visually hidden). The state is saved in storage, independent of the per-window position

Visibility inherited downward

• A folder bar is visible for all active rules of that folder (it aggregates their actions through barId).
• A group bar — only for the rules of that group.
• A rule bar — only when the rule is active.
• A bar with no visible and enabled action in a given branch is not rendered at all.

Assigning an action to a bar

Each action in the "Actions" tab of the rule card has an "Action bar" dropdown — you pick the target bar from the list of bars visible for that rule (the rule's own bars + group bars + folder bars).

Snapping bars (snap & connect)

While dragging a bar, the extension detects the edges of neighboring bars and the floating button within a distance of ≤ 12 px. A sticky visual indicator appears, and after you release, the bars join into a connection group. Then:

• Connected bars move together (group drag).
• The JustZix floating button can also take part in connections (__float as a pseudo-bar).
• Connections are remembered per window in session memory.

Right click on the bar's drag handle → context menu:

• Hide this bar (until reload) — a runtime hide per browser window. The bar comes back after F5 / a URL change / closing and reopening the tab. To disable it permanently: see Show/hide bars below.
• Disconnect from: X () — appears for each neighboring connection.
• Disconnect all connections () — when the bar is connected to more than one other.

In bar edit mode this menu is muted; a right click on a label then gives the "Delete label" option.

Show/hide bars — from 3 places

For permanently enabling/disabling action bars (without F5), the extension offers three entry points, all mapped to the same actionBar.enabled in storage — a change from one place propagates to the edit panel and the other UIs:

1. Floating panel (right click on the main JustZix floating button) — an "Action bars" section below the list of folders/groups/rules. A checkbox per bar shows the persistent state. Click → toggle actionBar.enabled.
2. Popup widget (clicking the extension icon next to the address bar) — an "Action bars" section below the folder list. Plus a small "eye-off" icon per folder — it hides the floating button for the current page (restore it with the "Restore floating button" link).
3. chrome.contextMenus (right click on the page → JustZix → Action bars) — a dynamic submenu with a checkbox per bar. The list is rebuilt per active tab and on every state change.

Bar edit mode — free layout

The action bar edit mode is turned on in three ways: with the Ctrl+Alt+S shortcut (works from anywhere on the page), with the toggle in the extension's popup widget, and from Chrome's context menu (right click → "Action bar edit mode"). An info bar appears at the top of the screen; using any of the toggles again exits the mode.

In edit mode the normal behavior of elements is suspended (a click doesn't run code, fields don't take focus) — instead, the elements can be arranged and resized:

• Selecting — a click = a single element; Ctrl+click = add/remove from the selection; a click on an empty area or Esc = deselect all. Shift+drag over an empty area = range selection (a rectangle).
• Moving — drag the selection with the mouse. Several selected elements move together.
• Resizing an element — with a single selection, a frame appears with 8 handles (4 corners + 4 edges).
• Resizing the bar — the bar has handles on the right edge, the bottom edge and the corner (resizing the canvas).
• Labels — the "+ Label" button above the bar adds a static text label in the first free spot. A double click on a label opens the editor (text, font, size, color, "Delete"). Labels are moved and resized like action elements.
• Deleting labels — the Delete key removes all selected labels at once; a right click on a label gives the "Delete label" option; there is also a "Delete" button in the label editor. Action elements are deleted in the edit panel (they belong to rules).
• Reset bar — the "Reset bar" button above the bar restores the default layout (flow): it removes custom positions and sizes of elements and all labels (with a confirmation).
• Undo — Ctrl+Z undoes the last change (a move, a resize, adding/editing/deleting a label, a reset). The history covers the current editing session.

The edit mode is "hard": moving and resizing snap to an 8 px grid, an element cannot be pulled outside the bar or placed on top of another — on a collision both elements (the one being moved and the one underneath) get a red frame, and after you release, the element returns to its previous spot. The bar cannot be shrunk so far that an element ends up outside it; when a new element or a label doesn't fit in the bar, the bar canvas automatically grows. A right click on the bar in edit mode does not show the "hide/disconnect bar" menu.

Bar layout modes: a bar starts in flow mode (classic flexbox — elements one after another, vertically or horizontally). The first move or resize of an element converts the bar to custom mode (a canvas with free positioning) — visually unchanged, because the current layout is snapshotted as the starting point.

Action types: BUTTON / SELECT / INPUT / SLIDER / TEXTAREA / TOGGLE3

Each action has a type — chosen with a dropdown at the start of each action in the rule card. 6 types are available:

Static text labels are not an action type — you add them directly on the bar in edit mode (see "Bar edit mode" → labels).

Common fields

• Label — max 6 characters (uppercase, monospace). Shown on the button, as the placeholder of INPUT/TEXTAREA, or as a tab above SELECT/SLIDER/TOGGLE3.
• Color — a color picker (the element background; for TOGGLE3 = the background of the active state).
• Second color (colorText) — a picker next to the first one, plus a hex field with native Ctrl+C/V. Semantics per type:
  • BUTTON / SELECT (face) / INPUT / TEXTAREA — the text color
  • SLIDER — the bar color (the slider's accent-color); the label and value text are separate fields (see "Granular colors" below)
  • TOGGLE3 — the text color of the active state
  Each picker has a × button that restores the default (empty = renderer fallback to the CSS default — usually white).
• Action bar — a dropdown that assigns the action to a specific ActionBar.
• Visibility — a "visible" checkbox lets you quickly hide it without deleting.
• Keyboard shortcut — click and press a combination (reserved Chrome shortcuts are warned about).
• JS code — executed on activation. Available variables: value, $el (DOM element), $action ({ id, label, type, el }); for TOGGLE3 additionally stateIdx (0-2) and stateLabel.

SELECT — options modal

Clicking "Options (N)" in a SELECT-type action card opens a modal:

• Variant: static (options configured here) or js (code populates a native <select>).
• Option list for static: each row is { name, value }. name = what the user sees, value = what reaches JS as the value variable.
• Granular dropdown colors — shared for both variants:
  • colorDropdownBg — the popup panel background (static) + the <option> background (js variant)
  • colorOption — the text color of an option name in the dropdown
  • colorSelected — the background of the selected option (static; in js it is native and browser-specific)
  • colorHover — the background of the option under the cursor (static)
• Stable action ID — the full action.id with a copy button + a sample JS selector.

INPUT — configuration modal

• Placeholder — text visible before typing.
• Default value — the initial value (when there is no entry in memory).
• colorPlaceholder — the placeholder text color (via a CSS variable, because the ::placeholder pseudo-element cannot be styled inline).
• Stable action ID + a sample JS selector.

SLIDER — configuration modal

• Min / Max — the numeric range (e.g. 0–100). Required: min < max.
• Step — the step (e.g. 1, 5, 0.1). Default 1.
• Default value — the initial value (when there is no memory). Default (min+max)/2.
• Unit — the unit shown after the value (e.g. "px", "%"). Optional.
• colorLabel — the color of the label to the left of the slider.
• colorValue — the color of the number+unit on the right.
• JS code — executed on change (mouse release / Tab / Enter). value = the numeric value.

TEXTAREA — configuration modal

• Placeholder / Default value — analogous to INPUT (the initial value may contain \n for newlines).
• Rows — the number of visible rows (1-20, default 3). Controls the field height.
• colorPlaceholder — analogous to INPUT.
• JS code — executed on change (blur, NOT Enter — Enter in a textarea is a legit newline). The user leaves the field → the value is saved and the code runs. value = a string with newlines.

TOGGLE3 — configuration modal

• 3 states — exactly 3, each with the fields label (max 5 characters, uppercase) and value (a string passed to the code as value). Default labels: OFF / MID / ON.
• Default state — a radio button next to each state indicates which one is the initial one (when there is no memory). Default 0.
• colorBg — the background of the wrap container (the whole segmented control).
• colorHover — the hover background on an inactive button.
• colorInactiveText — the text color of the inactive states (the active state uses colorText).
• JS code — executed on every state change (a click on an inactive one). Variables: value (state.value, fallback to state.label), stateIdx (0-2), stateLabel, $el (the container div).

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

The choice / value / slider position / textarea content / active toggle3 state are automatically remembered per action. After F5 the value comes back; after closing the tab and reopening it (on a page matching the rule) too. A singleton per action.id — one value, independent of the specific URL.

Value format in memory per type:

• SELECT (both variants), INPUT, TEXTAREA → string
• SLIDER → number (or a string-numeric after a roundtrip through storage)
• TOGGLE3 → integer 0-2 (the INDEX of the active state, not the value)

Storage:

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

No cross-device sync: the memory stays local. Two computers can have different values (e.g. a different per-user filter).

Stable action ID

Each action has an immutable action.id (format a_<base36>_<random>). In the rule card, next to each action, there is a badge with the row number — clicking it copies the full ID to the clipboard, and the tooltip shows the full ID.

In user JS, refer to it via data-jz-action-id:

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

Or through the window.JZ helpers — see Calling actions programmatically from JS.

Chrome context menu

Right click on any page → JustZix:

• Enable/disable the floating button for this page — toggles the visibility of the main floating button (analogous to "eye-off" in the popup).
• Action bar edit mode (enable/disable) — toggles the bar edit mode on the active tab; a third entry point alongside the Ctrl+Alt+S shortcut and the popup toggle.
• AI Helper (enable/disable) — opens or closes the AI assistant window on the active tab.
• Action bars ▸ — a submenu with a checkbox per bar. The list contains only the bars relevant to the active tab. The checkbox = the persistent actionBar.enabled state.
• CSS windows ▸ / JS windows ▸ / JS Consoles ▸ / Output Consoles ▸ — analogous submenus for each of the 4 types of in-page windows (see the section below). The checkbox = the enabled state per window.
• Temporary window (TEMP) ▸ — a submenu with 4 items: TEMP CSS pane / TEMP JS pane / TEMP JS Console / TEMP Output Console. A click = toggle (create or close). It works on any page, independently of folder matching.

The window submenus rebuild on: tabs.onActivated, tabs.onUpdated (a URL change), and storage.onChanged for folders/groups/rules/actionBars/cssPanes/jsPanes/jsConsoles/outputConsoles/floatingHidden. The TEMP submenu is static (always 4 items).

In-page windows (CSS / JS / Consoles)

The extension offers four types of floating windows injected into pages, alongside the action bars. Each window is assigned to a folder, a group or a rule (it inherits visibility cascade-style, just like action bars) and appears on pages matching by URL.

Management: in the folder / group / rule editor you will find a "Windows ▾ (N)" button. Clicking it expands a menu with the 4 types — you pick a type, a modal opens with a list of windows for that level (plus windows inherited from higher levels). You add, name, color and delete them.

CSS pane

A floating window with a text field for CSS. Every change (after a short pause) updates the injected <style> — you see the effect live. The content is remembered per browser tab (it survives F5, disappears when the tab is closed). Ideal for quickly testing CSS without saving it in a rule.

JS pane

A text field for JavaScript executed in the page context. The code runs after a change (with a delay) or manually with the ▶ Run button / the Ctrl+Enter shortcut. Execution errors are shown in a red bar below the code. When the code is changed since the last run, the Run button glows yellow (the "dirty" state).

JS Console (REPL)

A full-fledged console in the page. You type code in the bottom field, Ctrl+Enter (or ▶) runs it, the result is appended to the log area above. Features:

• Command history — the ↑/↓ arrows on the first/last line of the input scroll through earlier commands (like in a terminal).
• Ctrl+L — clears the output.
• console.* capture — console.log/warn/error/info calls during execution are shown in the log (colored by type).
• Colored lines: the command (blue), the result (light), an error (red), console.log (gray), console.warn (yellow).

The input, output and history are remembered per tab. The console executes code in the page's MAIN world — you have access to all of the page's variables and functions.

Output Console

A read-only log preview — it automatically captures everything that happens on the page: console.log/warn/error/info/debug, uncaught exceptions, unhandled Promise rejections, network traffic and pushes to dataLayer, as well as your own logger window.JUSTZIX.*. Unlike the JS Console (where you type code yourself) — here the logs flow on their own.

Six tabs with counters

The window is split into 6 tabs, each with an entry counter (a badge):

Contextual filter bar

Between the tabs and the search field there is a filter bar that changes depending on the selected tab:

• All — no additional filters.
• JZconsole / Console — level checkboxes: log, info, warn, error, debug. Uncheck a level → those lines disappear from the preview.
• Network — three rows: resource type (document, script, stylesheet, image, xhr/fetch, font, …), the HTTP status class (2xx/3xx/4xx/5xx), and size and time range sliders (0–100000 ms) plus a field for filtering by domain. The checkbox rows have select all / deselect all shortcuts.
• Errors — no checkboxes; you expand each error to see the details.
• DataLayer — the window splits in half (see below).

Search

Below the filter bar there is a permanently visible search field. It filters the entries of the active tab live (substring match, case-insensitive). Esc clears the field.

Console logs — collapsible like in DevTools

console.* entries are collapsed by default — they show a short preview (e.g. [PickupMap][2026-05-16T15:25Z] AUTO_SELECTION_SKIPPED: {reason: 'Lower priority source', …}). A click expands the full arguments (objects/arrays as an expandable JSON tree), analogous to the DevTools console.

Network tab

Network captures requests via chrome.webRequest (the webRequest permission in the manifest). Each entry shows, among others, the method, URL, status, resource type, size, duration, remote address (Remote address) and initiator (Initiator). The request buffer is maintained in the background, so entries from before the window was opened also appear.

DataLayer tab

The DataLayer window is split into two columns:

• Left — New pushes: a stream of consecutive dataLayer.push(...) calls in event order.
• Right — Current state: the live content of the window.dataLayer object as an indexed (0:, 1:, …) expandable JSON tree — you drill into nested data, analogous to the object inspector in DevTools. The snapshot updates after every push. The right column header has expand all / collapse all buttons — they work recursively on the whole tree.

Clicks on JustZix's own UI (expanding tree nodes, window buttons) do not reach this tab. If the page were collecting click events (e.g. GTM auto-event), a click on the window would generate a push to dataLayer and reset the tree's expansion — the extension recognizes such pushes and does not report them (the page's real window.dataLayer remains untouched).

Custom logger — window.JUSTZIX

The Output Console exposes a global API for logging from your code (JS pane, actions, page code):

JUSTZIX.log('a regular log');
JUSTZIX.warn('a warning');
JUSTZIX.error(new Error('an error'));   // shows a stack trace
JUSTZIX.info({ obj: 1, arr: [2,3] });
JUSTZIX.debug('details');               // hidden by default (filter)

Available aliases:

• window.JUSTZIX — the main one, always works
• window.__JUSTZIX__ — an alias that is always available
• window.JZ — an alias only if the page has no window.JZ of its own (some pages, e.g. Google Ads, take that name)

After the Output Console appears, you will see a welcome line in the log telling you which alias is available on that page.

What is captured

• console.log/warn/error/info/debug(...) from the page — they also pass through to the normal DevTools console (we don't block them)
• window.JUSTZIX.*(...) — your dedicated channel (it does not go to DevTools)
• Uncaught exceptions (throw new Error(...)) — shown in red with the error location
• Unhandled Promise rejections — Promise.reject(...) without a .catch

fetch/XHR request errors do not go to the Errors tab (they are not JS exceptions) — you will find them in the Network tab by the 4xx/5xx status. We don't catch CSP violations or Chrome's internal warnings.

Quick help — Ctrl+Shift+H

Ctrl+Shift+H opens a draggable quick-help window — a guide to using JustZix on the page: global shortcuts, in-window shortcuts, the Output Console, mouse handling of windows, action bar edit mode and logging to the Output Console. It works on any page. You drag the window by its header; Esc / a click outside / × / another Ctrl+Shift+H closes it.

Customizing the window appearance

Colors: in the management modal (the edit panel) each window has a color picker — the header dot, the header background and text, the body background and text, the color of the action buttons.

Font and size: right click on the header bar of the window → a menu with a font choice (Consolas, Menlo, Monaco, Courier New and other monospace) and a size (10–24 px).

Dragging, snapping and connecting

You drag each window by its header bar. When an edge gets close to another window / action bar / floating button (≤ 12 px), a magnetic attraction appears — the windows snap into a group. Dragging a snapped group moves all the elements together. Positions are remembered per browser window.

Resizing a window

Each window has 8 resize handles: 4 in the corners (changing width and height at once) and 4 on the edges (changing only one axis). The dragged handle keeps the opposite edge in place. Range: width 180–1200 px, height 120–900 px. The new size (pane.size) is saved — for persistent windows it is synced between devices, for TEMP windows per tab.

Scrolling inside a window

Scrolling with the mouse wheel inside a window scrolls only that window's content — the page underneath does not scroll. This also applies when the window's area reaches the end of its scroll, or when the cursor is over a non-scrollable part (the header, the filter bar).

Right click on the window header

• Bring forward / Send backward — change the order of windows when they overlap (one-shot jump above / below all overlapping neighbours).
• Disconnect from: X / Disconnect all connections — when the window is snapped.
• Close window [type] — hides the window (you can turn it on again from the panel / popup).
• Font / Size — a choice of the text font and size.

Close button and double-click on the header

Every window (both temporary TEMP and persistent ones) has a × close button in the right corner of the header. TEMP get hidden (open again from the page context menu or a shortcut), persistent — disabled (re-enable with a checkbox in the popup). Double-click on the header bar:

• Persistent (CSS pane / JS pane / JS Console / Output Console) — collapses / expands the window to the header only. State remembered.
• TEMP — toggles the remembered size ↔ default.
• AI Helper — toggles the remembered size ↔ default.

Snapping and edge highlight

When a window edge gets close to another JustZix window (12 px threshold), a red edge appears on the snap side (on both windows). Releasing the cursor in this position performs the snap — the windows then move as a group. All extension windows participate in this mechanism: action bars, FAB, persistent panes (CSS/JS/Console/Output), TEMP, and the AI Helper.

TEMP panes — temporary windows

You can create a temporary window on any page — even one for which you have no folder at all. TEMP panes are a quick ad-hoc tool: you test CSS/JS on a foreign page without configuring rules.

TEMP pane features:

• They work on any page (they skip folder matching)
• Remembered per tab — they survive F5, disappear when the tab is closed. They do not sync between devices.
• A different color than standard windows — orange (CSS), red (JS), pink (JS Console), cyan (Output) — the whole window frame is in that color.
• "TEMP" in the name.
• A red × cross in the top-right corner of the header — closes the window. Data (code, log, geometry) stays in the session — reopening a window of the same type restores it. It only disappears when the tab is closed.
• A trash icon in the header of TEMP CSS / TEMP JS — clears the editor content in one click. The clear lands in the browser's undo history (Ctrl+Z reverts it). For CSS the live <style> is updated immediately.
• At most one of a given type — pressing the shortcut a second time closes the existing window; a third press reopens it with the preserved content.
• Size memory (per device) — after a TEMP window is resized, its last size is remembered separately for each type (CSS / JS / JS Console / Output) in the device's storage. It survives a browser restart and does not sync between devices. A newly opened TEMP window starts at the default size (380×240).
• Double-click the header bar = size toggle — double-clicking a TEMP window's header bar toggles it between the default size and the remembered size.

Creating / closing (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
• or: right click on the page → JustZix → Temporary window (TEMP) ▸

AI Helper — AI assistant

AI Helper is an AI assistant built into the extension that helps you prepare and deploy a CSS/JS solution for a specific task on the current page. The model can examine the page, test code live in TEMP windows and — after your approval — create a ready-made folder, group and rule.

API key configuration

In the sidebar's Settings menu, the "AI Helper" item opens a configuration modal:

• API keys for three providers: OpenAI, Anthropic and Gemini (Google). A key from one provider is enough to use the assistant.
• Default provider and default model — used when the chat window is opened (the model can also be fetched automatically — then the highest available one is chosen).
• Each key has a "sync" checkbox (off by default).

Chat window

The AI Helper window is a floating window (per tab, like TEMP windows — draggable, resizable with 8 handles, with a closing cross, a single instance). You open / close it:

• with the Ctrl+Alt+\ shortcut,
• with the "AI Helper" toggle in the popup widget,
• from Chrome's context menu → JustZix → AI Helper.

In the window: a provider choice (when you have more than one key) and a model choice (the list is fetched live), the conversation history, a button to clear the conversation, and a text field (send it with the button or Ctrl+Enter). The model automatically gets the context of the current page — the URL, the title and an HTML fragment.

Agent workflow

AI Helper conducts the conversation according to a set workflow:

1. It asks for details — the URL scope, the folder/group/rule names, colors, the exact goal.
2. It examines the page with the query_page tool (selectors, DOM structure) before writing code.
3. It inserts the prepared CSS/JS code into a TEMP temporary window, which you see live on the page.
4. It verifies errors on its own — with the read_temp_pane and read_console tools it checks whether the tested code reports no errors before showing you the result.
5. It asks you to check the result and explicitly asks whether the test succeeded.
6. When the test failed — it fixes the code and tests again.
7. Only after your confirmation does it persist the solution: it creates a folder → a group → a rule set, and if needed also an action bar and actions. Each entity creation requires a separate confirmation in the extension.

The model uses tools through a simple text protocol (a @@JZ_TOOL@@ … @@END@@ block) that works identically for OpenAI, Anthropic and Gemini. Tool calls and their results are shown in the window as separate "chips". Available tools:

AI Helper window appearance

A right-click on the AI Helper header bar opens a menu with the options "Bring forward" / "Send backward" (change the order of JustZix windows when they overlap), "Disconnect from: X" (when AI Helper is snapped to another window), and "Appearance…". The "Appearance…" panel lets you style four roles in the conversation separately: your messages, AI replies, tool results, inline forms — each with its own font, size, text color and background. Values are saved per device.

Snapping with other windows and Z-order

The AI Helper window participates in the same snap mechanism as action bars, persistent windows (CSS / JS / Console / Output) and TEMP windows. Dragging an edge close to another JustZix window (12 px threshold) → magnetic attraction, a red edge indicates the snap side on both windows. Snapped windows move as a group.

When windows overlap, the "Bring forward" / "Send backward" options in the context menu of every window (right-click on the header) make a one-shot jump — the window goes above / below all overlapping neighbours, no need to click repeatedly.

Page screenshot (for vision models)

The screenshot_page tool captures the current page view and sends it to the model as an image. The entire JustZix UI is automatically hidden before capture (FAB, action bars, AI Helper, persistent panes, TEMP). A buffer of 3 most recent screenshots, attached one-shot to the next request (after sending — removed from the buffer to save tokens). Requires a vision-capable model (e.g. gpt-4o, claude-3+/4, gemini-1.5+/2). Below the tool result chip in the chat, a thumbnail is shown — click for full-screen modal view.

Keyboard shortcuts

Global (work from anywhere on the page)

Inside a window (when it has focus)

Code editors (the edit panel)

Export and import

The extension offers five export formats (full, partial, folder, group, rule) with automatic file-type detection on import, to avoid accidentally overwriting data.

Export — full or selected elements

In the sidebar's Settings menu: Export settings. The modal opens two modes:

• Everything — exports all folders, groups, rules and global settings (the floating button, hidden panels, etc.)
• Selected — shows a folder → groups → rules tree with checkboxes:
  • A folder / group checkbox selects all elements below it
  • The indeterminate state (a dash) shows a partial selection at each level
  • Select all / Deselect all buttons for quick manipulation
  • A live summary at the bottom shows what will be exported

Partial export files are named justzix-partial-DATE.json (vs. justzix-backup-DATE.json for a full one), and inside they have a partial: true flag and a groups[] field.

Exporting a single folder (with a selection)

In the folder bar: Export — opens a modal with a tree of groups and rules (analogous to a partial export, but limited to that folder). Only the selected rules and the groups they belong to are exported — empty groups don't go into the file.

The justzix-folder format — the file contains a groups[] field with the hierarchy of the folder's groups and rules.

Exporting a group

In the group bar: Export — a modal with a list of the group's rules (checkboxes). The file: justzix-grupa-<name>-<date>.json, the justzix-group format.

Exporting a single rule

In the rule view: Export rule — it downloads the file immediately (no modal). The justzix-rule format, named: justzix-zestaw-<name>-<date>.json.

Import — automatic type detection (the full-import modal)

After loading a file / pasting JSON, the extension automatically recognizes the type and shows a colored detection panel:

Partial import modes (the purple panel)

• Merge with the current ones (default) — matches folders by ID, adds new ones; the remaining folders in the current settings stay untouched.
  On an ID conflict, a prompt with 3 options appears:
  • 1 / nadpisz — overwrite the existing folders (this removes their groups and rules)
  • 2 / kopia (default) — import as copies with new IDs, "(import)" in the folder name, no loss of existing data
  • Cancel — abort the import
• Replace the current ones — clears everything and inserts only the selected elements from the file.

Importing a single folder

In the folder bar: Import. It checks for conflicts by ID and name:

• Import as new — with an "(import)" suffix in the name
• Overwrite — removes the folder's old groups and rules and inserts the new ones
• Merge — adds the new groups / rules to the existing folder (keeping both)

Importing a group

In the group bar: Import — accepts 3 formats:

• justzix-group — inserts all the group's rules from the file
• justzix-folder — inserts all the rules from all the folder's groups
• justzix-rule — inserts a single rule

All the rules from the file go into the current group with new IDs (the operation is always an "add copy" — no conflicts).

Importing a single rule

In the rule view: Import rule — accepts only justzix-rule. A prompt with 3 options:

• 1 / zastap — replace the content of the current rule (id and groupId kept)
• 2 / kopia (default) — add as a new rule next to the current one, in the same group, with an "(import)" suffix
• Cancel — abort

Practical uses of a partial export

• Sharing with a team — export 2-3 folders with a project configuration, colleagues import them in "Merge" mode without losing their settings
• Backing up only the important configurations — e.g. production stays, experiments are skipped
• A partial migration — move just one rule between devices
• Versioning — export a specific folder into git together with the project documentation

Cloud sync

Settings → Cloud sync opens the sync account modal. The extension keeps your library (folders, groups, rules, actions, action bars, in-page windows) in the justzix.com cloud and keeps it consistent across devices. Sync works only when signed in — without an account the extension works locally only.

Account and sync key

• Registration — the extension generates a sync key (the account's unique secret). Store it safely — it is the only way to sign in on another device.
• Sign in — you paste the sync key plus an optional device label (e.g. "Work laptop"). You can decide whether the key is remembered in the extension's storage or kept only for the session.
• An e-mail can be attached to the account (verified by a link) — it is used to recover access.

First sync — conflict resolution

When signing in, the extension compares the local data with the data in the cloud:

• Only the cloud has data → it is downloaded to this device.
• Only the device has data → it is sent to the cloud.
• Both have data → a conflict modal appears with three strategies:

You can also Cancel — the extension then signs out and changes nothing.

Ongoing sync

After the first reconciliation, sync runs in the background: the extension pushes changes and pulls new entities about once a minute. A change made on one device shows up on the others after a short while. The status dot next to the "Cloud sync" item shows whether the account is connected.

Status tab — cloud library, history, actions

The Status tab of the sync modal shows the account state and provides action buttons:

• Sync now — an immediate push of changes and pull of new entities.
• Full snapshot — downloads a snapshot of the library from the account.
• Refresh account data — refreshes the account information and the list of active sessions.
• Full resync with account — two-way: it first downloads the entire library from the account, then sends local entities that are missing on the account. It repairs entities "stuck" locally — ones that never reached the server (a rejected push, absent from the first snapshot) and that ordinary synchronization does not catch because they do not change. Non-destructive: entities already present on the account are skipped (without overwriting newer versions), and entities deleted on another device are not resurrected.

Cloud library

Counters of the entities held on the account: folders, groups, rules, actions, action bars, in-page windows. Only reachable entities in the tree are counted (a group must have an existing folder, a rule — a group, a bar/window — an existing parent) — consistent with the Dashboard counters. They refresh when the panel is opened and after a manual sync.

Sync history

A device-local log of the most recent syncs. The page shows the last 10 entries; the "View full history" button opens a window with the full list (up to 100 entries). Each entry contains:

• the time and the initiating device — its name and numeric session ID (the same as in "Active sessions");
• a numeric summary — ↑ sent, ↓ pulled, ✕ deleted;
• specific changes — grouped by type with a counter (e.g. "Actions ×10") and the names of the items when known;
• the quantitative library state after the sync (six counters).

The log is local — it is not synchronized between devices. An entry is created after every sync tick that actually changed something; a manual "Sync now" always leaves an entry, even with zero changes.

What syncs and what does not

• Synced: folders, groups, rules, actions, action bars, in-page windows (CSS/JS panes, consoles), the theme (light/dark) and the interface language, and also AI Helper API keys — but only those with the "sync" checkbox checked next to the key (see AI Helper).
• Not synced (per-device state): the positions of floating windows and bars, window sizes, the SELECT/INPUT value memory, TEMP windows, API keys without the checkbox checked.

Usage statistics (CSS applications, JS executions, window displays) are synced as separate per-device entities — the Dashboard tile sums them across all paired devices. The theme and language are synced as a shared account setting and applied the next time the panel is opened on another device.

Sharing by link (Shares)

An alternative to sending a JSON file over a messenger. You issue a public link with a lifetime (1h / 6h / 12h / 24h / 48h) and hand it to the recipient. The justzix.com backend keeps the payload in the cloud until it expires, then it is deleted.

It requires a signed-in sync account (Sync). The token itself is a public secret — anyone with the link can download it, so don't send it over public channels if the content is sensitive.

Token format

JZS-XXXX-XXXX-XXXX-XXXX (16 Crockford base32 characters, ~80-bit entropy). The whole URL https://www.justzix.com/s/JZS-... is also accepted — the extension parses and normalizes it (the confusing letters I/L→1, O→0, U→V).

Account limits

• max 20 active links per account
• max 50 MB in total
• max 5 MB per single share
• max 30 new links per hour

Exceeding a limit = an error with a message. Revoke unused links in the My shares panel.

Creating a link (sender)

The "Share URL" button is in four entry points, next to "Download file":

• The whole export — Settings → Export settings → the "Share URL" button (the justzix-full type)
• A folder — the folder bar → Export → "Share URL" (the justzix-folder type)
• A group — the group bar → Export → "Share URL" (the justzix-group type)
• A rule — the toolbar in the rule view → "Share URL" next to Export / Import (the justzix-rule type)

A click opens the link-generation modal: a subject + a summary of what you are sharing, a radio with the TTL (24h by default), "Generate link". On success the modal switches to a result view with two copyable values:

• The full URL https://www.justzix.com/s/JZS-... — to send to someone without the extension (it shows a landing page)
• The token only JZS-XXXX-XXXX-XXXX-XXXX — to paste into the recipient's extension in "Import from URL"

Each has its own "Copy" button. The expiration time is also shown in the local time zone.

The "My shares" panel

Settings → My shares (a separate modal, not part of synchronization — these are two different features). It shows a list of active links: a counter in the header X/20 active · Y MB / 50 MB, and for each share a card with:

• The type (The whole export / Folder / Group / Rule) and the ID
• The expiration time ("expires in Xh Ymin") and a download counter
• The token in monospace (click = selects the whole thing)
• A summary X folders · Y groups · Z rules · N lines of JS · A KB
• Copy link / Copy token / Revoke buttons

Revoking does not undo content that has already been downloaded. If someone managed to download the payload, they have it locally. A share is a "best-effort time-limit", not DRM.

Importing from a link (recipient)

Settings → Import from URL (between "Import settings" and "Cloud sync", the chain icon). The modal has two steps:

Step 1 — input. You paste the link or the token only. Client-side validation: the token is extracted from the URL, normalized Crockford-base32, the 16 characters + the format are checked. A wrong format → a message with a hint about the correct format.

Step 2 — preview. The extension shows a share summary:

• The sender (a display name or "anonymous" if not set)
• Expires in (relative time)
• The type (The whole export / Folder / Group / Rule)
• The payload size
• The content (the number of folders / groups / rules / actions)
• CSS chars / JS lines
• Downloads

If the share contains JavaScript (jsLines > 0) — a red warning banner appears with a "Show JavaScript code" link. It opens an overlay with the full JS code of each rule and action — review it before importing, because the code will run on matching pages.

Step 3 — import. A click on "Import" → the backend returns the full payload → the extension creates new entities with always-fresh IDs (it never overwrites existing ones by ID):

The new container name: <sender-name or "Import"> <PL date> — you can then rename / move it freely.

Recipient errors

The backend does not distinguish a 404 "never existed" from a 404 "expired / revoked" — deliberately, so as not to reveal whether the token ever existed.

Calling actions programmatically from JS

You can call any action (from the "Actions" tab in the rule card) programmatically from the rule's JS or from another action's code. The global namespace window.JZ is installed in the MAIN world automatically before every user-JS execution.

API — actions

Example — reading and setting values

// === Reading ===
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 of the active state

// === Setting ===
JZ.setValue('FILT', 'new value');          // INPUT/TEXTAREA — string + dispatch input+change
JZ.setValue('OPAC', 75);                   // SLIDER — clamp to min/max, dispatch input+change
JZ.setValue('SRT', 'prod');                // SELECT(js) — native select + dispatch change
JZ.setValue('MODE', 'staging');            // SELECT static — content.js does the flow (memory + UI + code)
JZ.setValue('THM', 'dark');                // TOGGLE3 — lookup by state.value (fallback to label, then idx)
JZ.setValue('THM', 2);                     // TOGGLE3 — equivalent; a numeric idx works too

API — bars and the floating button

Context vars in action code

In an action's "JS code" field you automatically have variables available — injected as const by the background service worker before execution:

Snippet in the UI

In the configuration modal of a SELECT- and INPUT-type action, the "Stable action ID" panel shows the full action.id with a copy button and a sample JS selector (document.querySelector('[data-jz-action-id="..."]')). Below the list of BUTTONs you see JZ.click('LBL') chips — clicking a chip copies the snippet to the clipboard.

Requirements

• The action element must be visible in an action bar on the current page (the action has visible: true, the bar is visible in the tree + the page URL matches the rules).
• An invisible action or a page where the bar is hidden → JZ.click() returns false, JZ.action() returns null.
• A keyboard shortcut defined on an action has its own mechanism (a capture-phase keydown listener in content.js) — it does not require JZ.click().

Example — an AUTO action that runs a sequence

// The "AUTO" action code
JZ.click('LOAD');                          // click the LOAD action (e.g. loads data)
setTimeout(() => JZ.click('PROC'), 500);   // 500ms later PROC (processes)
setTimeout(() => JZ.click('SAVE'), 1500);  // 1500ms later SAVE (saves)

Example — rule JS reacting to the DOM

After a dynamic element appears, click the action that removes it:

// Rule JS code — an observer for a modal that appears dynamically
const observer = new MutationObserver(() => {
  if (document.querySelector('.cookie-banner')) {
    JZ.click('CCK');  // click the action that removes the banner
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Example — setting an INPUT value programmatically

// JZ.click on an INPUT doesn't change the value — use the pattern with a 'change' dispatch:
const el = JZ.action('SRCH');           // or JZ.actionById('a_mp1deeq3_uimd8l')
if (el) {
  el.value = 'new filter';
  el.dispatchEvent(new Event('change'));
}

Direct DOM access

If you prefer to work with the DOM directly (e.g. you change a style, you don't call):

// Lookup by the stable ID (recommended — resistant to a label change):
const el = document.querySelector('[data-jz-action-id="a_mp1deeq3_uimd8l"]');

// Lookup by label (case-insensitive — UPPERCASE in data-jz-key):
const btn = document.querySelector('[data-jz-key="MYBT"]');
btn.style.opacity = '0.5';      // dim it
btn.dataset.busy = 'true';      // a custom attribute

Where the action elements live in the DOM:

All elements have a data-jz-action-id attribute (a unique stable identifier). The .jz-actions-bar selector is safe — it does not collide with the page's DOM.

Selected features

Sidebar search

The "Search" field filters the folder tree. Matching logic:

• A match by folder name or URL → the whole folder with all its rules stays visible and auto-expanded
• A match by rule name, tag or CSS/JS content → only the matching rules in the folder are shown, the folder auto-expanded
• No results → the message "No results for [query]"

The match is case-insensitive, yellow highlighting shows the match location.

Global switch

After you click the extension icon in Chrome's toolbar, a popup widget with a large green/gray "Plugin enabled" toggle appears. In the disabled mode no CSS/JS is injected on any page, regardless of the folder settings. The floating button is then disabled (Halt Red, opacity 0.7). The state survives a Chrome restart.

Insert URL from the tab

A button next to the URL pattern field — it inserts protocol://host/* from the active tab. Creating a folder in 2 seconds. The extension's options page address is skipped — the most recent external tab is taken.

Live URL validation

Inline to the right of the URL field, the information "Matches X open tabs" or a warning appears. It catches typos immediately.

Rule change history

A snapshot of CSS and JS is created 3 seconds after the last edit (debounce). The limit is 5 versions — the oldest gets pushed out. When restoring a version, the current content is added to the history as the newest snapshot, so you can always undo the undo.

Tags and searching by tags

In the header of the rule card there is a field for tags — type them separated by commas. They appear as small labels in the sidebar next to the rule name. The search also finds by tags.

Folder label and color

Each folder can have its own label on the floating button (max 3 letters, UPPERCASE) and a color (a color picker). The label and color help you visually recognize which project is active on a given page.

Action click statistics

Each action button counts how many times it has been clicked. It helps you see which ones are really used.

CSS validation

Below the CSS editor a bar with a list of syntax problems is shown:

• An unclosed comment /* ... */
• Unclosed braces (a missing })
• A superfluous closing brace } (with a line number)

This is simple syntax validation — it does not check the correctness of properties/values. CSS with an error is still injected (the browser simply skips the invalid rules).

JS preview on import

In the single-folder Import modal, after loading the file, a list of rules with metrics appears:

File content (3 rules):
  Auto-login              CSS: 0L • JS: 4L                    JS
  Hide cookie banner      CSS: 8L • JS: 0L
  Debug GTM               CSS: 0L • JS: 12L • 2 actions (8L)  JS

A warning with the number of JS lines, if any are present. Clicking the JS button shows the full code for review before the import.

Try/catch JS isolation

Each JS rule is executed separately, with its own try/catch. An error in one rule does not block the execution of others. Errors are logged in the console with the rule/action name and a full stack trace.

Storage quota

A memory usage indicator in the sidebar's Settings menu (e.g. 1.2 MB / 10 MB). Red above 80%.

The "Active only" filter

A checkbox above the list — it hides rules marked as independent (○) and shows only those active in the folder (●). It helps weed out "manual" rules when a folder has many of them. It reacts immediately to toggle changes.

Updating the extension

The extension has a fixed key in the manifest (the Firefox build — a fixed gecko.id), which means the extension's ID is immutable between updates — the data (folders, rules, settings) is preserved. JustZix is shipped for four browsers: Chrome, Edge, Opera and Firefox.

New-version notification

In the Settings menu (next to the version number) a green "A new version is available" banner appears when the server publishes a newer package than the installed one. The banner contains a download link. The check is silent — with no network the banner simply does not show.

Update procedure (Chrome / Edge / Opera)

1. Download the new update ZIP
2. Unpack it overwriting the same folder where the previous version was
3. In chrome://extensions/ (Edge: edge://extensions/) find the extension and click the refresh icon on the tile
4. The extension reloads with the new files, the data stays

Firefox

The Firefox build is loaded via about:debugging → "This Firefox" → "Load Temporary Add-on" (pointing at manifest.json in the justzix_firefox/ folder). An update = reloading after overwriting the files.

CSS examples

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

/* Hide the 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);
}

/* Color all elements with 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;
}

/* Increase the readability of admin tables */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

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

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

/* Pages often have a rigid max-width 1200px - force the width */
.container, .main-content, main {
  max-width: 95% !important;
  width: 95% !important;
}

body::before {
  content: "DEV ENVIRONMENT";
  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; }

JavaScript examples

// For dev only! Never store real passwords
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';
});

// Intercept 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);
  };
}

// Intercept 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);
  };
}

// Every 500ms for 10s, check and click "Accept" buttons
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 - save the form
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }
  // Ctrl+Shift+E - go to editing (an untested example)
  if (e.ctrlKey && e.shiftKey && e.key === 'E') {
    e.preventDefault();
    document.querySelector('a.edit-link')?.click();
  }
});

// Skip annoying confirm and beforeunload while testing
window.confirm = () => true;
window.alert = (msg) => console.log('[suppressed alert]', msg);
window.onbeforeunload = null;
window.addEventListener('beforeunload', e => {
  e.stopImmediatePropagation();
}, true);

// Remember - plain CSS can't do this when the parent has display:none
window.addEventListener('load', () => {
  const target = document.querySelector('.important-info');
  const newParent = document.querySelector('.sidebar');
  if (target && newParent) {
    newParent.prepend(target);
  }
});

// Show all hidden 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);
});

Action button examples

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 }));
  }
});

// For a typical shop — click the first "add to cart"
const btn = document.querySelector('.add-to-cart, [data-action="add-to-cart"]');
if (btn) btn.click();
else alert('Add-to-cart button not found');

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

// Extracts a JWT token from localStorage / cookies for debugging
const token = localStorage.getItem('authToken')
  || document.cookie.match(/token=([^;]+)/)?.[1];
if (token) {
  navigator.clipboard.writeText(token);
  alert('Token copied. First characters: ' + token.slice(0, 20) + '...');
} else {
  alert('No token');
}

// Intercept all fetch calls and show them in the console
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('Fetch logging enabled. Every call will appear in the console.');

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));

Usage scenarios

1. Working with multiple clients / projects

Each project has its own folder with its own URL pattern. You can have folders:

• justzix.com — production modifications
• justzix dev — for https://dev.justzix.com/* with a red "DEV" banner
• client X — modifications on a different domain

In the right-hand panel, private folders can be quickly enabled/disabled. Exporting a single folder lets you share the configuration with a team.

2. A development environment with a visual marker

On every dev/staging environment, add a banner and auto-login. One CSS rule (the banner) and one JS one (the auto-fill). You create a separate folder for each environment, it merges with a simple checkbox.

3. Tools for a product manager / QA

An action panel with buttons: FILL (test data), CART (a test purchase), CLR (clear the form), STATE (show the app state in an alert). No programmer, no console, one click.

4. Modifying public pages

Favorite blogs/docs with better readability — a wider container, the font, dark mode. Each page in a separate folder, "Active" left always on.

5. Debugging analytics / GTM

One rule per domain with JS that intercepts dataLayer.push and gtag. You enable it when a client reports an analytics problem, without touching the page's code.

6. Working on admin panels

The pattern *://*.justzix.com/admin/* and CSS that fixes tables, lists, forms. Plus a "Test filter" action that automatically sets the filters for a typical workflow.

7. Safe testing in production

An RO (read-only) action injects CSS that hides all "Delete", "Save", "Send" buttons — a temporary "read-only mode" so you don't make a mistake.

// Hide dangerous buttons
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('READ-ONLY MODE enabled');

Common problems and solutions

The JavaScript didn't run

• Check whether the page matches the pattern — the floating button should be visible
• JS runs once per page lifetime — did you change the code? Reload the page (F5)
• Check the DevTools console — JS errors are logged there as [JustZix] JS error
• The rule must be Enabled — "Active" alone is not enough

The CSS isn't working

• Specificity — the page has its own styles; use !important or more specific selectors
• Dynamic classes — some frameworks generate classes like .css-1abcd that change. Use attributes ([data-testid]) or stable selectors
• Shadow DOM — some elements are in the Shadow DOM and CSS from outside has no access to them. JS is needed

The floating button doesn't appear

• The URL doesn't match any pattern
• The button was hidden earlier — in the popup widget click Restore floating button
• The page blocked the injected scripts (rare)

I lost data after a plugin update

The extension has a fixed key in the manifest — subsequent updates preserve the data. If the data disappeared anyway:

• Regularly export the settings (Export)
• Update by overwriting the same folder — don't change the path
• In chrome://extensions/ use the refresh button, don't remove and reinstall
• If you lose data, import the previous export — it takes 1-2 clicks

The button/panel positions reset

This is normal — the positions are per browser window and stored in session memory (chrome.storage.session). After the window is closed the positions disappear, in a new window you start from the defaults. A position survives navigation between tabs in the same window.

A partial export skipped some global settings

Yes — a partial export contains only the selected folders and rules plus the visibility settings related to them. It does not contain the positions of floating panels (they are per window) or other global preferences. For a full backup use the "Everything" mode.

A partial import overwrote a folder that didn't exist before

The "Merge" mode matches folders by ID. If the imported file had an ID conflicting with an existing folder (e.g. the same file had already been imported once), a prompt appears: 1 overwrite / 2 copy (default, safe) / Cancel. Choosing 2 gives you copies with new IDs and an "(import)" suffix in the folder name — you lose nothing.

The folder tree doesn't expand

The expand arrow appears only if the folder has rules. An empty folder has a grayed-out dot instead of an arrow. The expansion state of each folder is remembered in chrome.storage.local.

I don't see the folder Export/Import button

Those buttons are in the folder bar (at the top of the editing area), next to the "Delete folder" button. Don't confuse them with the buttons in the Settings menu, which concern the whole settings.

AI Helper isn't responding

• No API key — in Settings → AI Helper enter a key for at least one provider (OpenAI / Anthropic / Gemini).
• An invalid key — the window will show the error returned by the provider; check the key and the account limits at the provider.
• The key didn't sync to the other device — synchronization works only for keys with the "sync" checkbox checked and requires a signed-in JustZix sync account.

A conflict with the Content Security Policy

The JS of rules and actions runs in the page context via a layered strategy resilient to strict Content Security Policy rules. Most pages — including large sites such as Facebook — work right away, with no configuration.

Pages with a very strict CSP (some banks, corporate sites) may block execution. For JS to run on every page, enable the "Allow user scripts" option for JustZix: open chrome://extensions, go to the JustZix details and turn on the toggle (older browsers also require developer mode). When a page blocks execution, the JavaScript window / JS Console shows a relevant message.

JustZix — manual