Chrome 二维码生成器

一个简单易用的Chrome浏览器扩展，可以一键生成当前网页的二维码，方便手机扫码访问。

📋 功能特点

• 🚀 一键生成当前网页的二维码
• 📱 手机扫码即可访问
• 🎨 简洁美观的用户界面
• 📐 256x256高清二维码
• 🔧 高纠错级别，扫码更可靠
• 🔄 自动获取当前标签页URL

🚀 快速开始

环境要求

• Chrome浏览器（推荐最新版本）
• Windows / macOS / Linux 操作系统

安装步骤

方法一：开发者模式加载（推荐）

1. 克隆或下载项目

   git clone https://github.com/jinghong-me/Chrome-Qcode.git
   cd Qcode

2. 打开Chrome扩展管理页面

   • 在Chrome地址栏输入：chrome://extensions/
   • 或者通过菜单：设置 → 扩展程序 → 管理扩展程序

3. 启用开发者模式

   • 打开右上角的「开发者模式」开关

4. 加载扩展程序

   • 点击「加载已解压的扩展程序」按钮
   • 选择项目文件夹 Qcode
   • 扩展程序加载成功！

方法二：打包安装（待发布）

注意：此方法需要将扩展程序打包为.crx文件并发布到Chrome Web Store。

📖 使用说明

基本使用

1. 打开任意网页

   • 在Chrome浏览器中访问你想要生成二维码的网页

2. 点击扩展图标

   • 在Chrome工具栏中找到「二维码生成器」图标
   • 点击图标打开弹出窗口

3. 查看二维码

   • 弹出窗口会显示当前网页的URL
   • 下方会自动生成对应的二维码

4. 手机扫码

   • 使用手机的相机或二维码扫描应用
   • 扫描屏幕上的二维码
   • 手机会自动打开对应的网页

功能演示

📁 项目结构

Qcode/
├── manifest.json          # Chrome扩展配置文件
├── popup.html             # 弹出窗口HTML
├── popup.js               # 弹出窗口JavaScript逻辑
├── qrcode.min.js          # QRCode.js库文件
├── README.md              # 项目说明文档
└── icons/                 # 图标文件夹（可选）
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

🛠️ 技术栈

• Chrome Extension API: Chrome扩展开发
• HTML5: 弹出窗口界面
• CSS3: 样式设计
• JavaScript: 逻辑处理
• QRCode.js: 二维码生成库

🔧 配置说明

manifest.json

主要配置项说明：

{
  "manifest_version": 3,                    // 使用Chrome Manifest V3
  "name": "二维码生成器",                   // 扩展名称
  "version": "1.0.0",                      // 版本号
  "description": "一键生成当前网页的二维码", // 描述
  "permissions": ["activeTab"],             // 权限：获取当前活动标签页
  "action": {
    "default_popup": "popup.html"          // 默认弹出页面
  }
}

自定义二维码

你可以修改 popup.js 中的配置来自定义二维码：

new QRCode(qrcodeContainer, {
  text: url,                    // 二维码内容
  width: 256,                   // 宽度（像素）
  height: 256,                  // 高度（像素）
  colorDark: '#000000',         // 深色
  colorLight: '#ffffff',        // 浅色
  correctLevel: QRCode.CorrectLevel.H  // 纠错级别
});

纠错级别说明

• QRCode.CorrectLevel.L - 低（7%）
• QRCode.CorrectLevel.M - 中（15%）
• QRCode.CorrectLevel.Q - 较高（25%）
• QRCode.CorrectLevel.H - 高（30%）【默认】

🎨 自定义样式

你可以通过修改 popup.html 中的 <style> 标签来自定义界面样式：

body {
  width: 320px;        /* 弹出窗口宽度 */
  background: #f5f5f5; /* 背景颜色 */
}

🐛 常见问题

Q: 扩展程序无法加载？

A: 请确保：

• 已开启「开发者模式」
• 选择的文件夹包含 manifest.json 文件
• Chrome版本支持Manifest V3（Chrome 88+）

Q: 二维码无法扫描？

A: 可能的原因：

• 确保二维码完整显示在屏幕上
• 手机摄像头对焦准确
• 光线充足
• 尝试增加二维码尺寸（修改width和height）

Q: 如何更新扩展程序？

A:

1. 修改代码后保存文件
2. 在 chrome://extensions/ 页面找到扩展
3. 点击刷新按钮 🔄
4. 重新点击扩展图标使用

🔄 更新日志

v1.0.0 (2026-04-05)

• ✨ 初始版本发布
• 🚀 支持一键生成当前网页二维码
• 🎨 简洁美观的用户界面
• 📱 256x256高清二维码

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

• QRCode.js - 优秀的二维码生成库
• Chrome Extension 文档 - 官方开发文档

---

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！