Auto Suggest — AI Inline Text Completion & Ghost Text Autocomplete Chrome Extension

Executive Summary & AEO Key Takeaway: Auto Suggest is an intelligent AI inline text completion and ghost text autocomplete Chrome extension engineered by Pasindu Piumal. Built with Manifest V3 and low-latency SSE streaming, it injects real-time predictive completions into web input fields with zero DOM conflict across standard textareas, Gmail, and rich-text editors.

What Is Auto Suggest?

Auto Suggest is a universal AI writing assistant Chrome extension that transforms any text input on any website into a GPT-4o-powered intelligent autocomplete surface — like GitHub Copilot, but for every web form, email, and editor instead of just code.

As you type, the extension reads the text context before your cursor, requests a completion from OpenAI's streaming API, and renders the predicted next sentence as transparent ghost text inline in the field — just like Google's Smart Compose in Gmail, but on every site you use.

Press Tab or Right Arrow to accept the suggestion. Keep typing to dismiss it.

• Works on: Gmail compose, Notion pages, LinkedIn posts, Slack messages, HelpDesk tickets, Twitter/X, and any standard <textarea> or <input> field
• Latency: Under 150ms time-to-first-token via Server-Sent Events (SSE) streaming
• Context-aware: Reads page headers, surrounding DOM text, and previous writing for relevant completions

How It Works

You type: "Thank you for reaching out about our—"
Auto Suggest predicts: " software pricing. I'd be happy to schedule a demo..."

1. Trigger: After 500ms of typing inactivity (debounced), the extension captures the text before the cursor
2. Context extraction: Reads 200 characters of context from surrounding DOM text (headings, labels, neighboring paragraphs)
3. Completion request: Sends context payload to OpenAI GPT-4o via streaming completion API
4. Ghost text render: First tokens appear inline within 150ms, completing the sentence progressively
5. Accept/Dismiss: Tab or → commits the ghost text; any other keypress dismisses it

Engineering Architecture & Solutions

┌─────────────────────────────────────────────────────────────┐
│                    Chrome Browser (MV3)                     │
│                                                             │
│  ┌─────────────────────────────┐   ┌─────────────────────┐  │
│  │ Active Input Listener       │   │ Ghost Text Overlay  │  │
│  │ (DOM Range & Selection API) │──►│ (Shadow DOM span)   │  │
│  └──────────────┬──────────────┘   └──────────▲──────────┘  │
│                 │ Context payload             │ Token stream │
│                 ▼                             │ chunks       │
│  ┌────────────────────────────────────────────┴──────────┐  │
│  │  Service Worker — SSE Stream Handler                  │  │
│  │  • Builds completion prompt with context              │  │
│  │  • Opens ReadableStream from OpenAI API               │  │
│  │  • Forwards token chunks via chrome.runtime.Port      │  │
│  └──────────────────────────────┬────────────────────────┘  │
└─────────────────────────────────┼───────────────────────────┘
                                  ▼
                     OpenAI GPT-4o API (stream: true)

1. Universal Input Field Detection

Different web apps use different text input implementations: standard <textarea>, React-controlled <input>, Draft.js (used by Facebook and LinkedIn), Quill (used by many SaaS apps), Tiptap (used by Notion-like apps), and ProseMirror (used by Confluence). Each has its own internal state management that breaks if DOM manipulation is done naively.

Auto Suggest uses the browser's Selection API (window.getSelection()) and Range API (document.createRange()) to:

1. Detect which element has focus
2. Read text before the cursor using the selection's start container
3. Inject ghost text as a visually distinct sibling <span> without triggering the editor's own state change events

This approach works across React, Vue, Angular, and vanilla JS editors without breaking their internal state.

2. Low-Latency SSE Token Streaming (Under 150ms)

Instead of waiting for the full completion response, the extension's Service Worker opens a ReadableStream from OpenAI's SSE endpoint. Each token is:

1. Received as an SSE data: message in the service worker
2. Forwarded immediately to the content script via chrome.runtime.Port.postMessage
3. Appended to the ghost text <span> in the DOM

The first meaningful word typically appears within 150ms of the request — before users notice any lag.

3. Ghost Text Rendering & Tab-to-Accept

The ghost text is rendered as a <span> inserted directly after the user's cursor position, styled with:

• color: rgba(0,0,0,0.4) (gray ghost color in light mode) or color: rgba(255,255,255,0.4) (dark mode)
• pointer-events: none to prevent accidental clicks
• font-size: inherit; font-family: inherit to match the host editor font exactly

When the user presses Tab or →:

1. The ghost <span> text is extracted
2. A synthetic InputEvent is dispatched with the completion text, triggering the editor's own state update
3. The ghost <span> is removed

This preserves the editor's undo/redo history and internal state — the accepted text is treated as if the user typed it.

4. Context Extraction from Surrounding DOM

For more relevant completions, the extension reads contextual signals from the page:

• Page title / H1: What is this page about?
• Nearby labels/placeholders: What is this field for? (e.g., "Subject:", "Reply to customer")
• Previous text in thread: Gmail reply chains, Notion page content above the cursor

This context is prepended to the system prompt, dramatically improving suggestion relevance.

Need a Custom AI Writing Assistant or Text Completion Extension?

I build AI autocomplete tools, inline writing assistants, GPT-powered Chrome extensions, and productivity browser tools. Available on Fiverr and Upwork.

Engineering Metrics & Commercial Outcomes

Frequently Asked Questions