feat: 二维码生成插件

1 week ago · 3dd9324308
parent 69a0bda1ec
commit 3dd9324308
10 changed files with 265 additions and 1 deletions
--- a/GEMINI.md
+++ b/GEMINI.md
@ -69,4 +69,5 @@ 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;
 }