text-saver：随时保存任意网页文本的浏览器扩展

text-saver 是一个简洁实用的浏览器扩展，让用户能够随时保存网页上的文本内容。无论是在阅读技术文档、研究论文还是浏览新闻时，遇到有价值的内容都可以一键保存，彻底解决"稍后阅读"却再也找不到的困扰。

项目简介

text-saver 由开发者 Jiacai Liu 创建并维护，是一个开源的浏览器扩展项目。该项目在 GitHub 上获得了 39 个 stars，主要使用 JavaScript (69.4%) 和 HTML (26.9%) 编写。项目已于 2025 年 4 月归档，转为只读状态。

项目的核心定位是解决 GitHub 等网站没有"SAVE"按钮的问题——当用户在浏览 issues、pull requests 或评论时，经常遇到一些值得深入研究的观点，但缺乏便捷的保存方式。text-saver 正是为了解决这个问题而生。

核心特性

一键保存: 通过右键菜单"Add to Text Saver"快速保存内容
智能识别: 自动识别选中文本、悬停链接或当前页面 URL
跨浏览器支持: 支持 Chrome、Firefox 和 Edge 三大主流浏览器
数据导出: 支持将保存的文本导出到本地磁盘，避免厂商锁定
暗黑模式: v1.4.0 版本新增颜色方案切换功能
存储统计: 实时显示已保存内容的存储空间占用
通知提醒: 保存成功后显示通知提示

技术栈

JavaScript - 核心功能实现（69.4%）
HTML - 选项页面和界面（26.9%）
Bootstrap - UI 框架，用于选项页面样式
Makefile - 构建脚本（3.7%）

安装指南

官方商店安装（推荐）

Chrome 网上应用店: https://chrome.google.com/webstore/detail/text-saver/egelicndigijclebpggemngfhpnkeglk
Firefox 附加组件: https://addons.mozilla.org/firefox/addon/text-saver/
Edge 外接程序: https://microsoftedge.microsoft.com/addons/detail/text-saver/pbjcfmfdhpogmclbpfenjkajicbpfeco

手动安装

bash

# 克隆仓库
git clone https://github.com/jiacai2050/text-saver.git
cd text-saver

# 安装依赖并构建
make build

# 或直接使用 npm
npm install
npm run build

构建完成后，在浏览器的扩展管理页面加载 dist/ 目录作为未打包的扩展。

使用方法

安装扩展后，在任意网页上右键点击，选择"Add to Text Saver"：

保存选中文本: 先选中网页上的文字，再右键保存
保存链接: 鼠标悬停在图片或链接上，右键保存链接地址
保存页面: 当没有选中文本或悬停链接时，保存当前页面 URL

所有保存的内容可以在扩展的选项页面中查看和管理。

option.html 代码解析

option.html 是扩展的选项页面，采用 Bootstrap 5 构建：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="libs/bootstrap.min.css" />
  <title>Save texts anytime, anywhere</title>
</head>
<body>
  <div class="container">
    <!-- 标题区域 -->
    <div class="d-flex align-items-center justify-content-center">
      <h2>Save texts anytime, anywhere</h2>
    </div>

    <!-- 操作按钮 -->
    <div class="d-flex align-items-center justify-content-center">
      <a class="btn btn-primary btn-sm" href="https://github.com/jiacai2050/text-saver">Home</a>
      <button type="button" class="btn btn-primary btn-sm" id="btn-export">Export</button>
    </div>

    <!-- 文本列表表格 -->
    <table class="table table-hover table-responsive">
      <thead>
        <tr>
          <th scope="col">Text</th>
          <th scope="col">CreatedAt</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody id="text-list"></tbody>
    </table>

    <!-- 设置面板 -->
    <div class="card">
      <h5 class="card-header">Settings</h5>
      <div class="card-body">
        <!-- 存储大小显示 -->
        <div class="mb-3 row">
          <label class="col-sm-2 col-form-label">Storage Size</label>
          <div class="col-sm-10">
            <input class="form-control-plaintext" disabled id="input-size" />
          </div>
        </div>

        <!-- 通知开关 -->
        <div class="mb-3 row">
          <label class="col-sm-2 col-form-label">Enable notification</label>
          <div class="col-sm-10">
            <input type="checkbox" class="form-check-input" id="input-notification" />
          </div>
        </div>

        <!-- 颜色方案选择 -->
        <div class="mb-3 row">
          <label class="col-sm-2 col-form-label">Color Scheme</label>
          <div class="col-sm-10">
            <select class="form-select" id="select-color">
              <option value="system">Sync with System</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </div>
        </div>

        <!-- 清空按钮 -->
        <div class="mb-3 row">
          <div class="col-sm-2">
            <button type="button" class="btn btn-danger btn-sm" id="btn-clear">
              Clear ALL texts
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="libs/bootstrap.min.js"></script>
  <script type="module" src="option.js"></script>
</body>
</html>

代码结构说明

区域	功能
标题区域	显示扩展名称和标语
操作按钮	返回主页和导出数据
文本列表	展示所有保存的文本记录
设置面板	存储统计、通知开关、主题切换、清空数据

权限说明

扩展使用以下浏览器权限：

权限	用途
`contextMenus`	添加右键菜单项
`storage` / `unlimitedStorage`	存储保存的文本数据
`tabs`	获取当前页面标题和 URL
`notifications`	保存成功后的通知提示
`downloads`	导出数据到本地磁盘

版本更新记录

v1.4.2 (2023-10-07): 修复 Firefox 下 contextMenu.create 调用问题
v1.4.0 (2023-03-16): 新增颜色方案切换（暗黑模式）
v1.3.0 (2023-03-14): 右键菜单类型改为 all，支持在图片或链接上保存
v1.2.0 (2023-03-12): 使用 textContent 渲染避免 XSS，新增存储大小统计
v1.1.0 (2023-03-12): 添加选项设置功能
v1.0.1 (2023-03-11): 首次发布

项目链接

GitHub 仓库: https://github.com/jiacai2050/text-saver
新仓库地址: https://github.com/jiacai2050/my-works/tree/main/text-saver
Product Hunt: https://www.producthunt.com/posts/textsaver
许可证: MIT License