The Dawson Blog

📖 项目简介

NowCoderSet 是一个针对牛客网的 Chrome 浏览器扩展插件，主要用于自动化爬取牛客讨论区的文章内容，并提供去重、历史记录管理、多格式导出等功能。

项目 GitHub 地址：https://github.com/Dawson-web/NowCoderSet

🚀 主要功能

• 用户信息展示：在牛客网上显示当前登录用户的个人资料和求职意向。
• 文章批量爬取：支持按关键词搜索并批量抓取讨论区文章。
• 智能去重：基于文章 UUID 实现跨任务去重，避免重复采集。
• 历史记录管理：使用 Zustand + localStorage 持久化存储每次爬取的配置、日志和结果。
• 多格式导出：支持将爬取结果导出为 JSON 或 Markdown 格式。
• 实时日志：在爬取过程中实时显示操作日志。

💻 技术栈

• 前端框架：React 18 + TypeScript
• 构建工具：Vite + esbuild
• UI 组件库：Arco Design
• 样式方案：Tailwind CSS
• 状态管理：Zustand（支持持久化）
• 数据请求：TanStack React Query + Axios
• 浏览器扩展规范：Chrome Extension Manifest V3

📁 项目结构

src/
├── background/     # Service Worker（后台脚本）
├── content/        # Content Script（侧边栏面板）
│   ├── components/ # UI 组件（用户信息卡片、爬取面板、历史记录面板等）
│   ├── FloatingPanel.tsx  # 主面板容器
│   ├── main.tsx    # 入口及侧边栏挂载逻辑
│   └── style.css   # 全局样式
├── popup/          # 扩展弹出页面
├── service/        # API 服务层
├── store/          # Zustand 状态管理
├── styles/         # Tailwind 样式入口
└── window/         # 独立窗口页面

🛠️ 快速开始

1. 安装依赖：pnpm install
2. 开发模式运行：pnpm dev
3. 构建生产版本：pnpm build
4. 加载扩展：
   • 打开 Chrome，进入 chrome://extensions/
   • 开启“开发者模式”
   • 点击“加载已解压的扩展程序”，选择项目生成的 dist/ 目录

✅ 项目特点

• 专为牛客网用户设计，提升内容采集效率
• 支持跨会话的数据持久化与历史记录回溯
• 界面友好，操作流程清晰，适合非技术用户使用
• 采用现代前端技术栈，代码结构清晰，易于二次开发

🎯 使用场景

• 牛客网用户希望批量保存感兴趣的讨论区文章
• 需要整理牛客网上的面试经验、学习资料
• 希望将牛客网内容导出为本地文档以便离线阅读
• 开发者需要参考牛客网上的技术讨论内容

📝 总结

NowCoderSet 是一个实用的 Chrome 扩展工具，它帮助牛客网用户更高效地管理和保存平台上的优质内容。通过自动化的爬取、智能去重和多格式导出功能，大大提升了信息收集和整理的效率。对于经常浏览牛客网的用户来说，这是一个非常有价值的工具。

如果你对这个项目感兴趣，欢迎访问 GitHub 仓库了解更多详情，或者贡献你的代码和想法！