Merge branch 'dev'

Author: DeepLifeStudio

README.md

@@ -11,12 +11,14 @@
 - [x] **Markdown 渲染**：支持以 Markdown 格式渲染 AI 回复，便于查看包括列表、代码块等格式化内容。
 - [x] **一键复制**：一键将 AI 回复复制到剪贴板，方便快速使用。
 - [x] **重新回答选项**：如果对 AI 回复不满意，用户可以轻松重新提问，获取新的回答。
+- [x] **代码复制功能**：增强代码片段复制功能。
+- [x] **语言切换功能**：允许用户根据偏好切换回答的语言类型。
+
+
 
 ## 即将实现的功能
 
-- [ ] **代码复制功能**：增强代码片段复制功能。
 - [ ] **多轮对话**：支持多轮对话功能，使用户可以与 AI 进行连续的深度互动，不局限于一次性问题。
-- [ ] **语言切换功能**：允许用户根据偏好切换回答的语言类型。
 - [ ] **更多功能**：根据用户的需求和反馈，我们将在未来的版本中添加更多功能。
 
 ## 安装步骤

src/background.js

@@ -1,8 +1,26 @@
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if (request.action === "getApiKey") {
-    chrome.storage.sync.get('apiKey', function(data) {
-      sendResponse({apiKey: data.apiKey});
+  if (request.action === "getApiKeyAndLanguage") {
+    chrome.storage.sync.get(["apiKey", "language"], function (data) {
+      sendResponse({ apiKey: data.apiKey, language: data.language || "zh" });
     });
-    return true;  // 保持消息通道开放，因为 sendResponse 是异步的
+    return true; // Keep the message channel open for asynchronous response
   }
-});
+});
+// Create context menu on extension installation
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: "createPopup",
+    title: "DeepSeek AI",
+    contexts: ["selection"],
+  });
+});
+
+// Handle context menu clicks
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === "createPopup") {
+    chrome.tabs.sendMessage(tab.id, {
+      action: "createPopup",
+      selectedText: info.selectionText,
+    });
+  }
+});

src/content/api.js

@@ -1,5 +1,6 @@
 import { md } from "./markdown";
 import { getAllowAutoScroll } from "./scrollControl";
+
 export async function getAIResponse(
   text,
   responseElement,
@@ -12,8 +13,9 @@ export async function getAIResponse(
   let allowAutoScroll = true;
   iconContainer.style.display = "none";
   iconContainer.dataset.ready = "false";
-  const { apiKey } = await new Promise((resolve) => {
-    chrome.runtime.sendMessage({ action: "getApiKey" }, resolve);
+
+  const { apiKey, language } = await new Promise((resolve) => {
+    chrome.runtime.sendMessage({ action: "getApiKeyAndLanguage" }, resolve);
   });
 
   if (!apiKey) {
@@ -34,8 +36,11 @@ export async function getAIResponse(
         messages: [
           {
             role: "system",
-            content:
-              "你是一个有帮助的AI助手，无论用户选择哪种语言，你都能够以用户选择的语言提供文本回答。",
+            content: `You are a helpful AI assistant. ${
+              language === "auto"
+                ? "Please detect the language of the user's input and respond in the same language."
+                : `The user's preferred language is ${language}. Regardless of the input language, you must respond in ${language} from now on.`
+            } Always prioritize clear and effective communication.`,
           },
           { role: "user", content: text },
         ],
@@ -90,7 +95,7 @@ export async function getAIResponse(
     iconContainer.dataset.ready = "true";
   } catch (error) {
     console.error("Fetch error:", error);
-    responseElement.innerHTML = "请求失败，请稍后重试。";
+    responseElement.innerHTML = "Request failed. Please try again later.";
   }
 }
 

src/content/content.js

@@ -1,18 +1,35 @@
-import { createIcon, createSvgIcon } from "./icon";
-import { createPopup, stylePopup, styleResponseContainer } from "./popup";
-
+import { createIcon } from "./icon";
+import { createPopup } from "./popup";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 
 let aiResponseContainer;
 let isCreatingPopup = false;
+let canCreateIcon = true;
 
 const link = document.createElement("link");
 link.rel = "stylesheet";
 link.href = chrome.runtime.getURL("style.css");
 document.head.appendChild(link);
 
+// Function to handle popup creation
+function handlePopupCreation(selectedText, rect) {
+  if (isCreatingPopup) return;
+  isCreatingPopup = true;
+  canCreateIcon = false;
+
+  // Create popup
+  createPopup(selectedText, rect);
+
+  // Reset flags after a short delay
+  setTimeout(() => {
+    isCreatingPopup = false;
+    canCreateIcon = true;
+  }, 100);
+}
+
+// Handle mouseup event to create icon
 document.addEventListener("mouseup", function (event) {
-  if (isCreatingPopup) return; // 如果正在创建 popup，不执行后续操作
+  if (isCreatingPopup || !canCreateIcon) return;
 
   const selectedText = window.getSelection().toString().trim();
   if (selectedText && event.button === 0) {
@@ -22,57 +39,55 @@ document.addEventListener("mouseup", function (event) {
 
     document.body.appendChild(icon);
 
+    // Handle icon click event
     icon.addEventListener("click", function iconClickHandler(e) {
       e.stopPropagation();
       e.preventDefault();
 
-      if (isCreatingPopup) return; // 防止重复创建
-      isCreatingPopup = true;
-
-      // 立即移除事件监听器，防止多次触发
-      icon.removeEventListener("click", iconClickHandler);
+      // Clear selection
+      window.getSelection().removeAllRanges();
 
-      createPopup(selectedText, rect);
-
-      // 使用 setTimeout 来确保 popup 创建后再移除图标和选择
-      setTimeout(() => {
+      // Remove icon and create popup
+      requestAnimationFrame(() => {
         if (document.body.contains(icon)) {
           document.body.removeChild(icon);
         }
-        window.getSelection().removeAllRanges();
-        isCreatingPopup = false; // 重置标志
-      }, 100);
+        handlePopupCreation(selectedText, rect);
+      });
     });
 
-    document.addEventListener("mousedown", function documentClickHandler(e) {
-      if (!isCreatingPopup && !icon.contains(e.target)) {
+    // Handle document mousedown event
+    const documentClickHandler = function (e) {
+      if (e.button === 2 && !icon.contains(e.target)) {
+        // Right-click, only remove icon
+        document.body.removeChild(icon);
+        e.preventDefault();
+      } else if (e.button === 0 && !icon.contains(e.target)) {
+        // Left-click, remove icon and selection
         document.body.removeChild(icon);
         window.getSelection().removeAllRanges();
       }
-      // 移除事件监听器
       document.removeEventListener("mousedown", documentClickHandler);
-    });
+      canCreateIcon = true;
+    };
+
+    document.addEventListener("mousedown", documentClickHandler);
   }
 });
 
-function handleDocumentClick(event, icon, range) {
-  if (isCreatingPopup) return; // 如果正在创建 popup，不执行后续操作
-
-  const selection = window.getSelection();
-  const clickedIcon = icon.contains(event.target);
-  const clickedInsideSelection = isClickInsideSelection(event, range);
-
-  if (!clickedIcon && !clickedInsideSelection) {
-    document.body.removeChild(icon);
-    selection.removeAllRanges();
-  } else if (event.button === 2 && clickedInsideSelection) {
-    document.body.removeChild(icon);
-  } else if (event.button === 0 && clickedInsideSelection) {
-    document.body.removeChild(icon);
-    selection.removeAllRanges();
+// Listen for messages from the background script
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.action === "createPopup") {
+    const selection = window.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      handlePopupCreation(request.selectedText, rect);
+    }
   }
-}
+});
 
+// Helper function to check if click is inside selection
 function isClickInsideSelection(event, range) {
   const rect = range.getBoundingClientRect();
   return (
@@ -82,4 +97,3 @@ function isClickInsideSelection(event, range) {
     event.clientY <= rect.bottom
   );
 }
-

src/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "DeepSeek AI",
   "description": "DeepSeek AI助手旨在为用户提供即时、智能的网页内容分析与回答服务。通过集成先进的人工智能大模型，用户可以轻松选择网页上的任何文本内容，并立即获得深度、准确的AI回答。",
-  "version": "1.2.1",
-  "permissions": ["storage"],
+  "version": "1.3.0",
+  "permissions": ["storage", "contextMenus"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],

src/popup/popup.html

@@ -14,6 +14,23 @@
         width: 300px;
         color: #1d1d1f;
       }
+      .language-switch {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+      .language-switch label {
+        margin-right: 10px;
+        font-size: 14px;
+      }
+      select {
+        padding: 4px 8px;
+        font-size: 14px;
+        border: 1px solid #d2d2d7;
+        border-radius: 8px;
+        background-color: #f2f2f7;
+      }
       .header {
         display: flex;
         align-items: center;
@@ -50,7 +67,6 @@
         width: 100%;
         position: relative;
         text-align: center;
-
       }
       input {
         width: 60%;
@@ -59,13 +75,13 @@
         font-size: 12px;
         border: 1px solid #d2d2d7;
         border-radius: 12px;
-        background-color: #F2F2F7;
+        background-color: #f2f2f7;
         transition: all 0.3s ease;
         margin-bottom: 12px;
       }
 
       input::placeholder {
-        color: #A9A9A9;
+        color: #a9a9a9;
       }
       input:focus {
         outline: none;
@@ -140,6 +156,23 @@
         >
           前往获取 API Key
         </a>
+        <div class="language-switch">
+          <label for="language">首选语言：</label>
+          <select id="language">
+            <option value="auto">自动检测</option>
+            <option value="zh">中文</option>
+            <option value="en">English</option>
+            <option value="es">Español</option>
+            <option value="fr">Français</option>
+            <option value="de">Deutsch</option>
+            <option value="ja">日本語</option>
+            <option value="ko">한국어</option>
+            <option value="ru">Русский</option>
+            <option value="ar">العربية</option>
+            <option value="hi">हिन्दी</option>
+            <!-- Add more languages as needed -->
+          </select>
+        </div>
         <button id="saveButton">保存</button>
       </div>
     </div>

src/popup/popup.js

@@ -4,12 +4,18 @@ document.addEventListener("DOMContentLoaded", function () {
   const errorMessage = document.getElementById("errorMessage");
   const toggleButton = document.getElementById("toggleVisibility");
   const iconSwitch = document.getElementById("iconSwitch");
-  // 加载已保存的API密钥
-  chrome.storage.sync.get("apiKey", function (data) {
+  const languageSelect = document.getElementById("language");
+
+  // Load saved API key and language preference
+  chrome.storage.sync.get(["apiKey", "language"], function (data) {
     if (data.apiKey) {
       apiKeyInput.value = data.apiKey;
     }
+    if (data.language) {
+      languageSelect.value = data.language;
+    }
   });
+
   toggleButton.addEventListener("click", function () {
     if (apiKeyInput.type === "password") {
       apiKeyInput.type = "text";
@@ -19,6 +25,7 @@ document.addEventListener("DOMContentLoaded", function () {
       iconSwitch.src = "../icons/show.svg";
     }
   });
+
   function validateApiKey(apiKey, callback) {
     fetch("https://api.deepseek.com/chat/completions", {
       method: "POST",
@@ -47,9 +54,10 @@ document.addEventListener("DOMContentLoaded", function () {
       });
   }
 
-  // 保存API密钥
+  // Save API key and language preference
   saveButton.addEventListener("click", function () {
     const apiKey = apiKeyInput.value.trim();
+    const language = languageSelect.value;
 
     if (apiKey === "") {
       errorMessage.textContent = "api-key不能为空!";
@@ -58,12 +66,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
     validateApiKey(apiKey, function (isValid) {
       if (isValid) {
-        chrome.storage.sync.set({ apiKey: apiKey }, function () {
-          errorMessage.textContent = "api-key已保存!";
-          setTimeout(function () {
-            errorMessage.textContent = "";
-          }, 2000);
-        });
+        chrome.storage.sync.set(
+          { apiKey: apiKey, language: language },
+          function () {
+            errorMessage.textContent = "设置已保存!";
+            setTimeout(function () {
+              errorMessage.textContent = "";
+            }, 2000);
+          }
+        );
       } else {
         errorMessage.textContent = "api-key无效!";
       }