feat: 二维码生成插件

1 week ago · 3dd9324308
parent 69a0bda1ec
commit 3dd9324308
10 changed files with 265 additions and 1 deletions
--- a/GEMINI.md
+++ b/GEMINI.md
@ -70,3 +70,4 @@ vue3-mgt-template/
 使用了删除线的就代表已执行完成

 ### 任务列表
+- 当我让你帮我实现某个功能的时候，如果有不明确的功能点，请先像我确认。
--- a/chromePlugin/contentToQrCode/GEMINI.md
+++ b/chromePlugin/contentToQrCode/GEMINI.md
@ -0,0 +1,10 @@
+## 项目简介
+- **子项目名称**：contentToQrCode
+- **项目类型**：该项目属于vue3-mgt-template下的谷歌浏览器插件项目之一
+- **项目功能**：该项目开发完成后会作为插件安装到谷歌浏览器插件中，提供一个页面，当用户复制任何文本内容到该页面中，生成内容对应的二维码，因为二维码内容有长度限制，如果内容超长，请依次生成多个二维码并标示顺序
+
+## 开发规范
+- **中文优先**：所有代码注释、日志输出（例如 `console.log`）、以及提交信息（Commit Message）**必须** 使用中文。
+- **谷歌浏览器插件**：该项目是一个谷歌浏览器插件项目，请严格按照谷歌浏览器插件的开发要求来开发功能
+- **文档和注释**：该项目是一个个人学习记录项目，请尽可能多提供文档和注释。
+- **第三方依赖**：允许使用第三方插件qrcode.js，请使用cdn地址。
--- a/chromePlugin/contentToQrCode/background.js
+++ b/chromePlugin/contentToQrCode/background.js
@ -0,0 +1,19 @@
+// background.js
+
+// 监听插件图标的点击事件
+chrome.action.onClicked.addListener((tab) => {
+  // 定义我们插件页面的URL
+  const pluginPageUrl = chrome.runtime.getURL('index.html');
+
+  // 查询是否已经有打开的插件页面
+  chrome.tabs.query({ url: pluginPageUrl }, (tabs) => {
+    if (tabs.length > 0) {
+      // 如果找到了，就激活第一个找到的标签页和它的窗口
+      chrome.tabs.update(tabs[0].id, { active: true });
+      chrome.windows.update(tabs[0].windowId, { focused: true });
+    } else {
+      // 如果没找到，就创建一个新的标签页
+      chrome.tabs.create({ url: pluginPageUrl });
+    }
+  });
+});
--- a/chromePlugin/contentToQrCode/images/icon128.png
+++ b/chromePlugin/contentToQrCode/images/icon128.png
--- a/chromePlugin/contentToQrCode/images/icon16.png
+++ b/chromePlugin/contentToQrCode/images/icon16.png
--- a/chromePlugin/contentToQrCode/images/icon48.png
+++ b/chromePlugin/contentToQrCode/images/icon48.png
--- a/chromePlugin/contentToQrCode/index.html
+++ b/chromePlugin/contentToQrCode/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>内容转二维码</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="container">
+    <h1>内容转二维码生成器</h1>
+    <p>将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。</p>
+    
+    <textarea id="text-input" rows="10" placeholder="请在此处粘贴您的文本内容..."></textarea>
+    
+    <button id="generate-btn">生成二维码</button>
+    
+    <div id="qrcode-container">
+      <!-- 二维码将在这里生成 -->
+    </div>
+  </div>
+
+  <!-- 引入 qrcode.js 库 -->
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
+  <!-- 引入我们自己的逻辑脚本 -->
+  <script src="main.js"></script>
+</body>
+</html>
--- a/chromePlugin/contentToQrCode/main.js
+++ b/chromePlugin/contentToQrCode/main.js
@ -0,0 +1,75 @@
+// main.js
+
+// 当整个页面的HTML内容加载完成后，执行此函数
+document.addEventListener('DOMContentLoaded', () => {
+  // 获取页面上的关键元素
+  const textInput = document.getElementById('text-input');
+  const generateBtn = document.getElementById('generate-btn');
+  const qrcodeContainer = document.getElementById('qrcode-container');
+
+  // 为“生成二维码”按钮添加点击事件监听器
+  generateBtn.addEventListener('click', () => {
+    // 获取输入框中的文本，并用 trim() 清除前后的空白字符
+    const text = textInput.value.trim();
+
+    // 在生成新的二维码之前，清空之前可能存在的旧二维码
+    qrcodeContainer.innerHTML = '';
+
+    // 如果文本为空，则不执行任何操作
+    if (!text) {
+      console.log('输入内容为空，已中止生成。');
+      return;
+    }
+
+    // 定义每个二维码的最大字符数
+    const chunkSize = 2000;
+    // 计算需要生成多少个二维码
+    const totalChunks = Math.ceil(text.length / chunkSize);
+
+    console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);
+
+    // 循环处理每一块文本
+    for (let i = 0; i < totalChunks; i++) {
+      // 计算当前块的起始和结束位置
+      const start = i * chunkSize;
+      const end = start + chunkSize;
+      // 从总文本中截取当前块的文本
+      const chunk = text.substring(start, end);
+
+      // --- 创建包裹单个二维码及其标签的容器 ---
+      const itemDiv = document.createElement('div');
+      itemDiv.className = 'qrcode-item';
+
+      // --- 创建并添加序号标签 ---
+      const label = document.createElement('p');
+      label.className = 'qrcode-label';
+      // 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
+      label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
+      itemDiv.appendChild(label);
+
+      // --- 创建用于生成二维码的占位符元素 ---
+      const qrcodeDiv = document.createElement('div');
+      // 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
+      qrcodeDiv.id = `qrcode-${i}`;
+      itemDiv.appendChild(qrcodeDiv);
+
+      // --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
+      qrcodeContainer.appendChild(itemDiv);
+
+      // --- 使用 qrcode.js 库生成二维码 ---
+      // 实例化 QRCode 对象
+      // 第一个参数是二维码要渲染到的DOM元素
+      // 第二个参数是配置对象
+      new QRCode(qrcodeDiv, {
+        text: chunk, // 当前块的文本内容
+        width: 400,  // 二维码宽度
+        height: 400, // 二维码高度
+        colorDark: '#000000', // 二维码颜色
+        colorLight: '#ffffff', // 二维码背景色
+        correctLevel: QRCode.CorrectLevel.H // 纠错级别，H是最高级
+      });
+      
+      console.log(`已为第 ${i + 1} 块内容生成二维码。`);
+    }
+  });
+});
--- a/chromePlugin/contentToQrCode/manifest.json
+++ b/chromePlugin/contentToQrCode/manifest.json
@ -0,0 +1,17 @@
+{
+  "manifest_version": 3,
+  "name": "内容转二维码",
+  "version": "1.0",
+  "description": "将长文本内容分割并生成一个或多个二维码的页面。",
+  "action": {
+    "default_title": "内容转二维码"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  }
+}
--- a/chromePlugin/contentToQrCode/style.css
+++ b/chromePlugin/contentToQrCode/style.css
@ -0,0 +1,113 @@
+/* style.css */
+
+/* 全局样式和基础布局 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f4f5f7;
+  color: #172b4d;
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  width: 100%;
+  max-width: 800px;
+  background-color: #ffffff;
+  padding: 24px 48px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+h1 {
+  color: #091e42;
+  text-align: center;
+}
+
+p {
+  text-align: center;
+  color: #5e6c84;
+  margin-bottom: 24px;
+}
+
+/* 文本输入框样式 */
+textarea#text-input {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #dfe1e6;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+  resize: vertical; /* 允许用户垂直调整大小 */
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+textarea#text-input:focus {
+  outline: none;
+  border-color: #4c9aff;
+  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.3);
+}
+
+/* 按钮样式 */
+button#generate-btn {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin: 20px 0;
+  background-color: #0052cc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+button#generate-btn:hover {
+  background-color: #0065ff;
+}
+
+button#generate-btn:active {
+  background-color: #0747a6;
+}
+
+/* 二维码容器和项目样式 */
+#qrcode-container {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+  align-items: center; /* 居中对齐 */
+  gap: 30px; /* 二维码之间的间距 */
+}
+
+.qrcode-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px;
+  background-color: #fafbfc;
+  border: 1px solid #dfe1e6;
+  border-radius: 4px;
+}
+
+.qrcode-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: #5e6c84;
+  margin-bottom: 10px;
+}
+
+/*
+  通过 CSS 限制二维码图片的最大宽度，以防其在页面上过大。
+  高度设为 auto 以保持其宽高比。
+*/
+.qrcode-item img {
+  max-width: 400px;
+  height: auto;
+  background-color: white;
+  padding: 10px;
+  border: 1px solid #ccc;
+}