PDF Extend

一个 Chrome/Edge 浏览器扩展，用于为 PDF 文件自动生成目录（TOC）。

功能特性

• 📄 自定义 PDF 阅读器 - 拦截 PDF 导航并使用内置的 pdf.js 渲染
• 📑 自动目录生成 - 使用启发式算法从 PDF 文本中自动检测标题
• ✏️ 手动编辑 - 支持添加、删除、修改目录项，调整层级
• 📋 粘贴模式 - 支持从外部粘贴目录文本，自动解析层级
• 🔍 全文搜索 - 在 PDF 中搜索关键词，支持高亮匹配
• 📏 页码偏移 - 支持设置页码偏移，解决书籍页码与 PDF 物理页不一致问题

技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite + CRXJS (Chrome 扩展打包)
• PDF 渲染: PDF.js
• 测试框架: Vitest

快速开始

开发模式

npm run dev

构建生产版本

npm run build

运行测试

npm run test

类型检查

npm run typecheck

安装使用

1. 运行 npm run build 构建扩展
2. 打开 Chrome/Edge 浏览器，访问 chrome://extensions/
3. 开启「开发者模式」
4. 点击「加载已解压的扩展程序」，选择 dist 文件夹
5. 现在打开任意 PDF 文件，扩展会自动拦截并使用内置阅读器打开

项目结构

src/
├── background/          # 后台服务工作者
│   └── service-worker.ts  # 拦截 PDF 导航并重定向
├── core/               # 核心业务逻辑（纯 TypeScript）
│   ├── page-number.ts    # 页码解析与匹配
│   ├── paste-parser.ts   # 粘贴文本解析为目录树
│   ├── toc-detector.ts   # 启发式标题检测算法
│   └── types.ts          # 类型定义
├── pdf/                # PDF 加载与处理
│   ├── pdf-loader.ts     # PDF.js 包装与文本提取
│   └── outline.ts        # 目录项构建
└── viewer/             # React 阅读器应用
    ├── components/       # 组件
    │   ├── PdfView.tsx   # PDF 渲染视图
    │   ├── TocSidebar.tsx # 目录侧边栏
    │   └── PastePanel.tsx # 粘贴面板
    ├── App.tsx           # 主应用
    ├── main.tsx          # 入口文件
    └── styles.css        # 全局样式

目录来源优先级

1. outline - PDF 内置书签（如果有）
2. heuristic - 自动检测的标题
3. pasted - 用户粘贴的目录文本
4. manual - 用户手动编辑添加的项

许可证

MIT