WebScrapBook：网页捕获与管理完全指南

WebScrapBook是一款浏览器扩展工具，能够将网页内容捕获到本地设备或后端服务器，以便进行后续检索、组织、注释和编辑。作为ScrapBook X的继任项目，它提供了高效的网页保存方案和丰富的内容管理功能，适用于研究资料收集、内容存档和知识管理等场景。

快速上手流程

环境准备

1. 获取项目代码

   git clone https://gitcode.com/gh_mirrors/we/webscrapbook
   

2. 安装扩展

   • 打开浏览器扩展管理界面
   • 启用开发者模式
   • 选择"加载已解压的扩展程序"
   • 指向项目根目录完成安装

基本使用

安装完成后，浏览器工具栏将出现WebScrapBook图标，点击即可打开主菜单。主要操作包括：

• 捕获网页：一键保存当前页面或选中区域
• 管理 scrapbook：通过左侧面板浏览已保存内容
• 添加注释：使用内置工具对保存的页面添加批注
• 搜索内容：通过顶部搜索框查找已保存的网页

WebScrapBook主界面展示了捕获的网页内容及注释功能，左侧为已保存项目列表，右侧为带批注的网页内容

核心模块解析

功能架构

WebScrapBook采用模块化设计，主要包含以下核心组件：

1. 捕获系统 (src/capturer/)

   • 提供多种捕获模式：完整页面、选中区域、书签等
   • 支持批量捕获和定时捕获功能
   • 处理资源依赖和链接重写

2. 内容管理 (src/scrapbook/)

   • 树形结构组织保存的内容
   • 标签分类和全文搜索功能
   • 支持内容编辑和注释添加

3. 查看器 (src/viewer/)

   • 渲染保存的网页内容
   • 提供批注和高亮工具
   • 支持离线浏览和内容导出

4. 核心服务 (src/core/)

   • 后台事件处理 (background.js)
   • 浏览器上下文交互 (content.js)
   • 用户设置管理 (options.html)

关键文件说明

• src/core/background.js：后台脚本，处理浏览器事件和核心业务逻辑
• src/core/content.js：内容脚本，负责页面交互和内容捕获
• src/scrapbook/bookTree.js：实现 scrapbook 内容的树形管理
• src/viewer/view.js：处理保存内容的渲染和交互

配置指南

主要配置文件

项目配置主要通过 config.json 进行管理，关键配置项包括：

{
  "general": {
    "scrapbook_dir": "./scrapbooks",  // 存储目录
    "format_default": "html",         // 默认保存格式
    "index_database": "sqlite"        // 索引数据库类型
  },
  "remote": {
    "server": "http://localhost:8080", // 后端服务器地址
    "sync": true                       // 启用同步功能
  }
}

扩展配置

通过扩展选项页面 (src/core/options.html) 可配置：

• 保存质量和格式
• 捕获规则和过滤设置
• 快捷键自定义
• 界面布局和主题

高级使用场景

服务器功能

WebScrapBook提供服务器功能以支持高级特性：

1. 启动服务器

   python server.py
   

2. 服务器功能

   • 远程访问已保存内容
   • 多设备同步
   • 高级搜索和分析
   • 协作分享功能

批量处理

通过 src/capturer/batch.js 支持：

• 批量捕获多个URL
• 定时自动捕获
• 按规则自动分类
• 格式批量转换

注意事项

1. 浏览器兼容性

   • 支持 Chrome、Firefox 等现代浏览器
   • 需要启用浏览器扩展开发者模式

2. 存储管理

   • 定期清理不需要的内容以节省空间
   • 重要内容建议备份 scrapbooks 目录

3. 性能优化

   • 大量内容建议使用 SQLite 数据库
   • 禁用不必要的资源捕获可提高性能

4. 安全注意

   • 仅从可信来源安装扩展
   • 服务器功能启用时注意网络安全设置

通过以上功能，WebScrapBook为用户提供了完整的网页内容捕获、管理和利用解决方案，适合学术研究、内容创作和知识管理等多种应用场景。详细功能和更新说明可参考项目的CHANGELOG.md文件。