教程详情

1. 准备开发环境
- 创建扩展框架：在Chrome桌面版点击右键→选择“新建扩展”→自动生成`manifest.json`和基础文件夹（需保持默认结构）。
- 引入OCR库：下载TesseractJS或Browser-OSS服务→将脚本文件放入扩展目录→在`manifest.json`的`content_scripts`中声明依赖（如`"js/tesseract.min.js"`）。
2. 配置权限与规则
- 申请必要权限：在`manifest.json`添加`"permissions": ["activeTab", "tabs", ""]`→允许插件访问任意网页内容。
- 设置注入时机：在`content_scripts`配置中指定`"run_at": "document_end"`→确保页面完全加载后再执行脚本（避免元素未渲染问题）。
3. 实现核心识别功能
- 捕获屏幕图像：使用`2canvas`将选中区域转为Canvas→调用Tesseract的`recognize`方法→提取文字并显示在弹窗（需处理跨域图片权限）。
- 多语言支持：在OCR配置中添加`lang: 'chi_sim'`→支持简体中文识别→可动态切换语言参数（如`eng`对应英文）。
4. 设计交互界面
- 添加工具按钮：在插件弹窗HTML中放置按钮→绑定`click`事件→触发截图并调用OCR（按钮文字需简洁，如“识别文字”）。
- 显示结果优化：将识别文字高亮标注→支持复制到剪贴板→错误提示用红色字体（如“未检测到文字”）。
5. 测试与发布
- 本地调试：在Chrome打开`chrome://extensions/`→开启“开发者模式”→加载扩展文件夹→在测试页按`Ctrl+Shift+I`查看日志（重点检查跨域错误）。
- 打包提交：使用Chrome打包工具生成`.crx`文件→上传至Chrome商店→填写详细描述（需包含“OCR工具”关键词）。