A Claude-powered Chrome extension brings Claude’s AI capabilities directly into your browser, enabling text summarization, rewriting, translation, and content analysis on any webpage without switching tabs. Building one requires basic JavaScript, the Chrome Extensions API, and the Anthropic API. <\/p>\n\n\n\n
What You Need Before Starting<\/strong><\/h2>\n\n\n\n\n- Basic JavaScript<\/a> knowledge including async\/await and fetch<\/li>\n\n\n\n
- Google Chrome browser installed<\/li>\n\n\n\n
- An Anthropic API<\/a> key from console.anthropic.com<\/li>\n\n\n\n
- A code editor like VS Code<\/li>\n\n\n\n
- No Chrome Web Store account needed for local development and testing<\/li>\n<\/ul>\n\n\n\n
Read More: <\/strong>Claude Takes Over: Hands-Free Browsing Hacks<\/strong><\/a><\/p>\n\n\n\nHow a Chrome Extension Is Structured<\/strong><\/h2>\n\n\n\n![\"How](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/How-a-Chrome-Extension-Is-Structured-1200x632.webp\" "\\"\\"")
<\/figure>\n\n\n\nEvery Chrome extension <\/a>has three distinct parts that communicate with each other.<\/p>\n\n\n\nThe manifest file (manifest.json) declares the extension’s permissions, files, and capabilities. Every extension starts here and Chrome reads it first.<\/p>\n\n\n\n
The popup (popup.html and popup.js) is the small UI that appears when the user clicks the extension icon. This is where user interaction and Claude API calls happen.<\/p>\n\n\n\n
The content script (content.js) runs in the context of the current webpage and can read page content, selected text, and DOM elements. It passes content to the popup for processing but never calls the Claude API directly since content scripts cannot make cross-origin requests.<\/p>\n\n\n\n
\n \ud83d\udca1 Did You Know?<\/strong> \n
\n Chrome extensions have over 3 billion active installations globally, making the Chrome Web Store one of the largest software distribution platforms in the world. AI-powered productivity and writing assistance extensions have been among the fastest-growing categories since 2023, driven by developers integrating language model APIs into browser workflows.\n<\/div>\n\n\n\nBuilding a Claude Chrome Extension: Step-by-Step Setup<\/strong><\/h2>\n\n\n\nStep 1: Create the File Structure and Manifest<\/strong><\/h3>\n\n\n\nCreate a project folder with these files: manifest.json, popup.html, popup.js, content.js, and icon.png (any 128×128 PNG).<\/p>\n\n\n\n
The manifest is the foundation of every extension. Use Manifest V3<\/a>, the current required standard:<\/p>\n\n\n\n{\n \"manifest_version\": 3,\n \"name\": \"Claude AI Assistant\",\n \"version\": \"1.0\",\n \"description\": \"Bring Claude AI to any webpage\",\n \"permissions\": [\"activeTab\", \"scripting\", \"storage\"],\n \"host_permissions\": [\"https:\/\/api.anthropic.com\/*\"],\n \"action\": {\n \"default_popup\": \"popup.html\",\n \"default_icon\": \"icon.png\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"<all_urls>\"],\n \"js\": [\"content.js\"]\n }\n ]\n}<\/code><\/pre>\n\n\n\nThe host_permissions entry for api.anthropic.com is required to make API calls to Claude. Without it Chrome blocks every request silently.<\/p>\n\n\n\n
Want to build the full-stack JavaScript and AI integration skills that modern web development roles demand? Explore HCL GUVI’s <\/strong>Full Stack Course<\/strong><\/a>, designed to help you develop the programming foundations that power real browser-based AI applications. <\/a><\/p>\n\n\n\nStep 2: Build the Popup Interface and Claude Integration<\/strong><\/h3>\n\n\n\nThe popup needs an input area, action buttons for “summarize,” “improve writing,” and “explain,” and a result panel. Build popup.html as a simple HTML file with a textarea, three buttons, and a result div. Keep the width at 350px so it fits comfortably in the Chrome extension popup frame.<\/p>\n\n\n\n
The popup.js file handles everything: getting selected text from the page, calling Claude, and displaying the result:<\/p>\n\n\n\n
const ANTHROPIC_API_KEY = \"your-api-key-here\";\n\nasync function callClaude(prompt) {\n document.getElementById(\"status\").textContent = \"Thinking...\";\n\n const response = await fetch(\"https:\/\/api.anthropic.com\/v1\/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\",\n \"x-api-key\": ANTHROPIC_API_KEY,\n \"anthropic-version\": \"2023-06-01\"\n },\n body: JSON.stringify({\n model: \"claude-sonnet-4-6\",\n max_tokens: 1024,\n messages: [{ role: \"user\", content: prompt }]\n })\n });\n\n const data = await response.json();\n document.getElementById(\"status\").textContent = \"\";\n document.getElementById(\"result\").textContent = data.content[0].text;\n}\n\ndocument.getElementById(\"getSelected\").addEventListener(\"click\", async () => {\n const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });\n const results = await chrome.scripting.executeScript({\n target: { tabId: tab.id },\n func: () => window.getSelection().toString()\n });\n if (results[0].result) {\n document.getElementById(\"inputText\").value = results[0].result;\n }\n});\n\ndocument.getElementById(\"summarize\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Summarize this in 3 bullet points:\\n\\n${text}`);\n});\n\ndocument.getElementById(\"improve\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Improve the writing clarity of this text, return only the improved version:\\n\\n${text}`);\n});\n\ndocument.getElementById(\"explain\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Explain this simply for a beginner:\\n\\n${text}`);\n});<\/code><\/pre>\n\n\n\nStep 3: Add the Content Script and Secure the API Key<\/strong><\/h3>\n\n\n\nThe content.js file listens for messages from the popup and returns page text or selected text on request. Add message listeners for getPageText and getSelectedText, each returning the relevant content via sendResponse. This keeps page access in the content script while API calls stay in the popup.<\/p>\n\n\n\n
Never hardcode your API key in the extension files. Store it using Chrome’s storage API instead: call chrome.storage.local.set to save the key on first run and chrome. storage.local.get to retrieve it before each Claude call. This prevents accidental key exposure if you share extension files or push code to a repository.<\/p>\n\n\n\n
Step 4: Load and Test Locally<\/strong><\/h3>\n\n\n\nLoading your extension requires no Chrome Web Store account. Open Chrome and navigate to chrome:\/\/extensions, enable Developer mode using the toggle in the top right, click “Load unpacked,” and select your project folder. The extension icon appears in your Chrome toolbar immediately.<\/p>\n\n\n\n
To test, visit any article, select some text, click the extension icon, click Use Selected Text, then click Summarize. Claude’s summary appears in the result panel within seconds. Test each button across different content types before extending the functionality further.<\/p>\n\n\n\n
\n \ud83d\udca1 Did You Know?<\/strong> \n
\n Chrome’s Manifest V3, required for all new extension submissions since 2023, replaced persistent background pages with limited-lifespan service workers. This is why API calls in this guide are made from the popup rather than a background script, a critical architectural difference that causes silent failures in extensions built using outdated V2 patterns. \n<\/div>\n\n\n\nExtension Features to Build Next<\/strong><\/h2>\n\n\n\nOnce the core works, these high-value additions each require only a new prompt in the same callClaude function:<\/p>\n\n\n\n
\n- Page summarizer that sends full article text for a one-paragraph overview<\/li>\n\n\n\n
- Tone rewriter that converts selected text to formal, casual, or persuasive versions<\/li>\n\n\n\n
- Translation to any language from selected text<\/li>\n\n\n\n
- Email responder that detects Gmail context and drafts replies<\/li>\n\n\n\n
- Code explainer that identifies and explains code blocks on developer pages<\/li>\n<\/ul>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\nA Claude-powered Chrome extension removes the context-switching friction that slows every workflow where you need AI assistance on content you are already reading in the browser. <\/p>\n\n\n\n
Load the extension locally, test it against real content from your daily workflow, then extend it with the use cases most relevant to your work. Publishing to the Chrome Web Store requires a one-time developer account fee and review process, but local loading is sufficient for personal productivity tools and internal team extensions that do not need public distribution.<\/p>\n\n\n\n
FAQs<\/strong><\/h2>\n\n\n\n\n\nDo I need a Chrome Web Store account to build and test an extension?<\/strong>\u00a0<\/h3>\n\n\nNo. Load and test extensions locally using Developer mode in chrome:\/\/extensions without any account or review process.<\/p>\n\n<\/div>\n<\/div>\n
\nWhy can’t I call the Claude API from a content script?<\/strong>\u00a0<\/h3>\n\n\nChrome blocks cross-origin requests from content scripts for security reasons. Make all API calls from popup.js or a background service worker instead.<\/p>\n\n<\/div>\n<\/div>\n
\nHow do I securely store my Anthropic API key in the extension?<\/strong>\u00a0<\/h3>\n\n\n\nUse Chrome’s storage API with chrome.storage.local.set to store the key rather than hardcoding it in source files. Retrieve it with chrome.storage.local.get before each API call.<\/p>\n\n<\/div>\n<\/div>\n
\nWhat is the difference between Manifest V2 and V3 for AI extensions?<\/strong>\u00a0<\/h3>\n\n\nManifest V3 replaces persistent background pages with service workers, requires explicit host permissions, and enforces stricter content security policies. All new Chrome extension submissions require V3.<\/p>\n\n<\/div>\n<\/div>\n
\nCan this extension be published to the Chrome Web Store?<\/strong>\u00a0<\/h3>\n\n\nYes, after creating a developer account and passing Google’s review. Extensions with AI capabilities require additional data handling disclosures during submission.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
Most Claude users open a separate tab, copy text from whatever they are reading, paste it into Claude, and switch back with the result. A Claude-powered Chrome extension eliminates this friction by putting Claude directly in the browser, accessible from any page with a single click Quick TL;DR A Claude-powered Chrome extension brings Claude’s AI […]<\/p>\n","protected":false},"author":7,"featured_media":132866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[933],"tags":[],"views":"53","authorinfo":{"name":"HCL GUVI","url":"https:\/\/www.guvi.in\/blog\/author\/guvipr\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/How-to-Build-a-Claude-Powered-Chrome-Extension-300x116.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=126464"}],"version-history":[{"count":11,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464\/revisions"}],"predecessor-version":[{"id":132765,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464\/revisions\/132765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/132866"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=126464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=126464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=126464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Read More: <\/strong>Claude Takes Over: Hands-Free Browsing Hacks<\/strong><\/a><\/p>\n\n\n\n Every Chrome extension <\/a>has three distinct parts that communicate with each other.<\/p>\n\n\n\n The manifest file (manifest.json) declares the extension’s permissions, files, and capabilities. Every extension starts here and Chrome reads it first.<\/p>\n\n\n\n The popup (popup.html and popup.js) is the small UI that appears when the user clicks the extension icon. This is where user interaction and Claude API calls happen.<\/p>\n\n\n\n The content script (content.js) runs in the context of the current webpage and can read page content, selected text, and DOM elements. It passes content to the popup for processing but never calls the Claude API directly since content scripts cannot make cross-origin requests.<\/p>\n\n\n\n Create a project folder with these files: manifest.json, popup.html, popup.js, content.js, and icon.png (any 128×128 PNG).<\/p>\n\n\n\n The manifest is the foundation of every extension. Use Manifest V3<\/a>, the current required standard:<\/p>\n\n\n\n The host_permissions entry for api.anthropic.com is required to make API calls to Claude. Without it Chrome blocks every request silently.<\/p>\n\n\n\n Want to build the full-stack JavaScript and AI integration skills that modern web development roles demand? Explore HCL GUVI’s <\/strong>Full Stack Course<\/strong><\/a>, designed to help you develop the programming foundations that power real browser-based AI applications. <\/a><\/p>\n\n\n\n The popup needs an input area, action buttons for “summarize,” “improve writing,” and “explain,” and a result panel. Build popup.html as a simple HTML file with a textarea, three buttons, and a result div. Keep the width at 350px so it fits comfortably in the Chrome extension popup frame.<\/p>\n\n\n\n The popup.js file handles everything: getting selected text from the page, calling Claude, and displaying the result:<\/p>\n\n\n\n The content.js file listens for messages from the popup and returns page text or selected text on request. Add message listeners for getPageText and getSelectedText, each returning the relevant content via sendResponse. This keeps page access in the content script while API calls stay in the popup.<\/p>\n\n\n\n Never hardcode your API key in the extension files. Store it using Chrome’s storage API instead: call chrome.storage.local.set to save the key on first run and chrome. storage.local.get to retrieve it before each Claude call. This prevents accidental key exposure if you share extension files or push code to a repository.<\/p>\n\n\n\n Loading your extension requires no Chrome Web Store account. Open Chrome and navigate to chrome:\/\/extensions, enable Developer mode using the toggle in the top right, click “Load unpacked,” and select your project folder. The extension icon appears in your Chrome toolbar immediately.<\/p>\n\n\n\n To test, visit any article, select some text, click the extension icon, click Use Selected Text, then click Summarize. Claude’s summary appears in the result panel within seconds. Test each button across different content types before extending the functionality further.<\/p>\n\n\n\n Once the core works, these high-value additions each require only a new prompt in the same callClaude function:<\/p>\n\n\n\n A Claude-powered Chrome extension removes the context-switching friction that slows every workflow where you need AI assistance on content you are already reading in the browser. <\/p>\n\n\n\n Load the extension locally, test it against real content from your daily workflow, then extend it with the use cases most relevant to your work. Publishing to the Chrome Web Store requires a one-time developer account fee and review process, but local loading is sufficient for personal productivity tools and internal team extensions that do not need public distribution.<\/p>\n\n\n\n No. Load and test extensions locally using Developer mode in chrome:\/\/extensions without any account or review process.<\/p>\n\n<\/div>\n<\/div>\n Chrome blocks cross-origin requests from content scripts for security reasons. Make all API calls from popup.js or a background service worker instead.<\/p>\n\n<\/div>\n<\/div>\n Use Chrome’s storage API with chrome.storage.local.set to store the key rather than hardcoding it in source files. Retrieve it with chrome.storage.local.get before each API call.<\/p>\n\n<\/div>\n<\/div>\n Manifest V3 replaces persistent background pages with service workers, requires explicit host permissions, and enforces stricter content security policies. All new Chrome extension submissions require V3.<\/p>\n\n<\/div>\n<\/div>\n Yes, after creating a developer account and passing Google’s review. Extensions with AI capabilities require additional data handling disclosures during submission.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":" Most Claude users open a separate tab, copy text from whatever they are reading, paste it into Claude, and switch back with the result. A Claude-powered Chrome extension eliminates this friction by putting Claude directly in the browser, accessible from any page with a single click Quick TL;DR A Claude-powered Chrome extension brings Claude’s AI […]<\/p>\n","protected":false},"author":7,"featured_media":132866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[933],"tags":[],"views":"53","authorinfo":{"name":"HCL GUVI","url":"https:\/\/www.guvi.in\/blog\/author\/guvipr\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/08\/How-to-Build-a-Claude-Powered-Chrome-Extension-300x116.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=126464"}],"version-history":[{"count":11,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464\/revisions"}],"predecessor-version":[{"id":132765,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/126464\/revisions\/132765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/132866"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=126464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=126464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=126464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}How a Chrome Extension Is Structured<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n
\n Chrome extensions have over 3 billion active installations globally, making the Chrome Web Store one of the largest software distribution platforms in the world. AI-powered productivity and writing assistance extensions have been among the fastest-growing categories since 2023, driven by developers integrating language model APIs into browser workflows.\n<\/div>\n\n\n\nBuilding a Claude Chrome Extension: Step-by-Step Setup<\/strong><\/h2>\n\n\n\n
Step 1: Create the File Structure and Manifest<\/strong><\/h3>\n\n\n\n
{\n \"manifest_version\": 3,\n \"name\": \"Claude AI Assistant\",\n \"version\": \"1.0\",\n \"description\": \"Bring Claude AI to any webpage\",\n \"permissions\": [\"activeTab\", \"scripting\", \"storage\"],\n \"host_permissions\": [\"https:\/\/api.anthropic.com\/*\"],\n \"action\": {\n \"default_popup\": \"popup.html\",\n \"default_icon\": \"icon.png\"\n },\n \"content_scripts\": [\n {\n \"matches\": [\"<all_urls>\"],\n \"js\": [\"content.js\"]\n }\n ]\n}<\/code><\/pre>\n\n\n\nStep 2: Build the Popup Interface and Claude Integration<\/strong><\/h3>\n\n\n\n
const ANTHROPIC_API_KEY = \"your-api-key-here\";\n\nasync function callClaude(prompt) {\n document.getElementById(\"status\").textContent = \"Thinking...\";\n\n const response = await fetch(\"https:\/\/api.anthropic.com\/v1\/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application\/json\",\n \"x-api-key\": ANTHROPIC_API_KEY,\n \"anthropic-version\": \"2023-06-01\"\n },\n body: JSON.stringify({\n model: \"claude-sonnet-4-6\",\n max_tokens: 1024,\n messages: [{ role: \"user\", content: prompt }]\n })\n });\n\n const data = await response.json();\n document.getElementById(\"status\").textContent = \"\";\n document.getElementById(\"result\").textContent = data.content[0].text;\n}\n\ndocument.getElementById(\"getSelected\").addEventListener(\"click\", async () => {\n const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });\n const results = await chrome.scripting.executeScript({\n target: { tabId: tab.id },\n func: () => window.getSelection().toString()\n });\n if (results[0].result) {\n document.getElementById(\"inputText\").value = results[0].result;\n }\n});\n\ndocument.getElementById(\"summarize\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Summarize this in 3 bullet points:\\n\\n${text}`);\n});\n\ndocument.getElementById(\"improve\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Improve the writing clarity of this text, return only the improved version:\\n\\n${text}`);\n});\n\ndocument.getElementById(\"explain\").addEventListener(\"click\", () => {\n const text = document.getElementById(\"inputText\").value.trim();\n if (text) callClaude(`Explain this simply for a beginner:\\n\\n${text}`);\n});<\/code><\/pre>\n\n\n\nStep 3: Add the Content Script and Secure the API Key<\/strong><\/h3>\n\n\n\n
Step 4: Load and Test Locally<\/strong><\/h3>\n\n\n\n
\n Chrome’s Manifest V3, required for all new extension submissions since 2023, replaced persistent background pages with limited-lifespan service workers. This is why API calls in this guide are made from the popup rather than a background script, a critical architectural difference that causes silent failures in extensions built using outdated V2 patterns. \n<\/div>\n\n\n\nExtension Features to Build Next<\/strong><\/h2>\n\n\n\n
\n
Conclusion<\/strong><\/h2>\n\n\n\n
FAQs<\/strong><\/h2>\n\n\n
Do I need a Chrome Web Store account to build and test an extension?<\/strong>\u00a0<\/h3>\n
Why can’t I call the Claude API from a content script?<\/strong>\u00a0<\/h3>\n
How do I securely store my Anthropic API key in the extension?<\/strong>\u00a0<\/h3>\n
What is the difference between Manifest V2 and V3 for AI extensions?<\/strong>\u00a0<\/h3>\n
Can this extension be published to the Chrome Web Store?<\/strong>\u00a0<\/h3>\n