Claude Google Docs Editor

A Chrome extension that lets Claude review Google Docs and suggest edits like a human collaborator. The extension uses the Google Docs API to read document content, sends it to Claude for analysis, and can highlight suggestions directly in the document.

Features

• Document Analysis: Analyzes Google Docs content for grammar, clarity, conciseness, and tone
• Inline Highlighting: Highlights suggested changes directly in the document
• Comments: Adds Google Docs comments explaining each suggestion
• Chat Interface: Discuss suggestions or ask questions about your document
• Selection Support: Select text and ask Claude about specific passages
• Multi-Tab Support: Works with Google Docs' tab feature (multiple tabs within a single document)

Architecture

google-docs-claude-editor/
├── manifest.json              # Chrome extension manifest (MV3)
├── background/
│   └── service-worker.js      # Background service worker - orchestrates APIs
├── content/
│   └── content.js             # Content script - runs on Google Docs pages
├── sidebar/
│   ├── sidebar.html           # Main UI panel
│   ├── sidebar.js             # Sidebar controller
│   └── sidebar.css            # Styles
├── popup/
│   ├── popup.html/js/css      # Extension popup (minimal)
├── options/
│   ├── options.html/js/css    # Settings page for API key
├── lib/
│   ├── google-api.js          # Google Docs/Drive API wrapper
│   ├── claude-api.js          # Anthropic Claude API wrapper
│   ├── document-parser.js     # Parses Google Docs JSON to text
│   └── chat-manager.js        # Manages conversation history
└── icons/
    └── icon16/48/128.png      # Extension icons

Setup Instructions

Prerequisites

1. Google Cloud Project with:

   • Google Docs API enabled
   • Google Drive API enabled
   • OAuth 2.0 credentials (Chrome Extension type)

2. Anthropic API Key from https://console.anthropic.com/

Step 1: Google Cloud Setup

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the following APIs:
   • Google Docs API
   • Google Drive API
4. Go to APIs & Services > Credentials
5. Click Create Credentials > OAuth client ID
6. Select Chrome Extension as the application type
7. You'll need the extension ID (get this after loading the extension in step 2, then come back)
8. Copy the Client ID - you'll need it for the manifest

Step 2: Configure the Extension

1. Open google-docs-claude-editor/manifest.json
2. Update the oauth2.client_id with your Google OAuth Client ID:

   "oauth2": {
     "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",
     "scopes": [
       "https://www.googleapis.com/auth/documents",
       "https://www.googleapis.com/auth/drive.file"
     ]
   }

Step 3: Load the Extension in Chrome

1. Open Chrome and go to chrome://extensions
2. Enable Developer mode (toggle in top right)
3. Click Load unpacked
4. Select the google-docs-claude-editor folder
5. Note the Extension ID shown under the extension name
6. Go back to Google Cloud Console and add this ID to your OAuth credentials

Step 4: Configure API Key

1. Click the extension icon or open the sidebar on any Google Doc
2. You'll be prompted to enter your Anthropic API key
3. Go to Settings (gear icon) and enter your API key
4. The key is stored securely in Chrome's sync storage

Step 5: Authorize Google Access

1. Open any Google Doc
2. Open the extension sidebar (click the extension icon)
3. Click Get Suggestions or Authorize
4. Complete the Google OAuth flow to grant document access

Usage

Getting Suggestions

1. Open a Google Doc
2. Open the extension sidebar
3. Click Get Suggestions
4. Wait for Claude to analyze the document
5. Suggestions appear in the sidebar and are highlighted in the document

Working with Suggestions

• Accept: Applies the suggested change to the document
• Reject: Removes the highlight, keeps original text
• Discuss: Opens the chat to ask questions about the suggestion

Using Selection

1. Select text in your Google Doc
2. Press Cmd+C (Mac) or Ctrl+C (Windows) to copy
3. Click Get Selection in the sidebar
4. Type your question about the selected text

Note: Google Docs uses canvas rendering, so standard text selection detection doesn't work. The extension reads from your clipboard instead.

Multi-Tab Documents

The extension detects which tab you're viewing in a Google Doc (via the ?tab=t.X URL parameter) and analyzes only that tab's content. Switching tabs in the document will update the extension's context.

Troubleshooting

"Auth required" error

• Click the Authorize button to complete Google OAuth
• Make sure your OAuth client ID is correctly configured
• Check that the extension ID matches in Google Cloud Console

Suggestions not highlighting

• Reload the extension after any code changes
• Check the browser console for errors (right-click sidebar > Inspect)
• Ensure the document hasn't been modified since getting suggestions

Can't get selected text

• Make sure to copy (Cmd+C) the text before clicking Get Selection
• Google Docs uses canvas rendering - clipboard is the only reliable method

API errors

• Verify your Anthropic API key is correct in Settings
• Check you have sufficient API credits
• Look at the service worker console for detailed errors

Development

Making Changes

1. Edit the source files
2. Go to chrome://extensions
3. Click the refresh icon on the extension
4. Reload any open Google Docs tabs

Key Files to Know

• lib/google-api.js: All Google Docs/Drive API calls. Methods accept optional tabId for multi-tab documents.
• lib/document-parser.js: Converts Google Docs JSON to plain text with position mapping. Handles the tabs structure for multi-tab documents.
• background/service-worker.js: Main logic for getting suggestions, applying changes.
• content/content.js: Runs in Google Docs pages, detects document/tab info.
• sidebar/sidebar.js: UI controller, handles user interactions.

Google Docs API Notes

• Documents with tabs use document.tabs[].documentTab.body instead of document.body
• Fetch with ?includeTabsContent=true to get tab content
• Range/location objects need tabId property for multi-tab documents
• Position indices are per-tab, not document-wide

Known Limitations

• Canvas Rendering: Google Docs renders text on canvas, making DOM-based selection impossible. Use clipboard instead.
• Real-time Sync: Changes made to the document while suggestions are pending may cause position mismatches.
• Rate Limits: Both Google and Anthropic APIs have rate limits. Large documents may hit these.

License

MIT