Skip to main content
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.