← All posts

Tutorials

Build a rule with AI Helper — a step-by-step walkthrough

17 May 2026 · by JustZix Team

You know what you want — "hide that newsletter popup" — but you don't want to dig through the DOM, write a selector and guess at !important. AI Helper does the digging. This is a concrete, click-by-click walkthrough of building one real rule, from a plain-English request to a saved rule that survives reloads.

Before you start

AI Helper needs an API key from one of three providers — OpenAI, Anthropic or Gemini. You add it once in Settings → AI Helper; the key lives in chrome.storage.local and never touches the page. If you haven't done that yet, the setup guide walks through it in two minutes. For this walkthrough we assume a key is already in place.

The goal

We'll pick a common annoyance: a site that throws a full-screen newsletter modal at you a few seconds after the page loads. We want it gone — every visit, automatically. By the end we'll have a saved rule scoped to that one domain.

Step 1 — open AI Helper on the page

Navigate to the offending site and wait for the popup to appear (so the elements are in the DOM). Then open AI Helper with Ctrl+Alt+\. You can also use the button in the popup widget or the right-click context menu — all three open the same thing: a floating, draggable, resizable window inside the page, scoped to this tab.

Step 2 — describe the goal

Type what you want in plain language. No selectors, no jargon:

Hide the newsletter popup that appears on this site
a few seconds after the page loads.

AI Helper does not jump straight to code. The system prompt enforces a workflow: ask for details → inspect the page → test in a TEMP window → ask you to verify → only then persist. So the first reply is usually a clarifying question — for example, whether you also want the dark overlay behind the modal removed, or just the modal box itself. Answer it; the more precise you are, the better the selector.

Step 3 — watch it inspect the page

Once it has enough to go on, AI Helper inspects the live page. You'll see tool-call chips appear in the conversation — each chip is one action the model took:

• query_page — it runs a CSS selector against the page and gets back the matching elements plus their HTML. This is how it finds the actual modal container.
• list_structure — it reads your existing folders, groups and rules, so it knows where a new rule would fit and avoids duplicating something you already have.

The model receives the current page context — URL, title and an HTML fragment — so it isn't guessing. It narrows down from a broad selector to the specific container that holds the popup.

Step 4 — see the code tested in a TEMP window

Here's the part that makes this trustworthy. AI Helper does not write code into a saved rule. It calls open_temp_pane to open a TEMP CSS window — the same kind of in-tab developer window you'd open by hand — and then set_temp_pane_code to drop its proposed CSS into it. You watch the code appear, live, and the page reacts in real time:

/* Proposed by AI Helper — shown in a TEMP CSS window */
.newsletter-modal,
.newsletter-modal__overlay {
  display: none !important;
}
html, body {
  overflow: auto !important;
}

The popup vanishes in front of you. Nothing has been saved yet — this is a sandbox. If the selector is wrong, you see that immediately too, and you can tell AI Helper "the overlay is still there" or "that hid the footer as well". It re-inspects and adjusts.

Step 5 — verify it actually worked

Take a moment. Reload the page if you like — the TEMP window persists for the tab. Check that:

• the popup is gone;
• page scrolling works (popups often lock body scroll);
• nothing else broke — no missing buttons, no collapsed layout.

If anything is off, keep the conversation going. This back-and-forth is the point — you're tuning the rule together before it ever becomes permanent.

Step 6 — confirm, and the rule is created

Happy with it? Tell AI Helper to save it. It will call create_rule — and this is where a separate, explicit confirmation appears. The extension shows you exactly what it's about to create: the rule name, the URL pattern (it will suggest the current domain, e.g. https://example.com/*), and the CSS body. Nothing is written to your setup until you click confirm.

If the rule needs a new folder or group to live in, those are separate confirmations too — create_folder and create_group each ask on their own. AI Helper can never silently restructure your setup.

Step 7 — done

Click confirm and the rule is real. It shows up in your folders/groups/rules hierarchy like any hand-made rule. Reload the site: the popup is gone, automatically, on every future visit. You can open the rule later in the normal editor to tweak the CSS, change the URL pattern, or disable it.

What you actually did

You described a goal in one sentence. AI Helper inspected the page, found the right selector, proved it worked in a window you could see, and saved a rule only after you said yes. The whole loop took maybe two minutes — and you never wrote a selector or opened DevTools.

See also

• AI Helper tests in TEMP windows before saving — why the test-then-confirm model matters.
• How AI Helper inspects the page — a closer look at the page-inspection tools.
• The agentic tool-calling workflow — the up-to-8-step loop behind the chips.

Download JustZix — free, no account, Chrome 100+ (also Edge, Brave, Opera, Vivaldi). Add an API key and build your first rule by just asking for it.