网页二维码 Chrome 插件

一个简洁优雅的 Chrome 插件，可以为当前浏览的网页生成带有网站图标的二维码。

功能特点

• 自动为当前网页生成二维码
• 二维码中央显示网站的 favicon 图标
• 二维码下方显示网站名称
• 采用苹果风格设计，简洁优雅
• 支持一键扫码访问网页
• 支持点击图标显示/隐藏二维码
• 自适应网页布局

技术架构

• 前端：HTML5, CSS3, JavaScript
• 二维码生成：qrcode.js
• 图标处理：Chrome Extension API
• 安全性：遵循 Chrome Extension CSP 策略
• 兼容性：支持 Chrome Manifest V3

项目状态

第一阶段 - MVP版本 ✅

• 项目基础架构搭建
• manifest.json 配置完成
• 二维码生成功能实现
• favicon 获取与显示
• 网站名称显示
• 浮动图标实现
• 点击切换显示/隐藏

第二阶段 - 优化 🚀

• 代码结构优化
• 安全性增强（CSP 合规）
• 错误处理完善
• UI/UX 进一步优化
• 性能优化
• 用户反馈收集

安装说明

1. 克隆仓库到本地

git clone [仓库地址]

2. 安装依赖（如果需要）

# 目前项目使用原生JS，暂不需要安装依赖

3. 在Chrome中加载插件
   • 打开 Chrome 浏览器，进入扩展程序页面（chrome://extensions/）
   • 开启开发者模式（右上角开关）
   • 点击"加载已解压的扩展程序"
   • 选择项目目录即可

使用说明

1. 安装插件后，在浏览器右下角会出现插件图标
2. 点击图标可以切换显示/隐藏二维码
3. 二维码中包含：
   • 当前网页的二维码
   • 网站的 favicon 图标
   • 网站名称
4. 使用手机扫描二维码即可访问当前网页

项目结构

WebQRCode/
├── manifest.json          // 插件配置文件
├── content/              // 内容脚本
│   ├── content.js       // 主要功能实现
│   ├── content.css      // 样式文件
│   └── qrcode-generator.js // 二维码生成器
├── icons/               // 插件图标
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── lib/                 // 第三方库
    └── qrcode.min.js    // QRCode 库

技术细节

核心功能实现

• 使用 Content Scripts 注入页面
• 通过 Chrome Extension API 加载资源
• 使用自定义事件处理二维码生成
• 采用 Promise 处理异步操作

安全性考虑

• 遵循 Content Security Policy
• 避免使用内联脚本
• 使用 web_accessible_resources 控制资源访问
• 最小权限原则配置

性能优化

• 按需加载 QRCode 库
• 避免不必要的DOM操作
• 及时清理无用的脚本标签

后续计划

1. 功能增强

   • 支持自定义二维码样式
   • 添加二维码分享功能
   • 支持历史记录功能

2. 性能优化

   • 减小插件体积
   • 优化资源加载速度
   • 添加缓存机制

3. 用户体验

   • 添加设置面板
   • 支持快捷键操作
   • 添加动画效果

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

许可证

MIT License