Skip to content

Getting started

Build from source

Requirements: Node 22 or later, pnpm (the repo pins pnpm@12.4.1 through packageManager; use Corepack).

pnpm install
pnpm build            # all packages, the extension, then the bundle size budget check

The store build is written to apps/extension/.output/chrome-mv3. For Edge:

pnpm build:edge       # writes apps/extension/.output/edge-mv3 with the same rules as the store build

Other commands you will use:

Command What it does
pnpm dev WXT dev server for the extension
pnpm typecheck && pnpm lint && pnpm test The unit-level checks
pnpm --filter extension build:dev Dev flavour: adds http://localhost/* and leaves the player shadow root open
pnpm zip Packages the extension
pnpm schema:export Rewrites packages/schema/json/*.schema.json

Load unpacked

  1. Open chrome://extensions and switch on Developer mode.
  2. Choose Load unpacked and select apps/extension/.output/chrome-mv3.
  1. Open edge://extensions and switch on Developer mode.
  2. Choose Load unpacked and select apps/extension/.output/edge-mv3.

The manifest carries a fixed key, so the extension id is the same on every build.

Your first tour in five steps

  1. Turn on author mode. Open the extension's Options page and tick Author mode. Without it the popup's Open Authoring Studio button stays disabled and the studio does not load.
  2. Open the studio on your site. Browse to the application you want to annotate, click the toolbar icon, then Open Authoring Studio. The studio opens in the side panel. Keep the default application key (demo) or enter your own, then press Use the open site. Chrome asks for permission to run on that origin; accept.
  3. Record the steps. Choose New Walkthrough, then Record steps. Click through the page; each click and each field change adds a step. Typed values are not stored. Press Stop when done. To add a single step instead, use Pick element and click the target.
  4. Edit and check. Give each step a title and body. Fix anything the Checks panel reports; errors block publishing. Use Preview all to run the tour on the live page.
  5. Publish and see it run. Press Publish (a change note is optional), then reload the page. The tour starts according to its trigger and frequency. With the default once frequency it will not appear again after it completes; set every-visit while testing.

Tip

Set page patterns on the walkthrough so it only runs where it makes sense. Without a match the content script gate will not ask for the player on that page.

Gotchas

  • The store build holds no host permissions. Until you press Use the open site, or grant the origin from Options, nothing runs on the page.
  • The studio edits one application key at a time. The key and the site's origin are what tie content to a page; use the same key across a team or bundles will not line up.
  • The first publish writes to IndexedDB in this browser profile only. Another machine sees nothing until you export and import a bundle.