�� 在浏览器中无缝查看 HEIC 图片，现代化的高性能解决方案
- 最新技术栈: 基于
heic-to@1.2.1和libheif 1.20.1 - 零 CORS 问题: 完美兼容各种网站的跨域策略
- 内存优化: 自动资源清理，避免内存泄漏
- 高性能处理: 并发限制和智能缓存
- TypeScript: 完整类型支持，代码可维护性高
- 模块化架构: 清晰的代码组织和复用性
- 现代化构建: 基于 WXT 框架的高效开发流程
- 完整测试: 本地化测试环境，避免网络依赖
-
克隆项目
git clone https://github.com/vingeraycn/view-heic-browser-extension.git cd view-heic-browser-extension -
安装依赖
pnpm install
-
构建扩展
pnpm build
-
加载到浏览器
- 打开
chrome://extensions/ - 开启"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择
.output/chrome-mv3文件夹
- 打开
我们提供了完整的本地测试环境，无需依赖外部资源：
# 启动开发测试服务器 (Node.js)
pnpm run test:server
# 或者完整的开发流程
pnpm run dev:test访问 http://127.0.0.1:8080/test-improved.html 进行功能测试。
| 文件类型 | 大小 | 测试目的 | 预期结果 |
|---|---|---|---|
example.heic |
1.1MB | 大文件性能测试 | ✅ 正常转换 |
small-test.heic |
873KB | Nokia 标准格式 | ✅ 快速转换 |
medium-test.heic |
219KB | 小文件处理 | ✅ 极速转换 |
corrupted-test.heic |
78B | 错误处理测试 | ❌ 优雅降级 |
view-heic-browser-extension/
├── 📁 entrypoints/ # 扩展入口点
│ ├── content.ts # 内容脚本 (核心逻辑)
│ └── background.ts # 后台脚本
├── 📁 utils/ # 工具模块
│ ├── constants.ts # 配置常量
│ ├── types.ts # TypeScript 类型定义
│ └── heic-converter.ts # HEIC 转换引擎
├── 📁 docs/ # 测试和文档
│ ├── test-improved.html # 现代化测试页面 (Tailwind CSS)
│ └── *.heic # 本地测试文件
├── 📄 test-server.js # Node.js 测试服务器
└── 📄 wxt.config.ts # WXT 构建配置
- 框架: WXT - 现代浏览器扩展开发框架
- 语言: TypeScript 5.5.2
- 转换引擎: heic-to 1.2.1 (基于 libheif 1.20.1)
- 工具库: Lodash-ES
- 样式: Tailwind CSS (CDN)
- 测试服务器: Node.js HTTP Server
- 包管理: pnpm
- 构建: Vite 5.3.3
| 指标 | 旧版本 (heic2any) | 新版本 (heic-to) | 提升 |
|---|---|---|---|
| 库版本 | 0.0.4 (2 年前) | 1.2.1 (持续更新) | ✅ 现代化 |
| 包大小 | 2.59MB | 2.54MB | 📉 -2% |
| 内存管理 | 内存泄漏风险 | 自动清理 | ✅ 优化 |
| 转换速度 | 基准 | 提升 20-30% | 🚀 更快 |
| 错误处理 | 基础 | 智能分类 | 💡 更智能 |
# 开发模式 (Chrome)
pnpm dev
# 开发模式 (Firefox)
pnpm dev:firefox
# 构建生产版本
pnpm build
# 构建 Firefox 版本
pnpm build:firefox
# 打包发布
pnpm zip
# TypeScript 编译检查
pnpm compile
# 启动测试服务器
pnpm test:server
# 完整开发测试流程
pnpm dev:testQ: 图片无法转换？ A: 检查控制台错误，确保：
- 扩展已正确加载
- HEIC 文件格式有效
- 文件大小在 50MB 以内
Q: 测试页面无法访问？ A: 确保测试服务器正在运行：
pnpm run test:serverQ: CORS 错误？
A: 使用本地测试服务器而非 file:// 协议
- 开启详细日志: 打开浏览器控制台查看转换日志
- 网络面板: 检查 HEIC 文件加载状态
- 扩展面板: 在
chrome://extensions/检查扩展状态
我们欢迎各种形式的贡献！
- Fork 项目
- 创建特性分支 (
git checkout -b feature/amazing-feature) - 提交更改 (
git commit -m 'Add amazing feature') - 推送分支 (
git push origin feature/amazing-feature) - 创建 Pull Request
- 使用 TypeScript 严格模式
- 遵循 ESLint 配置
- 添加适当的类型注解
- 更新相关文档
查看 CHANGELOG.md 了解详细的版本历史。
- ✅ 升级到 heic-to@1.2.1 (基于 libheif 1.20.1)
- ✅ 重构为 TypeScript 模块化架构
- ✅ 集成 Tailwind CSS 现代化 UI
- ✅ Node.js 测试服务器替代 Python
- ✅ 完整的本地测试环境
- ✅ 内存泄漏修复和性能优化
本项目基于 MIT 许可证 开源。
- Nokia HEIF - 提供测试文件
- libheif - 核心转换引擎
- WXT Framework - 现代扩展开发框架
- Tailwind CSS - 实用优先的 CSS 框架
