Web Tag Marker

一个浏览器文本标记插件，支持使用不同颜色的标签标记网页文本。

功能特性

• ✨ 标签管理: 创建自定义标签，设置前景色和背景色
• 🏷️ 文本标记: 选中网页文本后点击标签进行标记
• 📋 标记查看: 在管理界面查看当前页面的所有标记
• 🎨 自定义样式: 每个标签可以设置独立的颜色
• 💾 数据持久化: 标签和标记数据自动保存
• 🌐 全站点支持: 支持所有网站的文本标记

安装方法

开发者模式安装

1. 克隆或下载此项目
2. 打开 Chrome 浏览器，访问 chrome://extensions/
3. 启用右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择项目根目录
6. 插件安装完成！

生成图标

在浏览器中打开 icons/create-icons.html，下载所有尺寸的图标并保存到 icons/ 目录。

使用说明

创建标签

1. 点击浏览器工具栏的插件图标
2. 在"标签管理"选项卡中输入标签名称
3. 选择前景色和背景色
4. 点击"添加标签"

标记文本

1. 在任意网页中选中想要标记的文本
2. 弹出的标签列表中选择一个标签
3. 文本即被标记为对应的颜色样式

查看标记

1. 打开插件管理界面
2. 切换到"页面标记"选项卡
3. 查看当前页面的所有标记

技术栈

• Manifest V3: 符合最新的浏览器扩展标准
• Vanilla JavaScript: 无依赖，轻量级实现
• Chrome Storage API: 数据持久化
• Content Scripts: 页面内容操作

项目结构

web-tag-marker/
├── manifest.json          # 扩展配置文件
├── popup.html             # 管理界面
├── popup.css              # 管理界面样式
├── popup.js               # 管理界面逻辑
├── content.js             # 内容脚本
├── content.css            # 内容脚本样式
├── background.js          # 后台脚本
├── icons/                 # 图标文件
│   └── create-icons.html  # 图标生成器
└── README.md              # 项目说明

开发计划

• 支持标签编辑
• 支持标记删除
• 支持标记搜索
• 支持导出/导入数据
• 支持标签分组
• 支持快捷键操作

兼容性

• Chrome 88+
• Edge 88+
• 其他基于 Chromium 的浏览器

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！