使用 Trae 辅助开发一个网页文本高亮插件

新手第一次开发浏览器插件,抖音刷到了 Trae,这几天就使用它开发了一个浏览器文本高亮插件。做了个七七八八,肯定还有不少 Bug。

项目概述

本插件是一个用于在网页上高亮显示选中文本的工具,支持多种颜色选择、高亮复制和删除等功能。插件基于 Edge 扩展测试开发。

目前只大致开发了内容交互脚本和插件弹出页,后台管理页暂未开发。

项目结构

复制代码
c:\Users\lc\Documents\前端项目代码\Egde高亮插件
├── content/
│   ├── content.js        // 核心逻辑代码
│   └── highlight.css     // 高亮样式
├── popup/
│   ├── popup.css         // 弹出页样式
│   ├── popup.html        // 弹出页HTML
│   └── popup.js          // 弹出页逻辑
└── manifest.json         // 插件配置文件

功能概览

存储结构

使用 chrome.storage.local 管理高亮的存储信息,其存储结构如下

复制代码
[url]
├── item
│ 	├── id
│ 	├── color
│ 	├── startXPath
│ 	├── endXPath
│ 	├── textFingerprint
│ 	├── contextFingerprint
│ 		├── before
│ 		├── after

startXPath、endXPath 是之前尝试使用 startConatiner、endContainer 的 XPath 以及它们的偏移量来确定 Range 的时候添加的,这个方法是不准确的,因为偏移量会受其它高亮的影响。所以它两可以删除。

核心功能

  1. 高亮管理
    • 通过 PageHighlightStorage 类管理高亮信息
      • 使用 chrome.storage.local 实现数据持久化
      • 支持添加、删除、更新和查询高亮记录
  2. 高亮创建
    • 通过 saveHighlightInfo 保存高亮信息
      • 使用 getXPath 获取元素路径
      • 通过 generateTextFingerprintgenerateContextFingerprint 生成文本指纹和上下文指纹
  3. 高亮恢复
    • 通过 restoreHighlights 恢复已保存的高亮
      • 使用 createRangeByFingerprint 根据指纹重新创建Range对象,能处理跨节点的高亮,匹配算法确保高亮位置准确
      • 采用Levenshtein算法进行文本匹配
  4. 高亮操作
    • 通过 createToolbox 创建操作工具框
      • 支持颜色切换、删除和复制高亮内容
      • 使用 applyHighlightToRange 将高亮应用到文本范围
  5. 与插件弹出页交互
    • 通过 chrome.tabs.query、chrome.tabs.sendMessage 和 通过 chrome.tabs.onMessage 建立消息通信,实现清除页面全部功能的按钮
  6. 错误处理
    • 自动清理无效的高亮记录
    • 处理各种边界情况
    • 提供详细的日志输出

dawnkylin/edge-ext-text-highlighter: A web extension for highlighting text

相关推荐
Liudef0631 分钟前
儿童趣味记忆配对游戏
css·游戏·css3
秋田君39 分钟前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡2 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴3 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子3 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead4 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界5 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser5 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹5 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript