How I Built a Chrome Extension That Brings AI to Every Text Field

The Problem: Context Switching Kills Productivity

As a developer, I found myself constantly switching between my browser tabs — writing code in GitHub, drafting emails in Gmail, editing documents in Notion — and copy-pasting every snippet into ChatGPT for help. This context switching wasn't just annoying; it was destroying my flow state.

I'd estimate I was losing 15-20 minutes every single hour just jumping between tabs.

So I built AIType — a free Chrome extension that puts AI directly into every text field on every website. Triple-tap the space bar, and AI is right there.

The Tech Stack

• Framework: WXT — modern Chrome Extension build tool
• LLM Integration: Custom streaming client supporting both OpenAI-compatible APIs and a free built-in backend
• Storage: chrome.storage.local for configuration and conversation history
• Content Script: Injected into all frames, with careful Shadow DOM handling

Key Technical Challenges

1. MV3 Service Worker Lifecycle

Manifest V3 service workers can be terminated after ~30 seconds of inactivity. This was tricky for maintaining long-running streaming connections. The solution was a keepalive ping system.

2. Shadow DOM Handling

Many modern sites (like Reddit, GitHub commit messages) use Shadow DOM for encapsulation. The composedPath() API was key to making triggers work across Shadow DOM boundaries.

3. Streaming Text into Input Fields

Different input types require different approaches:

• Standard elements: use setRangeText()
• ContentEditable elements (Notion): use DOM Range API
• Monaco Editor (VS Code in browser): inject via editor.executeEdits()

4. Port Management Across Frames

With allFrames: true, managing which port belongs to which frame was essential.

The @Directives System

One of the most powerful features is the @directives system. Users can type commands right in their text:

• @translate @ja — Translate to Japanese
• @summary @200 — Summarize long text
• @polish — Make text more professional
• @expand @300 — Elaborate on a brief idea
• @qa — Ask questions about the selected text

These are parsed from the input before sending to the LLM, making the whole experience feel like magic.

Zero Setup, 100% Free

No API keys. No account creation. No subscriptions. Just install and go.

Try It Out

If this sounds useful, install it for free from the Chrome Web Store:

https://chromewebstore.google.com/detail/aitype/kiphgjgjeblmjpibmeapmdamgpkjfdjj

Full disclosure: I built this extension. It's completely free with no ads, no tracking, and no subscriptions. Built with TypeScript, WXT, and a lot of coffee.