Chrome Extension

The A vs B Chrome extension is the bridge between your local development environment and the real website. When you run avsb dev, the extension connects to the local dev server, injects your variation code directly into the page, and gives you a popup UI to switch variations and inspect tracked events, all in real time.

What the extension does

• Detects the A vs B snippet: on every page load, the extension checks whether the A vs B snippet is present. Open the popup to see the result. A small dot at the top says "Snippet detected" or "No AvsB snippet on this page".
• Connects to the local dev server: avsb dev claims the first free port between 4400 and 4409, and the extension scans that same range until it finds it, so a second project or a leftover process on 4400 is not a problem. The connection status is shown in the extension popup.
• Injects variation code: the extension applies your local variation CSS and JavaScript to the page, overriding the production code that the snippet would normally load from the CDN.
• Hot-swaps CSS changes: when you save a CSS or SCSS file, the extension updates the injected styles in place without reloading the page.
• Reloads on JS changes: when you save a JS or TS file, the extension reloads the page so the new code runs clean from the beginning.
• Provides a popup UI: clicking the extension icon opens a panel showing the current connection status, the active experiment, a variation switcher, and a log of tracked events.
• Sets a dev cookie: the extension sets a _avsb_dev cookie to signal to the production snippet that local code is in control. This prevents the production snippet from also injecting variation code, which would cause conflicts.

Installing the extension

Install from the Chrome Web Store (the extension is currently under review, so use the direct link). If the store listing is not available yet, you can download the extension zip and load it manually.

The popup UI

Click the A vs B extension icon in the Chrome toolbar to open the popup. The popup has four sections:

• Connection status: once you turn on the Dev toggle for a tab, a dot next to it shows whether the extension found a local avsb dev server. Green means connected; grey means dev mode is on but no server has answered yet.
• Experiments on this page: every experiment the page knows about, each with a plain-English line saying what actually happened to this visit. See the status list below.
• Variation switcher: a list of all variations in the current experiment. Click any variation to switch to it immediately. This is equivalent to calling avsb.forceVariation() from the console, but faster.
• Event log: a live feed of events tracked by the snippet on the current page. Repeats of the same thing are grouped into one row. The log is cleared on page reload.

Experiment status labels

The status line tells you whether the visit is in the test, and if it is not, why not. You no longer have to guess from an experiment simply being listed.

Grouped event rows

One thing a visitor does can send several events, so the log collapses them into one row per thing that happened. A row that stands for more than one event carries an x2, x3 and so on beside its name, and the newest event in the group sets the time.

Rows are named, not numbered. An exposure reads as "Homepage hero test: Variation B exposed" instead of an experiment ID, and other events show the metric's name from your settings instead of its internal key. Where a name is genuinely unavailable, the row falls back to the raw ID and shows the full value on hover, so a row is never hidden just because it cannot be named.

How code injection works

When the extension connects to avsb dev and you activate a variation, here is what happens under the hood:

1. The extension receives the current compiled CSS and JS for the selected variation from the dev server.
2. It injects the CSS into a <style> tag in the page's <head>.
3. It executes the JS in the page's context (not inside a sandboxed content script), so it has access to window, document, and all global variables on the page.
4. It sets the _avsb_dev cookie so the production snippet knows not to inject its own version of the same experiment.

CSS hot-swap vs JS reload

CSS changes are applied by updating the injected <style> tag in place. This is instant and does not disrupt the page's state: scroll position, form values, and any JavaScript state are preserved.

JavaScript changes require a full page reload because JS runs once on page load and cannot be partially re-executed. When the extension detects a JS file change, it reloads the page automatically, which re-runs the snippet and the updated variation code from scratch.

The extension popup includes an experimental hot-inject toggle that attempts to re-run the JS without a full reload. This works for simple, idempotent scripts, but may cause unexpected behaviour for scripts that register event listeners or modify global state, so use it with caution.

Production snippet and dev mode

The production A vs B snippet always runs on the page (because it is in your site's <head>). When the extension is active and the _avsb_dev cookie is set, the snippet detects this and skips injection for the experiment being developed locally. This means:

• Other experiments (not the one you are developing) still run normally via the production snippet.
• The experiment you are developing is handled entirely by the extension.
• You see your local code, not the platform's published code.

When you close the extension popup or stop avsb dev, the cookie is cleared on the next page load and the production snippet resumes control.