In the browser
Content scripts on each marketplace, the side panel, and a
service worker. State lives in chrome.storage, so
the worker can stop and restart without losing the session.
Service manual · v3.1.0
Under the hood.
How it’s built.
Car Analyst AI is a Chrome extension that reads a used-car listing, sends the details to an AI model, and answers questions about that specific car. This page walks through the moving parts, the problems that took the most care, and how this website was made.
Specifications
The window sticker.
New cars in the US carry a window sticker that lists what’s inside. Here’s the one for Car Analyst AI.
The request path
From listing
to answer.
What happens between clicking Analyze and reading the verdict. Each step names the file where it lives.
-
Read the listing
A content script pulls the price, mileage, VIN, and trim. Embedded page data comes first, then a site adapter, then JSON-LD to fill gaps.
vehicleAnalyzer/extractor.js -
Show the car
The side panel asks the page for the extracted details and renders the vehicle card, including the VIN and, on Manheim, the condition report.
sidepanel/sidepanel.js -
Build the prompt
The service worker attaches a vehicle snapshot, picks one of six prompt modes, and sends the first message plus the latest 29.
background/background.js -
Check the quota, call the model
A Cloud Function checks a 24-hour window in Firestore, then calls Gemini. Failed calls retry twice with backoff.
functions/index.js -
Answer, then dig deeper
The reply lands in the panel. Recalls and complaints load from NHTSA in parallel, and repair estimates arrive as JSON.
sidepanel/vehicleHistory.js
In Google Cloud
One HTTPS function proxies every AI call, so the API key never ships in the extension. Firestore stores usage counts only.
Public data
NHTSA’s recalls and complaints APIs, queried by make, model, and year, straight from the extension.
Engineering notes
The parts that
took real care.
Six problems that shaped the code, how each one is handled, and where to find it.
| Problem | Why it’s hard | Approach | In the code |
|---|---|---|---|
| Nine marketplaces, nine different pages | Every site lays out a listing differently. Some hide details in shadow DOM or behind auto-generated class names. | Layered extraction with a dedicated adapter per site. Each field records where it came from and how confident the match is, and missing fields are reported. The Cars.com adapter reads through shadow DOM. Manheim condition severity is read from swatch colors. | vehicleAnalyzer/extractor.js |
| Keeping the chat about this car | Shoppers jump between listings. An answer about the previous car is worse than no answer. | Every message carries a snapshot of the vehicle, and the prompt uses the newest one. Running Analyze resets the chat. Run IDs discard async results that arrive after the shopper has moved on. | content/chat.jsbackground/background.js |
| Opening the side panel from the page | Chrome opens a side panel only in direct response to a user gesture. Any async step before the call loses that permission. | The floating button on the listing messages the service worker, which opens the panel synchronously inside the gesture. Panel state is kept per window in session storage and broadcast to every view. | content/toggle.jsbackground/background.js |
| A service worker that can stop at any time | Manifest V3 shuts down idle service workers, so anything held in memory can disappear mid-session. | State lives in extension storage, not in variables. Context writes go through a promise chain, so overlapping updates can’t overwrite each other. The error log is capped and de-duplicated. | background/background.js |
| Free limits without forcing sign-up | Each AI call costs money, but asking for an account before the first answer drives people away. | Signed-in users get a SHA-256-hashed Google ID, and everyone else gets an anonymous one. The Cloud Function keeps a 24-hour sliding window of timestamps per ID and returns a 429 after 100 calls. | services/identityService.jsfunctions/index.js |
| Numbers a chat model can’t get wrong | Repair estimates need parts and labor figures the panel can total, but the model returns free text. | A JSON-only prompt mode, tolerant parsing of the reply, and totals recomputed in the panel instead of trusting the model’s arithmetic. | content/chat.jsvehicleAnalyzer/formatter.js |
This website
Plain HTML.
No framework.
caranalyst.ai is plain HTML, CSS, and JavaScript, served as static assets from a Cloudflare Worker. The interactive demo runs entirely in the page.
- An interactive demo, not a video
- The landing page demo has real ARIA tabs with arrow-key support and a chat that answers from a local script. No message ever leaves the browser.
- Motion that explains
- A scan sweeps the listing photo, the price estimate rolls in like an odometer, and the closing gauge does one ignition sweep. Each plays once and stops.
- Respects reduced motion
-
With reduced motion on, every animation is skipped and figures
appear in their final state. Rolling numbers use an
aria-hiddencopy, so screen readers get the real value. - Fast first paint
-
The hero image is a 105 KB WebP, preloaded with
fetchpriority="high". Gallery images load lazily, and the page’s own script is two small files with no framework. - An engraving drawn in code
- The car at the top of this page is drawn live on a canvas from a 42 KB data map, made from the demo photo with OpenCV. Line spacing adapts to each screen.
- Product art from real screens
- Gallery images were generated with ChatGPT image generation from screenshots of the current extension. The prompts are kept with the assets.
On the roadmap
What’s next.
Where the extension goes from here.
- Four more marketplaces
- Adapters for IAAI, Copart, Bring a Trailer, and TrueCar, built on the same layered extractor.
- Streaming answers
- Show each reply as it’s written instead of waiting for the full response.
- Adapter regression tests
- Run every site adapter against saved listing pages, so a marketplace redesign is caught before shoppers notice.
See it on a real listing.
Free to install. No account needed to analyze.