P-05 / Case study
AI Message Refiner
A Chrome extension that polishes a message with AI right before you send it.
- Project type
- Browser extension
- My role
- Designer & developer
- Timeline
- 2026
- Context
- Own product · open source
- Status
- Open source
- Technologies
- JavaScript
- Chrome Extensions (Manifest V3)
- Groq
- OpenAI
- Gemini
- OpenRouter
- Mistral
- Anthropic
01
The challenge
Copying a message into a chatbot, rewriting it and pasting it back breaks your flow. The refinement should happen where you are already typing.
02
My role
Designer & developer. AI Message Refiner adds a small floating button next to the send button on WhatsApp Web, Messenger, Facebook and other chat sites. One click rewrites the draft using the AI provider and API key the user chooses.
03
The approach
- 01Injected a content script that finds the message box on each supported site and places a floating action next to the send button.
- 02Moved all AI calls into the Manifest V3 service worker so API keys never touch the page context.
- 03Let users bring their own key and provider, stored locally in extension storage.
Development process
- Think
- Design
- Build
- Test
- Deploy
- Improve
04
Architecture overview
A simplified view of how the system is organised. Internal infrastructure details are intentionally left out.
- Content scriptDetects the chat input per site, injects the button and replaces the text
- Service workerReceives the draft and calls the selected AI provider
- PopupSettings UI for provider and API key
- StorageKeys and preferences in chrome.storage
05
Key features
Works where you type
Floating refine button on WhatsApp Web, Messenger, Facebook and other supported sites.
Bring your own model
Supports Groq, OpenAI, Gemini, OpenRouter, Mistral and Anthropic APIs.
Privacy-minded
Only the message text is sent to the provider the user configured.
Feedback
Toast notifications for success, errors and missing configuration.
06
Challenges
- Changing DOMs
- Chat apps re-render constantly, so input detection has to be resilient to markup changes.
- Key safety
- Keeping API calls in the service worker rather than the page context.
07
The result
Source code is public on GitHub and the extension is usable by loading it unpacked in Chrome.
No metrics are published here unless they have been verified.
08
What I learned
“Browser extensions live inside other people’s products. Building one taught me to write defensive DOM code and to respect the host page — do one small thing and get out of the way.”
— Rupesh Dahal