Chrome系列5：ScriptCat支持AI助手（终极版幻想）

随笔

前文：https://boommanpro.cn/post/chrome-4-script-cat-support-ai 更多是在1月31日到2月1日周末开发的，当时也比较懒，没有记录，假期刚好想随code，所以写了scriptcat ai，但是今天听抖音时，发现还是要知行合一，所以知行合一很重要，真的是一种境界，慢慢做吧。

终极版

# ScriptCat插件开发相关问题与需求梳理
## 一、Tampermonkey插件开发的核心数据需求
1. 理论层面，需覆盖浏览器及用户操作的全量数据
2. 具体包含console调试信息、network网络请求信息、local storage本地存储信息等
3. 参考实现：类Chrome Devtools的ScriptCat插件（https://scriptcat.org/en/script-show-page/2537），底层依赖eruda能力（https://github.com/liriliri/eruda）、chobitsu插件（https://github.com/liriliri/chobitsu）

## 二、界面视觉与交互优化
1. 元素选择功能视觉效果不佳，期望复刻Chrome原生开发者工具的配色，可参考eruda的视觉实现（可通过AI解析相关源码）
2. Sider Panel布局与展示问题：trace布局设计不合理；request和response内容展示效果差，其中response为流式日志，无效内容冗余，仅需展示合并后的纯文本内容
3. Sider Panel域名唤起规则：仅在目标页面主动打开，非主动唤起的域名下自动隐藏

## 三、AI对话功能相关需求
1. 配置固化问题：当前prompt源代码、LLM相关配置为硬编码形式，期望在管理端支持可视化配置
2. 对话历史管理：解决对话历史易删除的问题，基于「域名+时间」维度，将对话记录存储至background的AI对话模块，提升查找便捷性
3. 唤起与上传能力：支持在宿主页面通过右键唤起AI对话；支持选中页面文字内容并上传至AI对话模块
4. Sider Panel内置能力：需具备AI对话历史的管理能力
5. 知识库能力：为AI对话接入知识库，存储ScriptCat官网相关知识，提升AI解答的效率与准确性

## 四、Tampermonkey代码操作与测试能力
1. 页面效果模拟：支持一键模拟页面自动刷新后的展示效果
2. 代码生成与测试：支持一键生成可运行的Tampermonkey代码，并提供代码测试能力
3. 基于响应头的测试：针对Tampermonkey代码，增加基于响应头的测试运行能力
4. 代码引用与编辑：支持一键引用当前域名下生效的Tampermonkey代码，且可在AI对话中对代码进行修改、保存操作
5. 版本管理：为当前的Tampermonkey代码增加类Git的版本管理能力，同时支持变更日志的记录功能

## 五、页面元素解析优化
1. 核心问题：直接上传页面源码时，上下文内容受限（256k容量不足），需对当前页面进行简化处理
2. 可选解决方案：
    方案一：采用agent-browser的snapshot方式处理页面
    方案二：简化HTML元素结构，仅保留含有效义的class或id属性，删除所有文本内容；在对话框中插入#标签，标注对应的CSS Selector或XPath

问题汇总(方便思考)：

提示词：我在编写scriptcat插件，思考到有一些问题，描述如下，但是部分问题的归纳总结或者分类不好，请优化，注意不要删除或者改动原本含义。

1. 常见的tampermonkey插件开发需要哪些数据？

   1. 理论所有和浏览器及用户操作数据都需要。

   2. 包含console调试信息，network信息，local storage信息等等。

   3. 所以他怎么实现？有一个类似chrome devtools的tampermonkey插件：https://scriptcat.org/en/script-show-page/2537

      1. 底层能力：https://github.com/liriliri/eruda、https://github.com/liriliri/chobitsu

2. 元素选择当前太丑了？

   1. 期望和chrome原生的dev tools一样，配色一样，详情也可以参考eruda，看起来效果一样，可以让ai扒一扒源码。

3. 对话的prompt源代码hard code？

   1. 期望prompt，以及llm配置期望在管理端可以配置。

4. 对话历史会删除？

   1. 基于域名 + 时间，存储到background的AI 对话里面，方便查找。

5. 一键模拟页面自动刷新后的效果？

   1. 一键生成tampermonkey可运行代码，并且进行测试

   2. 针对tampermonkey代码（基于响应头），增加测试运行效果。

   3. 可以一键引用当前域名生效的tampermonkey代码，支持ai 对话，并且可以修改保存。

   4. 当前的tampermonkey代码支持git类似的版本管理，支持变更日志记录能力。

6. 页面元素解析的问题？

   1. 当前如果直接上传源码，上下文不够（256k）的也不够用，所以需要对当前页面简化。

      1. 方案一：agent-broswer的snapshot

      2. 方案二：简化html元素，仅保留有意义的class或者id，除去文本全部删除，对话框插入#标签，标明引用css selector或者xpath

7. sider panel的切换问题，仅在目标页面打开sider panel，如果当前域名不是主动唤起的，则自动隐藏。

8. 支持宿主页面右键唤起AI 对话能力，对于文字内容可以选中上传。

9. sider panel的trace布局设置不合理，request和response的展示太丑了。

10. response因为是流式日志，所以无效内容太多，其实仅需要合并后的文本内容即可。

11. sider panel本身的的历史对话能力，可以对ai对话进行管理。

12. 支持ai 对话的知识库能力，对scriptcat的官网知识进行存储，方便ai高效实现。