小猫抓二维码
全AI写的，我只写了提示词。 这是一个离线优先的 Chrome 扩展，用于在任意网页中快速识别二维码（图片、截图或上传图片），结果在官方侧边栏展示、支持历史记录与快捷方式。
核心功能
-
右键图片识别：在任意图片上右键选择「Scan QR code from image」，会自动打开侧边栏并解析本地图片，避免重复下载或依赖远程服务。
-
截图识别 ：通过扩展图标或快捷键（默认 Ctrl+Shift+Q）触发展示截图工具，手动拖选二维码区域后立即识别，未操作或超时 15 秒自动关闭。 -
-
本地上传识别 ：扩展弹窗和侧边栏都提供上传入口，支持 JPG/PNG/WebP/WEBP，本地
jsQR（bundle）可离线解码多个二维码，并在结果中依次列出。 -
Side Panel 结果展示：扫码结果直接在 Chrome 侧边栏展示，支持展示当前截图/右键图片的预览图，识别失败或找不到二维码时显示红色提示并保留图像；如果识别内容为网址，会以可点击链接形式打开新标签。
-
历史记录与清除 ：所有成功的识别都会写入
chrome.storage.local，侧边栏可随时查看历史、按按钮清空；在弹出窗口也能快速浏览历史并直接点击链接。 -
状态提示 & 进度反馈：侧边栏状态芯片会体现「识别中 / 成功 / 错误 / 取消」等状态，帮助用户确认当前流水线是否可用。
目录结构
manifest.json：Chrome MV3 配置，声明了背景服务工作线程、侧边栏、命令、context menu 等权限。background.js：负责创建右键菜单、响应快捷键、打开侧边栏、处理截图请求并转发给内容脚本。content.js：注入页面，管理截图选择框、调用本地qr-scanner、缓存识别历史并将结果推送给侧边栏。popup.html/popup.js：扩展图标弹出的现代化 UI，可上传图片、查看历史、启动截图，并把结果同步到侧边栏。sidepanel.html/sidepanel.js：自定义侧边栏的面板视图，展示结果、失败提示、预览图、历史记录和附加操作按钮。utils/qr-scanner.js+utils/jsqr.js：封装BarcodeDetector+ 离线jsQR逻辑；capturePreview方法可用来生成当前图像预览。
使用方式
- 安装扩展后点击地址栏右侧图标，可立即上传图片或调用截图按钮。
- 在网页任意图片上右键→「Scan QR code from image」即可立即识别并显示侧边栏结果。
- 按
Ctrl+Shift+Q或弹窗「截图识别」启动截图，选区后立即识别；若超时 15 秒未选区会自动取消。 - 侧边栏「清除记录」可一键清空历史；历史记录支持点击跳转链接。即使识别失败，也会展示预览图与错误提示，便于排查。
离线能力
所有核心逻辑均在本地执行：利用 Chrome 原生 BarcodeDetector 优先识别，在不可用环境下回退到捆绑的 jsQR，不会依赖网络服务；图像数据都通过 canvas 处理，结果直接保存到浏览器存储，适合隐私敏感场景。
建议
- 如果页面禁止截图，可能需要手动刷新或重新打开扩展页面；
- 识别失败时可尝试放大二维码，再次截图或上传；
- 如需更快捷的唤起，可在 Chrome 快捷键设置中修改
capture-qr的键位。
欢迎在本地继续定制样式、国际化文本或增加支持其他二维码格式的逻辑。 我让ai 抄了https://github.com/yang-shuohao/QR-Scanner/tree/master/assets 有需要的可以去学习一下。