Proof of Concept: Chrome Extension - Webpage Summarizer

Proof of concept of a Chrome Extension that summarizes the currently open webpage using an in-browser Large Language Model.
Powered by WebLLM for on-device inference and React for the UI.

This extension uses Qwen2.5-3B-Instruct-q4f16 as model.

Features

• In-Browser Summarization — No API calls, no backend, full privacy.
• Fast & Lightweight — Powered by efficient WebGPU-based LLM inference (via WebLLM).
• Seamless UI — Integrated, minimal UI built with React and Plasmo.

Getting Started

1. Clone the repository

git clone https://github.com/charming-byte/webpage-summarizer.git
cd webpage-summarizer

2. Install dependencies

npm install

3. Run the extension in development mode

npm run dev

This uses Plasmo's dev server to hot-reload the extension inside Chrome.

4. Load the extension in Chrome

• Go to chrome://extensions
• Enable Developer Mode
• Click Load unpacked
• Select the .plasmo/.output directory

How It Works

1. The content script extracts relevant visible text from the DOM.
2. The text is passed to the LLM (via WebLLM).
3. The model generates a concise summary on the fly.
4. The UI (popup or sidebar) displays the result to the user.

All processing happens entirely in-browser — no external servers, ensuring user privacy.

Tech Stack

Tool	Purpose
WebLLM	In-browser LLM inference (WebGPU)
React	UI framework
Plasmo	Extension framework (bundling + HMR)

Roadmap

• Model selection in UI
• Page segmentation for long articles
• Custom prompt templates
• Firefox support

Example

Visiting a long blog post or news article?
Click the extension icon → Get a ~5-line summary.