A Chrome extension that turns the visible text and useful data visualizations on a webpage into a focused, downloadable AI analysis.
The extension reads the active page, removes common interface noise, asks Groq models to identify useful facts and insights, examines supported webpage images for statistical information, and saves the combined result as a text file.
flowchart LR
U[User opens a webpage] --> P[Click Get Info]
P --> T[Extract and clean text]
T --> A[Groq text analysis]
A --> V[Discover webpage images]
V --> G[Groq visual analysis]
G --> D[Download combined TXT report]
One popup action coordinates text extraction, AI summarization, visual-data discovery, and report creation.
flowchart TB
E((Webpage Analyzer))
E --> X[Text extraction<br/>Visible body content]
E --> C[Text cleaning<br/>Navigation and repeated UI]
E --> S[Text analysis<br/>Facts, data, conclusions]
E --> I[Visual discovery<br/>Images and canvases]
E --> V[Vision analysis<br/>Charts and statistics]
E --> R[Report<br/>Combined TXT download]
The linked guides keep this landing page concise while documenting the implementation honestly and in detail.
flowchart LR
R[README] --> A[Architecture<br/>Extension contexts and build]
R --> F[Feature flows<br/>Text, visuals, and download]
R --> D[AI and data<br/>Messages, prompts, and privacy]
R --> S[Setup and verification<br/>Build, load, and checks]
R --> L[Learning<br/>Lessons and hardening]
| Open | Focus |
|---|---|
| Architecture | Popup, content script, service worker, Groq boundary, build output, and runtime state |
| Feature flows | Text extraction, cleanup, image discovery, AI analysis, and report generation |
| AI and data flow | Runtime messages, Groq requests, prompts, output data, privacy, and limitations |
| Setup and verification | API-key configuration, Webpack build, Chrome installation, and manual checks |
| What I learned | Chrome extension architecture, asynchronous workflows, AI integration, and production hardening |
This sequence follows a click from the extension popup to the downloaded report.
sequenceDiagram
actor U as User
participant P as Popup
participant C as Content script
participant B as Background worker
participant G as Groq API
participant D as Chrome Downloads
U->>P: Click Get Info
P->>C: RUN_LOGIC
C->>C: Read and clean document.body.innerText
C->>B: GET_GROQ_RESPONSE with cleaned text
B->>G: Request facts, statistics, and conclusions
G-->>B: Text analysis
B-->>C: Analysis response
C-->>P: Text phase complete
P->>B: START_FULL_PAGE_CAPTURE
B->>C: START_SCROLL_AND_CAPTURE
C->>C: Scroll and collect visual elements
C->>B: VISUAL_CONTENT_EXTRACTED
loop Each supported HTTP image
B->>G: Request visual-data analysis
G-->>B: Chart insights or nothing found
end
B->>D: Save ai_combined_analysis.txt
D-->>U: Download report
The project uses browser-native extension APIs for page access and downloads, with Webpack packaging the Groq-powered analysis code.
flowchart LR
JS[JavaScript] --> MV3[Chrome Manifest V3]
MV3 --> API[Chrome tabs, scripting,<br/>runtime, and downloads APIs]
MV3 --> W[Webpack 5 and Babel]
MV3 --> G[Groq SDK]
G --> T[Llama 3.3 text model]
G --> V[Llama 3.2 vision model]
MV3 --> H[html2canvas]
MV3 --> J[jsPDF]
Caution
This is a demonstration project, not a production-secure extension. A Groq key placed in config.json is available to extension code and cannot be treated as a secret. The extension can read pages on all URLs, sends extracted page text and supported images to Groq, and exposes config.json as a web-accessible resource. Use a trusted backend with authentication, narrow the host permissions, disclose data handling clearly, and never commit a real API key.
The core text-to-report flow is represented in source and compiled bundles, but several names and dependencies describe functionality beyond what is currently completed.
| Area | Current behavior |
|---|---|
| Page text | Reads visible body text, applies rule-based cleanup, and sends it to Groq |
| Images | Collects visible HTTP image URLs while scrolling and asks a vision model for statistical insights |
| Canvas elements | Collected by the content script but not processed by the background worker |
| Screenshots | No actual full-page screenshot is created despite capture-oriented function names |
| Report | Downloads accumulated AI text as ai_combined_analysis.txt |
| Popup feedback | Processing details are logged to DevTools; the popup has no progress or result view |
html2canvas and jsPDF |
Installed/imported but not used to create the final report |
| Tests | No automated test suite is configured |
This repository is now the single source of truth for the extension, product website, and technical documentation. The earlier development repositories and former standalone website are retained as historical references.
flowchart TB
B[backup-extension<br/>Initial prototype] --> E[extension-back<br/>Expanded implementation]
E --> C[Chrome-ext-webpage-data<br/>Unified project]
W[chrome--extension-info<br/>Former standalone website] --> S[website directory]
S --> C
| Stage | Location |
|---|---|
| Initial prototype | backup-extension |
| Intermediate implementation | extension-back |
| Former website repository | chrome--extension-info |
| Unified extension, website, and documentation | Chrome-ext-webpage-data |
The extension remains at the repository root so existing Webpack and Load unpacked workflows continue to work. The static product site lives under website/, and the focused technical guides live under docs/.
npm install
npx webpack --config webpack.config.jsCreate a local, untracked config.json, add a development Groq key, and load the repository folder from chrome://extensions using Load unpacked. See Setup and verification for the complete workflow and security notes.
- Project information website
- Copyright © 2025 Sidheshwar Sarangal
- Personal-use terms are described in LICENSE
View complete system design
flowchart TB
User[Extension user]
subgraph Chrome[Chrome browser]
Popup[Popup UI<br/>Get Info button]
Content[Content script<br/>DOM text and visual discovery]
Background[Manifest V3 service worker<br/>AI orchestration and report state]
Download[Chrome Downloads API]
end
subgraph Page[Active webpage]
Text[document.body.innerText]
Images[HTTP images]
Canvas[Canvas and chart elements]
end
subgraph AI[Groq services]
TextModel[Llama 3.3 70B Versatile<br/>Text analysis]
VisionModel[Llama 3.2 11B Vision Preview<br/>Visual-data analysis]
end
subgraph Build[Build and configuration]
Source[src JavaScript]
Webpack[Webpack and Babel]
Bundles[dist bundles]
Config[Local config.json]
end
User --> Popup
Popup --> Content
Content --> Text
Content --> Images
Content --> Canvas
Text --> Content
Images --> Content
Canvas --> Content
Content --> Background
Background --> TextModel
Background --> VisionModel
TextModel --> Background
VisionModel --> Background
Background --> Download
Download --> User
Source --> Webpack
Webpack --> Bundles
Bundles --> Popup
Bundles --> Content
Bundles --> Background
Config --> Background