--- title: Make a Chrome Extension to Digest Webpages with Manifest... description: A step-by-step walkthrough builds a Chrome extension called Page Intelligence that reads the current webpage's content and lets users summarize it or chat... canonical: https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API | daily.dev og:description: A step-by-step walkthrough builds a Chrome extension called Page Intelligence that reads the current webpage's content and lets users summarize it or chat... og:url: https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv og:image: https://api.daily.dev/og/posts/ve1j1mfbv.png og:image:alt: Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API **[PyImageSearch](https://daily.dev/sources/pyimagesearch)** · 26 min read · 0 upvotes · 0 comments ## Summary A step-by-step walkthrough builds a Chrome extension called Page Intelligence that reads the current webpage's content and lets users summarize it or chat about it using the Groq API. The tutorial covers Manifest V3 configuration, permissions (activeTab, scripting, storage), injecting scripts into the active tab with chrome.scripting.executeScript, persisting an API key with chrome.storage.local, and parsing Server-Sent Events to stream LLM responses token by token into a popup UI. It closes with practical patterns: retrieve-then-generate, separating persistent from session state, streaming for perceived responsiveness, and keeping a first version intentionally minimal. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I read the content of the currently active tab from a Chrome extension popup using Manifest V3? Use chrome.scripting.executeScript with the activeTab and scripting permissions to inject a function into the active tab, since a popup's JavaScript cannot directly access document.body of the open webpage. The injected function can clone document.body, strip out script, style, nav, footer, and aside elements, then return the title, URL, and cleaned innerText for use elsewhere in the extension. _daily.dev surfaces browser extension patterns like this for developers building their own AI-powered tools._ ### How do I stream a Groq chat completion response into a webpage UI token by token? Set stream: true in the fetch request body to the Groq chat completions endpoint, then read the response body with response.body.getReader() and a TextDecoder instead of calling response.json(). Parse each line starting with 'data:', extract parsed.choices[0].delta.content, and append each token to the UI as it arrives to create a live, incremental chat feel. _Developers wiring streaming LLM responses into apps can find implementation patterns like this on daily.dev._ ### Why should I clone the page body before extracting text for an LLM prompt in a browser extension? Cloning document.body with cloneNode(true) before removing noisy elements like script, style, nav, footer, and aside lets an extension clean the extracted text without altering the actual webpage the user is viewing. This keeps content extraction non-destructive while still producing a trimmed, whitespace-normalized text payload, often capped around 8,000 characters, suitable for sending to a language model. _daily.dev helps developers compare content-extraction approaches before feeding pages to an LLM._ ## Similar posts on daily.dev - [How to Use Transformers.js in a Chrome Extension](https://daily.dev/posts/how-to-use-transformers-js-in-a-chrome-extension-cljxqw6u8) · Hugging Face · 1 upvotes · 0 comments - [How to Build an AI-Powered, Local-First Chrome Extension That Turns Your Browsing History into an Intent Map](https://daily.dev/posts/how-to-build-an-ai-powered-local-first-chrome-extension-that-turns-your-browsing-history-into-an-in-pwbvsqwsy) · freeCodeCamp · 5 upvotes · 2 comments - [Building Chromegg: A Chrome Extension for Real-Time Secret Detection](https://daily.dev/posts/building-chromegg-a-chrome-extension-for-real-time-secret-detection-ix6jipfx3) · GitGuardian · 3 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#devtools](https://daily.dev/tags/devtools) [View this post on daily.dev](https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API","url":"https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv"},"datePublished":"2026-08-17T12:45:41.258Z","dateModified":"2026-08-17T12:46:06.273Z","description":"A step-by-step walkthrough builds a Chrome extension called Page Intelligence that reads the current webpage's content and lets users summarize it or chat...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c9de313849f3644f35ab68740144560f?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c9de313849f3644f35ab68740144560f?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"PyImageSearch","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"PyImageSearch","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/33ddc48b99ee47eb9283ef1fdcff3095","url":"https://daily.dev/sources/pyimagesearch"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,devtools","timeRequired":"PT26M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"PyImageSearch","item":"https://daily.dev/sources/pyimagesearch"},{"@type":"ListItem","position":3,"name":"Make a Chrome Extension to Digest Webpages with Manifest V3 and Groq API"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/make-a-chrome-extension-to-digest-webpages-with-manifest-v3-and-groq-api-ve1j1mfbv#faq","mainEntity":[{"@type":"Question","name":"How do I read the content of the currently active tab from a Chrome extension popup using Manifest V3?","acceptedAnswer":{"@type":"Answer","text":"Use chrome.scripting.executeScript with the activeTab and scripting permissions to inject a function into the active tab, since a popup's JavaScript cannot directly access document.body of the open webpage. The injected function can clone document.body, strip out script, style, nav, footer, and aside elements, then return the title, URL, and cleaned innerText for use elsewhere in the extension. daily.dev surfaces browser extension patterns like this for developers building their own AI-powered tools."}},{"@type":"Question","name":"How do I stream a Groq chat completion response into a webpage UI token by token?","acceptedAnswer":{"@type":"Answer","text":"Set stream: true in the fetch request body to the Groq chat completions endpoint, then read the response body with response.body.getReader() and a TextDecoder instead of calling response.json(). Parse each line starting with 'data:', extract parsed.choices[0].delta.content, and append each token to the UI as it arrives to create a live, incremental chat feel. Developers wiring streaming LLM responses into apps can find implementation patterns like this on daily.dev."}},{"@type":"Question","name":"Why should I clone the page body before extracting text for an LLM prompt in a browser extension?","acceptedAnswer":{"@type":"Answer","text":"Cloning document.body with cloneNode(true) before removing noisy elements like script, style, nav, footer, and aside lets an extension clean the extracted text without altering the actual webpage the user is viewing. This keeps content extraction non-destructive while still producing a trimmed, whitespace-normalized text payload, often capped around 8,000 characters, suitable for sending to a language model. daily.dev helps developers compare content-extraction approaches before feeding pages to an LLM."}}]} ```