我开源了一个 Chrome 插件：一键总结网页为 Markdown

让 AI 帮你阅读，而不是被信息淹没。

在信息爆炸的时代，我们每天面对成百上千的网页内容------技术文档、新闻报道、产品说明、学术论文......但真正能沉淀为知识的却寥寥无几。有没有一种工具，能一键将任意网页提炼为核心要点，并以 Markdown 格式输出，方便我们整理笔记或分享观点？

答案是：有！而且你可以自己动手实现它。

本文将带你从零开始，使用现代前端技术栈（React + Vite）开发一款 AI 驱动的网页内容摘要 Chrome 插件 ，并完整适配最新的 Manifest V3 规范。更重要的是------这个项目已经开源，你不仅可以跟着教程学习，还能直接使用、二次开发，甚至贡献代码！

🔗 项目地址 ：https://gitee.com/qiaoyuning/ai-page-summarizer

✅ 支持区域高亮总结｜✅ 多格式输出｜✅ 本地运行｜✅ 无后端依赖

一、为什么需要这个插件？

快速抓取核心信息：长文阅读不再耗时，30 秒生成摘要。
辅助知识管理：将网页转化为结构化笔记，便于导入 Obsidian、Notion 等工具。
隐私安全 ：所有 API 调用均在用户本地发起，不经过任何第三方服务器。
高度可定制：支持自定义 AI 模型（如 ModelScope、DeepSeek）、输出风格、字数限制等。

二、技术选型与架构设计

核心技术栈

UI 框架：React 18（Popup 弹窗界面）
构建工具：Vite（极速热更新 + 多入口支持）
扩展规范：Chrome Extension Manifest V3（更安全、更高效）
通信机制 ：chrome.runtime.sendMessage
数据存储 ：chrome.storage.sync（配置跨设备同步）

项目结构

复制代码

ai-page-summarizer/
├── popup/              # React 构建的弹出界面（ESM 模块）
├── content/            # 注入网页的内容脚本（IIFE 格式，MV3 要求）
├── background.js       # Service Worker（替代旧版后台页面）
├── manifest.json       # MV3 配置清单
├── utils/              # 公共工具（API 调用、文本处理等）
└── public/             # 静态资源（图标、manifest）

关键挑战 ：Manifest V3 要求 Content Script 必须是 IIFE（立即调用函数表达式） ，而 Popup 使用 ESM。我们通过 Vite 的 build.rollupOptions.input 配置多入口，分别输出两种格式，完美兼容。

三、核心功能实现详解

1. 精准提取网页正文

直接读取 document.body.innerHTML 会包含大量噪音（广告、导航栏、评论区）。我们采用轻量级策略：

过滤 <script>、<style>、<nav>、.ad 等无关元素
保留语义化标签（<article>, <main>, <p>, <h1~h6>）
计算文本密度，优先提取高密度区块

后续可集成 Readability.js 提升准确性。

2. 调用大模型生成摘要

用户可在设置中填入自己的 ModelScope / DeepSeek API Key，插件将调用对应接口：

ts 复制代码

// utils/summarize.ts
export async function generateSummary(text: string, apiKey: string, style: string) {
  const prompt = `请将以下内容总结为一篇${style}，不超过300字：\n\n${text}`;
  const response = await fetch('https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'qwen-max',
      input: { messages: [{ role: 'user', content: prompt }] }
    })
  });
  const data = await response.json();
  return data.output.choices[0].message.content;
}

所有请求均由用户浏览器发起，开发者无法获取你的 API Key 或网页内容。

3. 区域高亮总结（独家功能！）

除了全文总结，你还可以：

在网页上拖选任意文字区域
点击插件图标
插件仅对该选中区域进行总结

这极大提升了灵活性------比如只总结论文的"方法"部分，或新闻中的"事件经过"。

4. 多格式输出

支持四种输出风格，满足不同场景：

要点列表：适合快速记录
博客文章：带引言和小结
技术报告：结构严谨，术语准确
简洁摘要：一句话概括核心

四、如何本地运行？

克隆项目

bash 复制代码

git clone https://gitee.com/qiaoyuning/ai-page-summarizer.git
cd ai-page-summarizer

安装依赖并构建

bash 复制代码

pnpm install && pnpm run build
# 输出目录：dist/

加载到 Chrome
- 地址栏输入 chrome://extensions
- 开启右上角「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择项目中的 dist 文件夹
配置 API Key
- 点击插件图标 → 「设置」
- 填入你的 ModelScope 或 DeepSeek API Key
- 保存后即可使用！

无需后端服务！整个插件完全运行在浏览器内，符合 Manifest V3 安全规范。

五、为什么这个项目值得学习？

完整的 Manifest V3 实践案例：涵盖权限声明、Service Worker 生命周期、Content Script 注入、跨上下文通信等核心概念。
工程化最佳实践：Vite 多入口构建、TypeScript 类型安全、模块化设计、错误边界处理。
开箱即用的生产力工具：配置后立即提升阅读效率。
优秀的学习模板：可基于此项目快速开发其他插件（如翻译、划词搜索、内容存档等）。

六、开源与贡献

本项目已在 Gitee 开源，遵循 MIT 协议，欢迎所有开发者使用与参与！

🔗 Gitee 仓库地址 ：

👉 https://gitee.com/qiaoyuning/ai-page-summarizer

你可以：

⭐ Star 项目：支持作者持续更新
🍴 Fork 并二次开发：添加新模型、新功能
🐞 提交 Issue：反馈 Bug 或建议
🤝 发起 PR：贡献代码，一起打造更好用的工具

项目根目录包含详细文档《插件开发指南与实战.md》，深入讲解：

从 Web 应用到浏览器扩展的思维转变

Manifest V3 迁移避坑指南

调试技巧（Popup / Content Script / Background 分别如何调试）

上架 Chrome Web Store 的全流程

结语

在这个注意力稀缺的时代，工具的价值不在于功能多少，而在于能否帮你聚焦真正重要的信息。

「AI Page Summarizer」正是这样一个小而美的工具------它不喧宾夺主，只在你需要时，安静地为你提炼精华。

现在，就去 Gitee 获取源码，让它成为你每日阅读的得力助手吧！