Instant Grammar Check

Project Story: Instant Grammar Check

About the Project

The Instant Grammar Check extension is a proofreading tool designed for modern web use, focused on speed, privacy, and performance. Unlike traditional grammar checkers that send user input to remote servers for processing, this extension leverages the experimental Chrome Proofreader API to perform all natural language processing directly on the user's device. This approach ensures corrections are near-instant and guarantees that the user's text never leaves their browser.

The extension provides a simple, clean popup interface where users can paste or type text. It returns the text with errors highlighted, and allows the user to hover over errors to see the type of mistake and the suggested correction, all powered by the underlying Gemini Nano model.

The Inspiration

My inspiration was born out of a common frustration: the trade-off between convenience and privacy when writing online. We rely heavily on grammar tools, but using them often means sacrificing data security and tolerating a slight, noticeable latency while text is uploaded, processed, and returned.

When I learned about the new class of Built-in AI APIs in Chrome, specifically the Proofreader API, it presented a unique opportunity to solve this problem. The idea was simple: harness powerful on-device AI to eliminate server latency and guarantee complete data privacy. The goal was to build a tool that feels like a native part of the browser, not a third-party service.

How I Built It

The extension was built using the modern Manifest V3 architecture. The core structure comprises:

manifest.json: Configured to request the necessary permissions and enabled the experimental Proofreader API feature.

popup.html: A simple, Tailwind-styled UI featuring an input textarea and an output div.

popup.js: This file contains the primary application logic.

The key technical steps involved:

API Integration: Checking the API’s availability using window.Proofreader.availability() and then asynchronously instantiating the proofreader session with await window.Proofreader.create({ expectedInputLanguages: ["en"] }).

Correction Parsing: The proofread(text) method returns a ProofreadResult object containing the corrected string and an array of ProofreadCorrection objects.

Visual Feedback: The most challenging part of the UI was using the startIndex and endIndex from the correction objects to splice the original text. I created a function that iterates through the corrections, dynamically injecting elements with a custom CSS class (.correction-error) and a rich title attribute (tooltip) into the output stream, making the errors clear and interactive.

Challenges and Lessons Learned

The primary challenge faced was dealing with the inherent constraints of an experimental, hardware-dependent API. I initially encountered the error: “The device is not eligible for running on-device model.”

Debugging this revealed a crucial lesson about client-side AI: local resource provisioning is critical. Unlike traditional web APIs, the Proofreader API requires the user's system to meet specific, high-end hardware requirements (e.g., sufficient RAM and storage) for the Gemini Nano model to be downloaded and activated. This forced me to design robust error handling and clear user messaging, informing the user when the feature is unavailable.

Ultimately, this project taught me valuable lessons in Manifest V3 development, asynchronous API handling in extensions, and the practical implementation of powerful, privacy-preserving machine learning models at the browser level.

Built With

• api-/-platform:-chrome-proofreader-api-(experimental-built-in-ai-api)-ai-model:-gemini-nano-extension-architecture:-manifest-v3-front-end-languages:-html
• framework:
• javascript
• styling
• tailwind