Skip to content
ComStack

Chrome extension overview

What the extension does

The ComStack Chrome Extension captures any webpage and saves it as a structured draft to your ComStack project. The extension is a thin client: it captures page HTML and sends it to the server for AI-powered extraction. The extracted content lands as a draft, ready to review, edit, and publish. It runs in Chrome’s side panel alongside your browser — you don’t leave the page you’re viewing.

Why the extension instead of a server-side importer

Most import tools work by sending a URL to a server, which then fetches the page on its own. That breaks the moment a page sits behind a login, a paywall, or bot protection.

The extension works differently. It reads the page from your own browser, exactly as you already see it — so it captures content that server-side importers cannot reach:

  • Pages behind a login you’re already signed into
  • Listings inside a portal or dashboard
  • Anything that blocks automated crawlers

Because it uses your browser session, it works on those pages without any special configuration.

Architecture

The extension has two components:

Service worker — opens the side panel when you click the extension icon. No persistent state or background processing.

Side panel — a single-page application with four view states:

  1. Auth — signs in with Google via Chrome’s built-in OAuth2 flow. The resulting credential authenticates all API calls.
  2. Setup — workspace containing project and template selectors, an optional instructions field, the Extract button, and the unpublished drafts list. The extension automatically suggests the right template for the current page and detects if the page has already been imported.
  3. Loading — spinner with progressive status text as the extraction runs.
  4. Review — the <tf-document-editor> web component with template-driven metadata fields and a Milkdown WYSIWYG markdown editor.

Extraction flow

When you click Extract:

  1. The extension reads the active tab’s URL and HTML
  2. Sends the HTML, template, and any user instructions to the server for AI extraction
  3. The server returns structured markdown and metadata
  4. The extension fetches images from the page, uploads them to the CDN, and substitutes permanent URLs in the markdown
  5. The result renders in the review editor for inspection and editing
  6. Clicking Save stores it as a draft in your project

User instructions — Text entered in the instructions field is appended to the extraction prompt, letting you guide the AI: “Focus on the property specs and skip the navigation”, “Extract the team members only”, and so on.

Document editor (<tf-document-editor>)

The review editor renders:

  • Template-driven metadata form — fields from the selected template’s field definitions. Supports string, number, boolean, and array types.
  • is_faq toggle — marks the page as a FAQ, which adds it to the llms.txt AI index and the voice agent fast path.
  • Advanced section — sitemap priority, change frequency, sidebar group assignment, label, and order.
  • Sidebar group dropdown — populated from your project’s sidebar groups, sorted by order with locale-translated labels. If the active template suggests a group that doesn’t exist yet, a create banner appears with a one-click “Create it” button. A “Create new group” option at the bottom of the dropdown opens an inline form — label and group ID, auto-slugified from the label.
  • Milkdown WYSIWYG editor — markdown rendered as rich text. Mermaid diagrams are previewed as live inline SVG as you type.

AI enrichment

After saving, optional AI enrichment runs template-defined post-processing on the draft — adding computed fields, enriching descriptions, or extracting structured data the initial extraction couldn’t infer from raw HTML. For real estate listings this includes reading property photos to add view descriptions, surface materials, and finish details. Enrichment runs asynchronously; the drafts list shows an “enriching” status while it runs.

Duplicate detection

When you open a page the extension has already imported, a card appears showing the existing draft with an “Open Draft” link. Re-extracting replaces the existing draft rather than creating a duplicate. The check runs on every panel open and tab switch.

Unpublished drafts list

The Setup view shows all documents currently in draft, enriching, or processing state. Each item shows a status badge and links back to the editor. The list polls every 5 seconds when any item is still processing.

The side panel footer links navigate to the live site via URL hash fragments:

ButtonEffect
PublishOpens the draft dashboard on the live site
Open (draft)Opens the edit mode for a specific draft page
New PageOpens a blank draft in edit mode

Hash fragments avoid routing conflicts with the static site builder — the page loads normally, then the client processes the hash.

When the project uses section-based navigation, the sidebar group also determines which top-nav section a page appears under. Picking a sidebar group in the editor implicitly picks the section — there is no separate section selector.

Permissions

PermissionPurpose
sidePanelChrome Side Panel API
identityChrome OAuth2 flow for Google sign-in
activeTabInject the capture script in the active tab
tabsDetect URL changes for duplicate detection
scriptingExecute the HTML capture script
storagePersist project/template selections and sidebar group cache
<all_urls>Fetch images from any domain for CDN upload

Authentication

The extension uses Firebase Auth through Chrome’s built-in OAuth2 flow — not API keys. The Google token exchanges for a Firebase credential; the Firebase ID Token authenticates all API calls. This is the same auth model used by the live voice agent endpoints, separate from the MCP OAuth model.

Installation

The extension is distributed as a zip file from the Connectors section at account.comstack.ai. To install: download the zip, extract it, open chrome://extensions/, enable Developer mode, and load the extracted folder as an unpacked extension.

Last updated: