Chrome side panel
The assistant lives beside the website, so users can ask questions without leaving the page they are trying to understand.
Back to portfolio
Chrome extension case study2025 — PresentLive
A browser extension that understands any UI.
Anita Guide turns complex websites into a searchable, step-by-step assistant. It indexes the visible interface, answers natural-language questions and points users directly to the controls they need.
Smart AI assistance
Ask: how to change HTTPS port?
Plan
Click the HTTPS Port field, edit the value, then apply changes.
Search and BackupSettingsApplications
HTTP Port80
HTTPS Port443
Server Port80
POS Port80
Apply
Extension overview
The extension is a page-aware guide, not a generic chat widget.
The core idea is simple: understand the current website as a UI map, then use that map to answer where something is and how to operate it.
Local UI map
It scans headings, controls, forms, navigation and page regions into a private knowledge base stored in IndexedDB.
Natural-language search
Queries like video quality or HTTPS port are expanded, ranked and matched against the page structure.
On-page guidance
Matched controls are highlighted, scrolled into view and explained step by step so the user knows what to do next.
How it works
From messy page structure to a useful instruction.
The extension has to survive unfamiliar layouts, dynamic DOM updates and vague user wording. The flow below is the product loop.
Step 1
Index the current page
Content scripts read visible UI structure without requiring source access or app-specific selectors.
Step 2
Build resilient locators
Each element gets multiple ways back to the same target: CSS, ARIA role, text and DOM path.
Step 3
Rank the best answer
Hybrid search combines keywords, synonyms, semantic intent and confidence scores.
Step 4
Guide the user
The extension opens a plan, highlights the relevant control and tracks completion when the user reaches it.
What makes it clear
The extension explains where to go and why that answer is trusted.
Built around user intent
A user does not need to know the exact label in the product. They can ask for the thing they are trying to change, then the extension translates that intent into a concrete page target.
It is not a chatbot floating on top of a website. It understands the page structure and points to real controls.
It is not trained for one specific admin panel. The locator strategy is designed to work across unfamiliar websites.
It does not upload the customer's page data. The knowledge graph and search index stay local in the browser.
Engineering constraints
The hard parts are browser reliability, privacy and fuzzy retrieval.
Discovering interface structure without app-specific selectors or source-code access
Ranking fuzzy natural-language queries against headings, controls and page regions
Maintaining stable highlights across SPAs, dynamic DOM updates and iframe boundaries
Signals
What this project demonstrates.
A focused extension project with browser APIs, local data modeling, retrieval, DOM analysis and a UX that guides users through real product screens.
Privacy
Local
Knowledge base stays in IndexedDB without server-side indexing
Locators
4+
CSS, ARIA, text and DOM-path strategies improve resilience
Runtime
MV3
Built for Chrome's service-worker extension model
Search
Hybrid
Semantic intent plus keyword retrieval for fuzzy UI questions
Extension stack
TypeScriptChrome Extension APIService WorkerSide PanelIndexedDBesbuildRAG