Chrome Extension

The Chrome extension is how pages get into Prototypes. Once installed, you visit any URL and capture the page with one click — the result lands as a new prototype in your workspace.

Install

From /prototypes, click Install extension in the top-right. The button takes you to the Chrome Web Store:

BuildBetter Prototype Capture on Chrome Web Store

Install in any Chromium-based browser (Chrome, Edge, Brave, Arc, etc.).

Authorize

The first time you capture, the extension opens a tab to /prototype/extension-auth to grab your BuildBetter session token. The page:

1. Reads your authenticated session
2. Posts the token back to the extension via window.postMessage with origin "buildbetter.prototype-extension.auth"
3. Shows "Extension authorized" and auto-closes

If you sign out of BuildBetter, you'll need to re-authorize the next time you capture.

Capture a Page

1. Visit the page you want

Any URL — your product, marketing site, competitor, public dashboard.

2. Click the extension icon

Opens the capture popup.

3. (Optional) name the prototype

Defaults to the page title; rename anytime later from the list page or the editor.

4. Capture

The extension grabs the page and uploads to BuildBetter. The new prototype opens at /prototype/:id.

What Gets Captured

• HTML — the full DOM. All <script> tags and inline event handlers are stripped at capture time, producing a static mockup.
• Stylesheets — every linked and inline stylesheet inlined into the manifest, so the look matches the original even offline.
• Assets — base64-encoded images and embedded resources.
• Metadata — capture timestamp, user agent, viewport dimensions, origin URL.

Capture Behavior

• Styling preserved — captured CSS is replayed faithfully; visual fidelity to the original is high.
• Links rendered, not active — clicking links in the editor's iframe is intercepted. You won't navigate away by accident.
• Forms preserved structurally — fields render correctly but values aren't auto-filled on reload. Password and payment fields specifically are not stored.
• External images stay external — image src URLs still point to the original site's CDN. If the original removes the image, your prototype's image will break.

What Doesn't Get Captured

• JavaScript — stripped at capture time. Captures are visual mockups.
• Animations — anything driven by JS won't run. Pure CSS animations and transitions are preserved.
• Live data — what's on the page is what you'll see. Re-capture if the page changes.
• Auth-walled content beyond what you saw — the extension captures what your browser actually renders. If a page requires you to be logged in, log in first, then capture.

Re-Capturing

To get a fresh snapshot of the same page later:

• Capture again as a new prototype — preserves the old one for comparison.
• Or capture and clone — from /prototypes, click New prototype → From existing capture and start a fresh iteration with the original capture as the base.

Security Notes

The extension uses window.postMessage with strict origin validation to hand off your session token, so a malicious site can't intercept the handoff. Captured HTML and assets are stored server-side and only visible to your workspace.