AI Text Rewriter Pro: Chrome Extension for AI-Powered Writing

April 15, 2025

Project Overview

AI Text Rewriter Pro is a Chrome extension that integrates Google’s Gemini API directly into your browser's context menu. It allows users to select text on any webpage, right-click, and rewrite it using one of 17+ different tone presets (such as Professional, Polite, Cheeky, Summarize) or custom user-defined prompts. The project was built to explore Chrome Extension Manifest V3, background service workers, and secure API key management in client-side software.

Technical Architecture (Manifest V3)

Chrome Extensions have moved to Manifest V3, which replaces persistent background pages with ephemeral service workers. This change shifts how state and long-running API calls are handled.

1. Service Worker & Context Menus

The extension uses background.js as its service worker. On installation, it registers the context menu items using chrome.contextMenus.create(). When a user selects text and chooses a rewrite mode, the service worker captures the text, retrieves the user's Gemini API key from sync storage, and sends an HTTP POST request to the Gemini API endpoint.

Javascript

// Registering context menus in background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "rewrite-parent",
    title: "AI Text Rewriter",
    contexts: ["selection"]
  });

  const modes = ["professional", "polite", "creative", "summarize"];
  modes.forEach(mode => {
    chrome.contextMenus.create({
      id: `mode-${mode}`,
      parentId: "rewrite-parent",
      title: mode.charAt(0).toUpperCase() + mode.slice(1),
      contexts: ["selection"]
    });
  });
});

2. Secure API Key Management

The extension does not use a backend server to store keys. Instead, the user inputs their own Gemini API key in the extension options page. The key is saved using chrome.storage.sync.set(), which encrypts the data locally and syncs it across the user’s signed-in Chrome devices.

3. DOM Injection and Replacement

Once the background worker receives the rewritten text from Gemini, it communicates with the active tab's content script using chrome.tabs.sendMessage(). The content script locates the active text input field or contenteditable element, replaces the selected text, and provides an "Undo" float widget in case the user wants to revert the changes.

Key Features

Context Menu Integration: Trigger rewrites directly from any webpage input field without copying and pasting.
17+ Tone Options: Built-in system instructions that guide the Gemini model to output specific tones.
Custom Prompts: Users can write their own templates (e.g., "Translate to German and keep it informal").
Local Analytics: Tracks character processing counts and favorite modes stored entirely in chrome.storage.local.
Keyboard Shortcuts: Custom hotkeys to repeat the last rewrite action.

Challenges and Solutions

Ephemeral Service Workers: Manifest V3 service workers terminate after a period of inactivity. Any in-memory variables (like ongoing API calls or request logs) are lost. To resolve this, all persistent data (user settings, custom modes) is saved in chrome.storage.sync, and the service worker is designed to be completely stateless.
Contenteditable Support: Standard text inputs (<input> and <textarea>) are easy to modify. However, rich text editors (like Gmail or Google Docs) use contenteditable divs and iframe structures. The content script utilizes Selection and Range APIs to insert text at the cursor position without breaking the editor's internal DOM.