An interactive tutorial walks you through your first rule set
A new user of the extension now gets more than an intro paragraph in the manual — an interactive tutorial that highlights interface elements in turn and walks you through creating your first project step by step. It works both in the edit panel and directly on the page you visit, in eight languages, with copyable code snippets. Here is what we shipped in v3.1.
Two engines, one goal
Under the hood there are two cooperating modules. The first — lib/onboarding.js — runs in the JustZix edit panel, walks you through the folder → group → rule-set tree and explains the CSS / JS / Actions tab layout. The second — lib/onboarding-front.js — lives in the content script, so it can highlight elements directly on an ordinary web page. Together they cover the whole story: from concept to a working rule.
We picked the Glow visual variant — a glowing ring around the target, without dimming the page. That is the difference from a typical "spotlight" overlay: you still see the whole page and your own content; the highlight only points to where attention should focus.
19 steps: "Your first project"
The default scenario walks you through a complete example: creating a catalog (a folder for related rules), opening the "default" group, adding a rule set with simple CSS and JS (that really do change the page), wiring up an action bar and adding a toggle action with its own JS code. Each step has a highlighted target plus a bubble with title, short description and "Back / Next" navigation. Interactive steps (e.g. "click the Add rule set button") only move forward once the action is done — you cannot skip them blindly.
The CSS and JS snippets that appear in bubbles carry a Copy button — paste them straight into the editor, no retyping. Once you finish the scenario, you have a complete, working rule set in your tree to extend later.
Tutorial launcher
The tutorial opens automatically on first launch of the extension — as a launcher (tutorial centre) from which you choose a scenario. Later you reach it from the settings menu (Settings → "Tutorial"). The same centre will host upcoming scenarios as we add them over time — when a new one ships, the user sees it in the same place, no hunting required.
Eight languages, no emoji, the Esc key
The entire engine and scenario are translated into eight languages (PL, EN, DE, ES, FR, IT, RU, ZH) — the full text catalog lives in lib/i18n.js under the onboard.* keys. Icons come only from the JustZix set (JZ_ICONS): a target icon for the scenario, an arrow inside the bubble, a "Copy" icon. No emoji, no external typefaces — the UI stays consistent with the rest of the extension.
The Esc key closes the tutorial bubble and the launcher. A click outside the bubble or on the close button also exits. Progress is saved in chrome.storage.local (jzOnboarding.frontCompleted) — if you stop halfway, the tutorial will not pop up again on every restart.
What is next
The first scenario is just the start. The launcher is ready for more — we are planning paths for advanced features: the AI Helper, TEMP windows, slider / toggle3 actions, and the edit panel in a separate window under Ctrl+Alt+I. Send us a note via the contact form telling us which topic you want to see as the next tutorial.
See also
- CSS and JavaScript injection — what the rules you create in the tutorial actually are
- On-page windows — the developer windows described
- JustZix vs. Tampermonkey — why a migration may be worth considering
Install JustZix — your first project takes less than 15 minutes.
Rate this post
No ratings yet — be the first.