TONEQUILL
DESIGN · BUILD · SHIP
JAVASCRIPT · REACT · CHROME APIS · AI/LLM
AI Chrome extension development case study: a React panel, Chrome content scripts and context-aware comment suggestions for LinkedIn. A GrowYourWebs product, designed, built and shipped by Bharat Prabhat Sharma.
COMMENT SUGGESTIONS WITHOUT LEAVING THE FEED.
The design brief was to help a person draft a relevant reply while keeping the original post in view. Copying text into a separate writing tool interrupts that task.
ToneQuill reads the post you're looking at and proposes context-aware comment suggestions inside LinkedIn, so you stay in the feed and keep your own voice.
CONTENT SCRIPT
Injects into LinkedIn's feed, detects the post in view and reads its text without leaving the page.
CONTEXT → PROMPT
Post content is shaped into a prompt so suggestions match the topic and tone instead of generic replies.
AI SUGGESTIONS
An LLM returns comment options; the user picks, edits and posts in their own voice.
REACT PANEL
A lightweight React UI on Chrome extension APIs — fast to open, built for daily use.
[ 200 OK ]
SHIPPED.
- [ LIVE ON CHROME WEB STORE ]
- [ RUNS INSIDE LINKEDIN ]
- [ JS · REACT · CHROME APIS · AI ]
- [ PRIVACY POLICY ↗ ]
AI Chrome extension development: the ToneQuill case study
ToneQuill, formerly Engage AI, is a GrowYourWebs product rather than a client commission. Bharat Prabhat Sharma designed, built and shipped the extension. This case study follows the browser interface, AI suggestion workflow and editing controls in the shipped product.
The workflow we built
The extension reads the text of a LinkedIn post and uses that context to request comment suggestions from a language model. A React panel presents the draft in the feed. The user can adjust the tone, edit the wording and decide whether to post it.
Why keep the interface in the feed?
Moving post text into a separate tool breaks the commenting task into several steps. The content script and embedded panel keep the source post and draft together. The screenshots show the draft and tone menu in that context, rather than a standalone chat screen.
AI output needs an editing step
A model-generated comment is a draft, not a verified statement about the user’s views. The interaction leaves selection and editing with the person using it. For a similar product, the brief should define the source content, allowed actions and review step before choosing a model or interface.
What this project demonstrates
The delivered work combines Chrome extension APIs, a content script, a React interface and an AI-backed suggestion flow. The public store listing and demo show the shipped product. Provider configuration, permissions and distribution requirements for a new extension need their own review; LinkedIn’s interface can change over time.
Questions before you start
Is ToneQuill a client project?
No. It is a GrowYourWebs product, published on the Chrome Web Store. The demo and store listing provide a concrete example of the product design and extension development work.
Can this approach be used for a different browser workflow?
A similar extension may be suitable when a user needs an action alongside existing page content. Feasibility depends on the site, permissions, data handling and platform terms. Share the workflow for a separate technical scope.
Do you offer the design and API work separately?
Yes. UI/UX design and API integration can be scoped individually, or included in a larger application build. The related service pages explain the deliverables and what to prepare for an estimate.