Building an AI Writing Assistant Firefox Extension (Context Menu + Text Replacement)

#firefox #webextensions #ai #productivity

I built an AI Writing Assistant for Firefox because I kept switching between browser tabs, copying text into ChatGPT, waiting for it to load, and then switching back. There had to be a better way.

What It Does

AI Writing Assistant adds a right-click context menu to any text field on any website. Select text, right-click, and choose:

Rewrite — Improve clarity and flow
Summarize — Condense long content to key points
Expand — Add more detail to a brief draft
Fix grammar — Clean up mistakes
Change tone — Professional, casual, or formal variants

The result replaces your selected text inline — no switching tabs, no copy-paste.

Use Cases

This is for everyday writing, not developers. The use cases that come up most in user feedback:

Remote workers drafting Slack messages and emails. "I need to push back on this timeline" can become "I'd like to discuss adjusting the timeline" with one click.

Students revising essays. Select a paragraph, hit Expand, and get a longer version to work from.

Non-native English speakers cleaning up grammar without stopping their workflow.

Anyone writing who just wants a second opinion on a sentence without leaving what they're doing.

How It Works

The extension uses the browser's native context menu API:

// manifest.json
"permissions": ["contextMenus", "activeTab", "storage"]

// background.js
browser.contextMenus.create({
  id: 'rewrite',
  title: 'Rewrite with AI',
  contexts: ['editable', 'selection']
});

browser.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === 'rewrite' && info.selectionText) {
    const result = await callAI(info.selectionText, 'rewrite');
    await browser.tabs.sendMessage(tab.id, { action: 'replaceText', text: result });
  }
});

The content script handles text replacement:

// content.js
browser.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'replaceText') {
    const active = document.activeElement;
    if (active.isContentEditable) {
      document.execCommand('selectAll', false, null);
      document.execCommand('insertText', false, msg.text);
    } else if (active.tagName === 'TEXTAREA' || active.tagName === 'INPUT') {
      const start = active.selectionStart;
      const end = active.selectionEnd;
      active.value = active.value.substring(0, start) + msg.text + active.value.substring(end);
      active.setSelectionRange(start, start + msg.text.length);
    }
  }
});

Privacy Considerations

The AI calls go through a minimal proxy that strips identifiers before forwarding to the model. No text is stored. The extension doesn't have access to your history or other tabs — only the text you explicitly select and the activeTab permission.

Limitations

The extension works on standard text fields and contenteditable elements. It does not work on:

Canvas-based editors (some code editors)
iframes with cross-origin restrictions
Google Docs (which uses its own rendering layer)

Free to Use

No account, no subscription. Just install and it works:

AI Writing Assistant on Firefox AMO

Other extensions in the same productivity set: full list here.

DEV Community