From 5f8e636a7ff508ff33a9144f927e82e008bada09 Mon Sep 17 00:00:00 2001
From: Sanotsu <1833186810@qq.com>
Date: Sat, 30 Nov 2024 08:18:01 +0800
Subject: [PATCH] =?UTF-8?q?init:=E5=AE=8C=E5=85=A8=E4=BD=BF=E7=94=A8cursor?=
=?UTF-8?q?=E9=97=AE=E7=AD=94=E5=BC=80=E5=8F=91=E7=9A=84chrome=20AI?=
=?UTF-8?q?=E6=9E=81=E7=AE=80=E7=BD=91=E9=A1=B5=E7=BF=BB=E8=AF=91=E6=89=A9?=
=?UTF-8?q?=E5=B1=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 1 +
README.md | 54 ++
background/background.js | 194 ++++
content/cache-manager.js | 169 ++++
content/content.css | 115 +++
content/content.js | 866 ++++++++++++++++++
content/languages.js | 222 +++++
content/panel.css | 233 +++++
content/panel.html | 46 +
content/panel.js | 361 ++++++++
icons/icon.svg | 5 +
manifest.json | 46 +
options/options.css | 39 +
options/options.html | 28 +
options/options.js | 38 +
panel.js | 29 +
popup/popup.css | 43 +
popup/popup.html | 25 +
popup/popup.js | 13 +
"screenshots/pdf\345\217\263\351\224\256.png" | Bin 0 -> 231054 bytes
...2\350\257\215\347\277\273\350\257\221.png" | Bin 0 -> 50828 bytes
...2\344\276\213\351\241\265\351\235\242.png" | Bin 0 -> 403271 bytes
...2\344\276\213\351\241\265\351\235\242.png" | Bin 0 -> 325145 bytes
...5\345\274\217\351\241\265\351\235\242.png" | Bin 0 -> 288778 bytes
...3\350\257\221\345\274\271\347\252\227.png" | Bin 0 -> 67132 bytes
...345\234\260\345\235\200\345\222\214ak.png" | Bin 0 -> 27489 bytes
translate/translate.css | 266 ++++++
translate/translate.html | 42 +
translate/translate.js | 197 ++++
29 files changed, 3032 insertions(+)
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 background/background.js
create mode 100644 content/cache-manager.js
create mode 100644 content/content.css
create mode 100644 content/content.js
create mode 100644 content/languages.js
create mode 100644 content/panel.css
create mode 100644 content/panel.html
create mode 100644 content/panel.js
create mode 100644 icons/icon.svg
create mode 100644 manifest.json
create mode 100644 options/options.css
create mode 100644 options/options.html
create mode 100644 options/options.js
create mode 100644 panel.js
create mode 100644 popup/popup.css
create mode 100644 popup/popup.html
create mode 100644 popup/popup.js
create mode 100755 "screenshots/pdf\345\217\263\351\224\256.png"
create mode 100755 "screenshots/\345\210\222\350\257\215\347\277\273\350\257\221.png"
create mode 100755 "screenshots/\345\257\271\346\257\224\347\277\273\350\257\221\347\244\272\344\276\213\351\241\265\351\235\242.png"
create mode 100755 "screenshots/\346\233\277\346\215\242\347\277\273\350\257\221\347\244\272\344\276\213\351\241\265\351\235\242.png"
create mode 100755 "screenshots/\347\202\271\345\207\273\346\217\222\344\273\266\346\214\211\351\222\256\345\207\272\347\216\260\347\232\204\345\265\214\345\205\245\345\274\217\351\241\265\351\235\242.png"
create mode 100755 "screenshots/\347\213\254\347\253\213\347\277\273\350\257\221\345\274\271\347\252\227.png"
create mode 100755 "screenshots/\350\207\252\345\256\232\344\271\211\345\244\247\346\250\241\345\236\213API\345\234\260\345\235\200\345\222\214ak.png"
create mode 100644 translate/translate.css
create mode 100644 translate/translate.html
create mode 100644 translate/translate.js
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9ad68d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*bak**
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5b68ae7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,54 @@
+# 30 分钟，使用 cursor 开发的一个极简低配版"沉浸式翻译"chrome 插件
+
+## 说明
+
+- 这个插件是使用 cursor 的 composer 功能开发的，我本人是完全不懂 chrome 插件开发的。
+- 翻译功能是基于调用在线服务大模型 API 实现的，所以需要使用者有可用的平台地址和 ak。
+ - 因为是调用大模型API进行翻译，可能完全翻译完会比较慢。
+ - 可以试用下我写在代码里的是硅基流动中免费的模型 `Qwen/Qwen2.5-7B-Instruct`。
+ - 当然，如果对硅基流动平台感兴趣，还能用下我的邀请码注册，那就更好了：
+ - https://cloud.siliconflow.cn/i/tRIcST68
+- 整页翻译的内容会保存在缓存中，1小时内同一个网站不会重复调用API进行翻译。
+ - 如果需要强制重新翻译，可以点击对应的清除缓存按钮后，重新翻译。
+
+## 先看看效果
+
+- 安装插件后，点击插件图标，右上角会显示出功能弹窗:
+
+
+
+- 点击“设置”按钮，配置大模型平台地址、模型名、和 AK，**记得首次使用要保存设置才生效**。
+
+
+
+- 整页翻译：对比翻译的效果
+
+
+
+- 整页翻译：替换翻译的效果
+
+
+
+- 划词翻译：对只需要翻译网页中部分文本，在选中文本(划词)后，会出现一个小的“翻译”按钮，点击之后就会弹窗显示翻译结果，目标语言在右上角的配置面板中指定。
+
+
+
+- 如果是阅读 pdf 文件，或者也是一般网页，右键选择“AI 翻译助手-翻译选中文本”，会弹出独立翻译窗口。
+
+
+
+- 这个独立窗口可以当成个简单的翻译工具，复制需要翻译的内容，选择目标语言，然后随意翻译即可。
+
+
+
+## 其他补充
+
+- 翻译效果和大模型质量相关
+- 网页内容过大，可能翻译比较慢，只会翻译点击翻译时已经加载的内容
+- 嵌入式（对比翻译）效果不一定好看
+
+## 安装使用
+
+下载这个项目，解压后，打开 chrome 或 edge浏览器，进入 `chrome://extensions/` 或`edge://extensions/`页面，点击“加载已解压的扩展程序”，选择解压后的文件夹即可。
+
+首次使用一定点击“设置”按钮或者插件图标右键选“选项”，去配置 API 地址、AK 和模型名称，点击“保存设置”。
\ No newline at end of file
diff --git a/background/background.js b/background/background.js
new file mode 100644
index 0000000..6d28cf4
--- /dev/null
+++ b/background/background.js
@@ -0,0 +1,194 @@
+// 获取特定标签页的设置
+const getTabSettings = async (tabId) => {
+ return new Promise((resolve) => {
+ chrome.storage.local.get(
+ {
+ [`targetLang_${tabId}`]: 'zh' // 获取特定标签页的目标语言
+ },
+ async (tabItems) => {
+ // 获取全局API设置
+ const globalSettings = await chrome.storage.sync.get({
+ apiEndpoint: '', // 移除默认值
+ apiKey: '',
+ model: ''
+ });
+
+ resolve({
+ ...globalSettings,
+ targetLang: tabItems[`targetLang_${tabId}`]
+ });
+ }
+ );
+ });
+};
+
+// 调用API进行翻译
+const translateWithAPI = async (text, targetLang, apiKey, model, apiEndpoint) => {
+ // 检查必要的API设置
+ if (!apiEndpoint || !apiKey || !model) {
+ throw new Error('请先在设置页面配置API信息');
+ }
+
+ const response = await fetch(apiEndpoint, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${apiKey}`
+ },
+ body: JSON.stringify({
+ model: model,
+ messages: [
+ {
+ role: "system",
+ content: `你是一个翻译助手。请将用户输入的文本翻译成${targetLang}，只返回翻译结果，不需要解释。`
+ },
+ {
+ role: "user",
+ content: text
+ }
+ ],
+ temperature: 0.3
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('翻译请求失败');
+ }
+
+ const data = await response.json();
+ return data.choices[0].message.content.trim();
+};
+
+// 监听来自content script的消息
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+ if (request.action === 'translate') {
+ (async () => {
+ try {
+ let settings;
+ if (request.isPopupWindow) {
+ // 如果是独立窗口的请求，获取全局API设置
+ settings = await chrome.storage.sync.get({
+ apiEndpoint: '',
+ apiKey: '',
+ model: ''
+ });
+ settings.targetLang = request.targetLang;
+ } else {
+ // 否则使用标签页的设置
+ settings = await getTabSettings(request.tabId);
+ }
+
+ const translation = await translateWithAPI(
+ request.text,
+ settings.targetLang,
+ settings.apiKey,
+ settings.model,
+ settings.apiEndpoint
+ );
+ sendResponse({ translation });
+ } catch (error) {
+ sendResponse({ error: error.message });
+ }
+ })();
+ return true;
+ } else if (request.action === 'getCurrentTabId') {
+ sendResponse({ tabId: sender.tab?.id });
+ return false;
+ }
+});
+
+// 存储面板状态（使用对象而不是 Map）
+let panelStates = {};
+
+// 添加新的消息处理
+chrome.action.onClicked.addListener(async (tab) => {
+ const tabId = tab.id;
+
+ try {
+ // 检查当前标签页是否已有面板
+ const [result] = await chrome.scripting.executeScript({
+ target: { tabId: tabId },
+ func: togglePanel,
+ args: [tabId, !!panelStates[tabId]] // 转换为布尔值
+ });
+
+ // 更新面板状态
+ panelStates[tabId] = result.result;
+ } catch (error) {
+ console.error('面板切换失败:', error);
+ }
+});
+
+// 监听标签页关闭事件
+chrome.tabs.onRemoved.addListener((tabId) => {
+ delete panelStates[tabId];
+});
+
+// 面板切换函数
+function togglePanel(tabId, isVisible) {
+ let panel = document.querySelector(`.translator-panel[data-tab-id="${tabId}"]`);
+
+ if (panel) {
+ panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+ return panel.style.display === 'block';
+ } else {
+ const iframe = document.createElement('iframe');
+ iframe.className = 'translator-panel';
+ iframe.setAttribute('data-tab-id', tabId);
+ iframe.src = chrome.runtime.getURL('content/panel.html');
+ iframe.style.display = 'block';
+ document.body.appendChild(iframe);
+ return true;
+ }
+}
+
+let translateWindow = null;
+
+// 创建右键菜单
+chrome.runtime.onInstalled.addListener(() => {
+ chrome.contextMenus.create({
+ id: 'translateSelection',
+ title: 'AI翻译助手 - 翻译选中文本',
+ contexts: ['selection']
+ });
+});
+
+// 处理右键菜单点击
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+ if (info.menuItemId === 'translateSelection') {
+ const selectedText = info.selectionText;
+
+ if (!translateWindow) {
+ // 创建新窗口
+ const window = await chrome.windows.create({
+ url: chrome.runtime.getURL('translate/translate.html'),
+ type: 'popup',
+ width: 800,
+ height: 600
+ });
+ translateWindow = window.id;
+
+ // 等待窗口加载完成
+ setTimeout(() => {
+ chrome.runtime.sendMessage({
+ action: 'updateText',
+ text: selectedText
+ });
+ }, 1000);
+ } else {
+ // 更新已存在的窗口
+ chrome.windows.update(translateWindow, { focused: true });
+ chrome.runtime.sendMessage({
+ action: 'updateText',
+ text: selectedText
+ });
+ }
+ }
+});
+
+// 监听窗口关闭
+chrome.windows.onRemoved.addListener((windowId) => {
+ if (windowId === translateWindow) {
+ translateWindow = null;
+ }
+});
\ No newline at end of file
diff --git a/content/cache-manager.js b/content/cache-manager.js
new file mode 100644
index 0000000..c5b6916
--- /dev/null
+++ b/content/cache-manager.js
@@ -0,0 +1,169 @@
+// 缓存管理器
+const CacheManager = {
+ // 缓存有效期（1小时）
+ CACHE_DURATION: 3600000,
+
+ // 初始化缓存
+ async init() {
+ const result = await chrome.storage.local.get('translationCache');
+ if (!result.translationCache) {
+ await chrome.storage.local.set({ translationCache: {} });
+ } else {
+ // 清理过期缓存
+ await this.cleanExpiredCache();
+ }
+ },
+
+ // 清理过期缓存
+ async cleanExpiredCache() {
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache;
+ let hasExpired = false;
+
+ if (translationCache) {
+ const now = Date.now();
+ for (const key of Object.keys(translationCache)) {
+ if (now - translationCache[key].timestamp > this.CACHE_DURATION) {
+ delete translationCache[key];
+ hasExpired = true;
+ }
+ }
+
+ if (hasExpired) {
+ await chrome.storage.local.set({ translationCache });
+ }
+ }
+ },
+
+ // 生成缓存键 - 简化缓存键的生成方式
+ generateCacheKey(url, text, targetLang, type) {
+ // 使用文本内容的哈希作为缓存键的一部分
+ const textHash = this.hashString(text);
+ return `${url}_${targetLang}_${type}_${textHash}`;
+ },
+
+ // 字符串哈希函数
+ hashString(str) {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ const char = str.charCodeAt(i);
+ hash = ((hash << 5) - hash) + char;
+ hash = hash & hash; // Convert to 32-bit integer
+ }
+ return Math.abs(hash).toString(16);
+ },
+
+ // 获取缓存
+ async getCache(url, text, targetLang, type) {
+ const cacheKey = this.generateCacheKey(url, text, targetLang, type);
+ const result = await chrome.storage.local.get('translationCache');
+ const cache = result.translationCache[cacheKey];
+
+ if (!cache) {
+ console.log(`[缓存未命中] ${text.slice(0, 30)}...`);
+ return null;
+ }
+
+ // 检查缓存是否过期
+ if (Date.now() - cache.timestamp > this.CACHE_DURATION) {
+ console.log(`[缓存过期] ${text.slice(0, 30)}...`);
+ await this.removeCache(cacheKey);
+ return null;
+ }
+
+ console.log(`[缓存命中] ${text.slice(0, 30)}...`);
+ return cache;
+ },
+
+ // 设置缓存
+ async setCache(url, text, translation, targetLang, type) {
+ const cacheKey = this.generateCacheKey(url, text, targetLang, type);
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache || {};
+
+ translationCache[cacheKey] = {
+ url,
+ text,
+ translation,
+ targetLang,
+ type,
+ timestamp: Date.now()
+ };
+
+ await chrome.storage.local.set({ translationCache });
+ console.log(`[缓存已保存] ${text.slice(0, 30)}...`);
+ },
+
+ // 移除缓存
+ async removeCache(cacheKey) {
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache;
+ if (translationCache && translationCache[cacheKey]) {
+ delete translationCache[cacheKey];
+ await chrome.storage.local.set({ translationCache });
+ }
+ },
+
+ // 清除特定网页和目标语言的缓存
+ async clearTypeCache(url, targetLang, type) {
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache;
+ let hasCache = false;
+
+ if (translationCache) {
+ const prefix = `${url}_${targetLang}_${type}_`;
+ for (const key of Object.keys(translationCache)) {
+ if (key.startsWith(prefix)) {
+ delete translationCache[key];
+ hasCache = true;
+ }
+ }
+ if (hasCache) {
+ await chrome.storage.local.set({ translationCache });
+ console.log(`[缓存已清除] ${url} ${type}`);
+ }
+ }
+
+ return { success: hasCache, empty: !hasCache };
+ },
+
+ // 检查特定网页和目标语言是否有缓存
+ async hasCache(url, targetLang, type) {
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache;
+
+ if (!translationCache) return false;
+
+ const prefix = `${url}_${targetLang}_${type}_`;
+ const now = Date.now();
+
+ return Object.keys(translationCache).some(key =>
+ key.startsWith(prefix) &&
+ now - translationCache[key].timestamp <= this.CACHE_DURATION
+ );
+ },
+
+ // 获取页面的所有缓存翻译
+ async getPageCache(url, targetLang, type) {
+ const result = await chrome.storage.local.get('translationCache');
+ const translationCache = result.translationCache;
+ const pageCache = {};
+
+ if (translationCache) {
+ const prefix = `${url}_${targetLang}_${type}_`;
+ const now = Date.now();
+
+ for (const [key, cache] of Object.entries(translationCache)) {
+ if (key.startsWith(prefix) &&
+ now - cache.timestamp <= this.CACHE_DURATION) {
+ pageCache[cache.text] = cache.translation;
+ }
+ }
+ }
+
+ return pageCache;
+ }
+};
+
+// 初始化缓存管理器
+CacheManager.init();
\ No newline at end of file
diff --git a/content/content.css b/content/content.css
new file mode 100644
index 0000000..477419c
--- /dev/null
+++ b/content/content.css
@@ -0,0 +1,115 @@
+.ai-translator-popup {
+ position: absolute;
+ z-index: 10000;
+ background: rgba(255, 255, 255, 0.95);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ padding: 12px;
+ max-width: 300px;
+ display: none;
+ backdrop-filter: blur(5px);
+ color: #333;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+ .ai-translator-popup {
+ background: rgba(40, 40, 40, 0.95);
+ border-color: rgba(255, 255, 255, 0.1);
+ color: #fff;
+ }
+}
+
+.ai-translator-content {
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+.ai-translator-loading {
+ color: inherit;
+ opacity: 0.7;
+ font-style: italic;
+}
+
+.ai-translation {
+ color: #666;
+ margin-left: 4px;
+}
+
+.translate-button {
+ position: absolute;
+ z-index: 10000;
+ background: rgba(76, 175, 80, 0.9);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 6px 12px;
+ cursor: pointer;
+ font-size: 13px;
+ backdrop-filter: blur(5px);
+ transition: background-color 0.2s;
+}
+
+.translate-button:hover {
+ background: rgba(69, 160, 73, 0.95);
+}
+
+.translator-panel {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ width: 256px;
+ min-height: 300px;
+ max-height: 80vh;
+ height: fit-content;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ z-index: 10000;
+ display: none;
+}
+
+.panel-container {
+ padding: 15px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+.ai-translation-container {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-left: 12px;
+ border-left: 2px solid var(--theme-color, #4CAF50);
+ opacity: 0.9;
+ color: inherit;
+}
+
+.language-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 15px;
+}
+
+.arrow {
+ color: #666;
+ margin: 0 8px;
+}
+
+.ai-translation-inline {
+ color: inherit;
+ opacity: 0.8;
+ margin-left: 4px;
+ font-size: 0.95em;
+}
+
+/* 只有当内容超过最大高度时才显示滚动条 */
+@media (max-height: 500px) {
+ .translator-panel {
+ overflow-y: auto;
+ }
+}
+
\ No newline at end of file
diff --git a/content/content.js b/content/content.js
new file mode 100644
index 0000000..1085d10
--- /dev/null
+++ b/content/content.js
@@ -0,0 +1,866 @@
+let isTranslated = false;
+let translatedNodes = new Map();
+
+// 存储检测到的语言
+let detectedLanguage = null;
+
+// 检测文本语言
+const detectLanguage = async (text) => {
+ try {
+ const hasChineseChars = /[\u4e00-\u9fa5]/.test(text);
+ const hasJapaneseChars = /[\u3040-\u30ff]/.test(text);
+ const hasKoreanChars = /[\uac00-\ud7af]/.test(text);
+
+ if (hasChineseChars) return 'zh';
+ if (hasJapaneseChars) return 'ja';
+ if (hasKoreanChars) return 'ko';
+ return 'en';
+ } catch (error) {
+ console.error('语言检测失败:', error);
+ return 'unknown';
+ }
+};
+
+// 判断是否是文本内容节点
+const isTextContentNode = (node) => {
+ // 检查节点是否有父元素
+ if (!node.parentElement) {
+ return false;
+ }
+
+ const textTags = ['p', 'article', 'section', 'li', 'dd', 'div'];
+ const parent = node.parentElement;
+
+ // 检查标签名
+ if (textTags.includes(parent.tagName.toLowerCase())) {
+ // 检查是否是列表项
+ if (parent.tagName.toLowerCase() === 'li') return true;
+
+ // 检查是否是主要文本内容
+ const text = parent.textContent.trim();
+ return text.length > 20 || text.includes('。') || text.includes('.');
+ }
+
+ return false;
+};
+
+// 创建翻译容器
+const createTranslationContainer = (originalNode) => {
+ // 检查节点是否有父元素
+ if (!originalNode.parentElement) {
+ return null;
+ }
+
+ const container = document.createElement('div');
+ container.className = 'ai-translation-container';
+
+ // 复制原始节点的样式
+ const originalStyle = window.getComputedStyle(originalNode.parentElement);
+ container.style.fontFamily = originalStyle.fontFamily;
+ container.style.fontSize = originalStyle.fontSize;
+ container.style.lineHeight = originalStyle.lineHeight;
+ container.style.color = originalStyle.color;
+
+ return container;
+};
+
+// 创建内联翻译元素
+const createInlineTranslation = (originalNode) => {
+ const span = document.createElement('span');
+ span.className = 'ai-translation-inline';
+ return span;
+};
+
+// 获取当前标签页ID
+const getCurrentTabId = async () => {
+ try {
+ // 如果是在content script中运行
+ if (chrome.runtime?.id) {
+ const response = await chrome.runtime.sendMessage({ action: 'getCurrentTabId' });
+ return response.tabId;
+ }
+ // 如果是在独立窗口中运行
+ const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+ return tabs[0].id;
+ } catch (error) {
+ console.error('获取标签页ID失败:', error);
+ return null;
+ }
+};
+
+// 检测页面主要语言
+const detectPageLanguage = async () => {
+ const mainContent = document.body.innerText.slice(0, 1000);
+ detectedLanguage = await detectLanguage(mainContent);
+
+ // 发送检测结果
+ const tabId = await getCurrentTabId();
+ if (tabId) {
+ chrome.runtime.sendMessage({
+ action: 'updateSourceLanguage',
+ language: detectedLanguage,
+ tabId: tabId
+ });
+ }
+};
+
+// 监听面板创建事件
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+ if (request.action === 'panelCreated') {
+ // 如果已经检测到语言，立即发送
+ if (detectedLanguage) {
+ chrome.runtime.sendMessage({
+ action: 'updateSourceLanguage',
+ language: detectedLanguage,
+ tabId: request.tabId
+ });
+ sendResponse({}); // 立即发送响应
+ } else {
+ // 如果还没有检测结果，立即进行检测
+ detectPageLanguage().then(() => {
+ sendResponse({}); // 检测完成后发送响应
+ });
+ return true; // 表示将异步发送响应
+ }
+ } else if (request.action === 'translatePage') {
+ translatePage().then(() => {
+ sendResponse({}); // 翻译完成后发送响应
+ });
+ return true; // 表示将异步发送响应
+ } else if (request.action === 'replaceTranslate') {
+ replaceTranslate().then(() => {
+ sendResponse({}); // 替换翻译完成后发送响应
+ });
+ return true; // 表示将异步发送响应
+ } else if (request.action === 'restoreOriginal') {
+ restoreOriginal();
+ sendResponse({}); // 立即发送响应
+ } else if (request.action === 'detectChineseVariant') {
+ const isTraditional = detectChineseVariant(document.body.innerText);
+ sendResponse({ isTraditional });
+ }
+});
+
+// 在页面加载完成后立即开始检测
+document.addEventListener('DOMContentLoaded', () => {
+ detectPageLanguage();
+});
+
+// 在页面内容变化时重新检测
+const observer = new MutationObserver(() => {
+ if (document.body) {
+ detectPageLanguage();
+ observer.disconnect();
+ }
+});
+
+observer.observe(document.documentElement, {
+ childList: true,
+ subtree: true
+});
+
+// 创建翻译按钮
+const createTranslateButton = () => {
+ const button = document.createElement('button');
+ button.className = 'translate-button';
+ button.textContent = '翻译';
+ return button;
+};
+
+// 创建翻译弹窗
+const createTranslationPopup = () => {
+ const popup = document.createElement('div');
+ popup.className = 'ai-translator-popup';
+ popup.innerHTML = `
+
+ `;
+ document.body.appendChild(popup);
+ return popup;
+};
+
+// 获取选中的文本
+const getSelectedText = () => {
+ const selection = window.getSelection();
+ return selection.toString().trim();
+};
+
+// 定位弹窗
+const positionPopup = (element, rect) => {
+ const top = rect.bottom + window.scrollY;
+ const left = rect.left + window.scrollX;
+
+ element.style.top = `${top}px`;
+ element.style.left = `${left}px`;
+};
+
+// 添加翻译缓存和控制变量
+let translationCache = {
+ compare: new Map(),
+ replace: new Map()
+};
+let isTranslating = {
+ compare: false,
+ replace: false
+};
+let shouldStopTranslation = {
+ compare: false,
+ replace: false
+};
+
+// 缓存翻译结果
+const cacheTranslation = (type, text, translation) => {
+ const cacheKey = `${type}_${text}`;
+ const cacheData = {
+ translation,
+ timestamp: Date.now()
+ };
+ translationCache[type].set(cacheKey, cacheData);
+};
+
+// 获取缓存的翻译
+const getCachedTranslation = (type, text) => {
+ const cacheKey = `${type}_${text}`;
+ const cached = translationCache[type].get(cacheKey);
+ if (!cached) return null;
+
+ // 检查缓存是否过期（1小时）
+ if (Date.now() - cached.timestamp > 3600000) {
+ translationCache[type].delete(cacheKey);
+ return null;
+ }
+
+ return cached.translation;
+};
+
+// 修改清除缓存函数
+const clearCache = async (type) => {
+ if (isTranslating[type]) {
+ return { success: false, message: '翻译进行中，无法清除缓存' };
+ }
+
+ const url = window.location.href;
+ const targetLang = await getCurrentTargetLang();
+ return await CacheManager.clearTypeCache(url, targetLang, type);
+};
+
+// 修改检查缓存状态函数
+const checkCache = async () => {
+ const url = window.location.href;
+ const targetLang = await getCurrentTargetLang();
+ return {
+ hasCompareCache: await CacheManager.hasCache(url, targetLang, 'compare'),
+ hasReplaceCache: await CacheManager.hasCache(url, targetLang, 'replace')
+ };
+};
+
+// 监听消息
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+ if (request.action === 'stopTranslation') {
+ const type = request.translationType;
+ if (type) {
+ stopTranslation(type);
+ }
+ sendResponse({});
+ } else if (request.action === 'clearCache') {
+ // 修改为异步处理
+ (async () => {
+ const result = await clearCache(request.cacheType);
+ sendResponse(result);
+ })();
+ return true; // 保持消息通道打开以等待异步响应
+ } else if (request.action === 'checkCache') {
+ // 修改为异步处理
+ (async () => {
+ const result = await checkCache();
+ sendResponse(result);
+ })();
+ return true; // 保持消息通道打开以等待异步响应
+ }
+ // ... 其他消息处理保持不变 ...
+});
+
+// 获取节点的唯一标识
+const getNodeIdentifier = (node) => {
+ // 获取节点在其父元素中的索引
+ const getNodeIndex = (node) => {
+ let index = 0;
+ let sibling = node;
+ while (sibling.previousSibling) {
+ if (sibling.previousSibling.nodeType === Node.TEXT_NODE) {
+ index++;
+ }
+ sibling = sibling.previousSibling;
+ }
+ return index;
+ };
+
+ // 安全地获取类名
+ const getClassNames = (element) => {
+ if (!element) return '';
+ if (typeof element.className === 'string') {
+ return element.className;
+ }
+ if (element.className && element.className.baseVal) {
+ // 处理 SVG 元素的类名
+ return element.className.baseVal;
+ }
+ // 如果都不是，返回空字符串
+ return '';
+ };
+
+ // 构建节点路径
+ const buildNodePath = (node) => {
+ const path = [];
+ let current = node;
+
+ while (current && current.parentElement) {
+ const parent = current.parentElement;
+ const index = getNodeIndex(current);
+ const tag = parent.tagName.toLowerCase();
+ const className = getClassNames(parent);
+ const classes = className ? `.${className.split(' ').join('.')}` : '';
+ const id = parent.id ? `#${parent.id}` : '';
+ path.unshift(`${tag}${id}${classes}:nth-text(${index})`);
+ current = parent;
+ }
+
+ return path.join(' > ');
+ };
+
+ try {
+ // 返回节点的唯一标识
+ return `${buildNodePath(node)}_${node.textContent.trim().length}`;
+ } catch (error) {
+ console.error('生成节点标识失败:', error);
+ // 返回一个基于时间戳的备用标识
+ return `node_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ }
+};
+
+// 修改翻译函数，添加节点标识
+const translateText = async (text, type = 'compare', nodeId = '') => {
+ const url = window.location.href;
+ const targetLang = await getCurrentTargetLang();
+
+ // 生成缓存键时包含节点标识
+ const cacheKey = `${url}_${targetLang}_${type}_${nodeId}`;
+
+ // 检查缓存
+ const cached = await CacheManager.getCache(url, text, targetLang, type, nodeId);
+ if (cached) {
+ console.log(`[缓存] 使用缓存的翻译结果: ${text.slice(0, 30)}...`);
+ return cached.translation;
+ }
+
+ // 如果没有缓存，调用API翻译
+ console.log(`[API] 调用API翻译: ${text.slice(0, 30)}...`);
+
+ const response = await chrome.runtime.sendMessage({
+ action: 'translate',
+ text: text,
+ tabId: await getCurrentTabId()
+ });
+
+ // 缓存翻译结果时包含节点标识
+ if (response.translation) {
+ await CacheManager.setCache(url, text, response.translation, targetLang, type, nodeId);
+ }
+
+ return response.translation;
+};
+
+// 获取当前目标语言
+const getCurrentTargetLang = async () => {
+ const tabId = await getCurrentTabId();
+ const result = await chrome.storage.local.get(`targetLang_${tabId}`);
+ return result[`targetLang_${tabId}`] || 'zh-CN';
+};
+
+// 检查是否是PDF查看器
+const isPDFViewer = () => {
+ return window.location.pathname.endsWith('.pdf') ||
+ document.querySelector('embed[type="application/pdf"]') !== null;
+};
+
+// 处理选中文本事件
+let translateButton = null;
+let popup = null;
+
+document.addEventListener('mouseup', async () => {
+ const selectedText = getSelectedText();
+
+ if (!selectedText) {
+ if (translateButton) {
+ translateButton.style.display = 'none';
+ }
+ if (popup) {
+ popup.style.display = 'none';
+ }
+ return;
+ }
+
+ // 特殊处理PDF查看器
+ if (isPDFViewer()) {
+ if (!popup) {
+ popup = createTranslationPopup();
+ }
+
+ const selection = window.getSelection();
+ const range = selection.getRangeAt(0);
+ const rect = range.getBoundingClientRect();
+
+ popup.style.display = 'block';
+ popup.querySelector('.ai-translator-text').textContent = '';
+ popup.querySelector('.ai-translator-loading').style.display = 'block';
+ positionPopup(popup, rect);
+
+ try {
+ const translation = await translateText(selectedText);
+ popup.querySelector('.ai-translator-loading').style.display = 'none';
+ popup.querySelector('.ai-translator-text').textContent = translation;
+ } catch (error) {
+ popup.querySelector('.ai-translator-loading').style.display = 'none';
+ popup.querySelector('.ai-translator-text').textContent = '翻译失败，请重试';
+ }
+ return;
+ }
+
+ // 普通网页的理逻辑保持不变
+ if (!translateButton) {
+ translateButton = createTranslateButton();
+ document.body.appendChild(translateButton);
+ }
+
+ const selection = window.getSelection();
+ const range = selection.getRangeAt(0);
+ const rect = range.getBoundingClientRect();
+
+ translateButton.style.display = 'block';
+ positionPopup(translateButton, rect);
+
+ translateButton.onclick = async () => {
+ if (!popup) {
+ popup = createTranslationPopup();
+ }
+
+ popup.style.display = 'block';
+ popup.querySelector('.ai-translator-text').textContent = '';
+ popup.querySelector('.ai-translator-loading').style.display = 'block';
+ positionPopup(popup, rect);
+
+ try {
+ const translation = await translateText(selectedText);
+ popup.querySelector('.ai-translator-loading').style.display = 'none';
+ popup.querySelector('.ai-translator-text').textContent = translation;
+ } catch (error) {
+ popup.querySelector('.ai-translator-loading').style.display = 'none';
+ popup.querySelector('.ai-translator-text').textContent = '翻译失败，请重试';
+ }
+ };
+});
+
+// 更新翻译进度
+const updateProgress = (progress) => {
+ chrome.runtime.sendMessage({
+ action: 'updateProgress',
+ progress: progress
+ });
+};
+
+// 判断是否是有效的文本内容
+const isValidText = (text, node) => {
+ // 移除空白字符
+ text = text.trim();
+ if (!text || text.length < 2) return false;
+
+ // 检查父元素是否是需要排除的元素
+ const invalidParents = ['script', 'style', 'noscript', 'code', 'pre'];
+ let current = node.parentElement;
+ while (current) {
+ if (invalidParents.includes(current.tagName.toLowerCase())) {
+ return false;
+ }
+ current = current.parentElement;
+ }
+
+ // 检查是否是代码或脚本内容
+ const codePatterns = [
+ /^[{(\[`].*[})\]`]$/, // 代码块
+ /^(function|class|const|let|var)\s/, // 代码声明
+ /^[a-zA-Z_$][a-zA-Z0-9_$]*\.[a-zA-Z_$]/, // 对象属性访问
+ /^self\./, // self引用
+ /^window\./, // window引用
+ /^document\./, // document引用
+ /^[0-9a-f]{32,}$/, // 哈希值
+ /^data:/, // Data URLs
+ /^https?:\/\//, // URLs
+ /^[0-9.]+$/, // 纯数字
+ /^#[0-9a-f]{3,8}$/, // 颜色代码
+ ];
+
+ if (codePatterns.some(pattern => pattern.test(text))) {
+ return false;
+ }
+
+ // 检查是否包含有效的文本特征
+ const validFeatures = [
+ // 标点符号
+ /[，。！？；：""''（）【】《》、]/,
+ // 中文字符
+ /[\u4e00-\u9fa5]/,
+ // 英文单词（包括常见缩写）
+ /[A-Za-z]{2,}/,
+ // 日文假名
+ /[\u3040-\u309F\u30A0-\u30FF]/,
+ // 韩文
+ /[\uAC00-\uD7AF]/,
+ // 阿拉伯文
+ /[\u0600-\u06FF]/,
+ // 泰文
+ /[\u0E00-\u0E7F]/,
+ // 越南文
+ /[àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđ]/,
+ // 常见标点
+ /[.!?;:]/
+ ];
+
+ // 如果包含任何有效特征，就认为是有效文本
+ if (validFeatures.some(pattern => pattern.test(text))) {
+ return true;
+ }
+
+ // 检查父元素标签
+ const validTags = [
+ 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+ 'article', 'section', 'div', 'span', 'a',
+ 'li', 'td', 'th', 'dd', 'dt', 'label',
+ 'blockquote', 'cite', 'figcaption', 'time',
+ 'mark', 'strong', 'em', 'b', 'i', 'small',
+ 'caption', 'title', 'button'
+ ];
+
+ const parentTag = node.parentElement?.tagName.toLowerCase();
+ if (parentTag && validTags.includes(parentTag)) {
+ return true;
+ }
+
+ // 检查节点的角色
+ const validRoles = [
+ 'heading', 'article', 'paragraph', 'text',
+ 'contentinfo', 'button', 'link', 'label',
+ 'listitem', 'cell', 'gridcell', 'tooltip',
+ 'alert', 'status', 'log', 'note'
+ ];
+
+ const role = node.parentElement?.getAttribute('role');
+ if (role && validRoles.includes(role)) {
+ return true;
+ }
+
+ // 检查是否是列表项或表格单元格的内容
+ const isListOrTableContent = node.parentElement?.closest('li, td, th, dt, dd');
+ if (isListOrTableContent) {
+ return true;
+ }
+
+ // 检查是否是链接文本
+ const isLinkText = node.parentElement?.closest('a');
+ if (isLinkText) {
+ return true;
+ }
+
+ // 检查是否是按钮文本
+ const isButtonText = node.parentElement?.closest('button');
+ if (isButtonText) {
+ return true;
+ }
+
+ // 检查是否是表单标签文本
+ const isLabelText = node.parentElement?.closest('label');
+ if (isLabelText) {
+ return true;
+ }
+
+ return false;
+};
+
+// 获取节点的XPath
+const getXPath = (node) => {
+ if (!node) return '';
+ if (node.nodeType !== Node.ELEMENT_NODE) {
+ return getXPath(node.parentNode);
+ }
+
+ let nodeCount = 0;
+ let hasFollowingSibling = false;
+ const siblings = node.parentNode.childNodes;
+
+ for (let i = 0; i < siblings.length; i++) {
+ const sibling = siblings[i];
+ if (sibling === node) {
+ hasFollowingSibling = true;
+ } else if (hasFollowingSibling && sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === node.tagName) {
+ nodeCount++;
+ }
+ }
+
+ const prefix = getXPath(node.parentNode);
+ const tagName = node.tagName.toLowerCase();
+ const position = nodeCount > 0 ? `[${nodeCount + 1}]` : '';
+
+ return `${prefix}/${tagName}${position}`;
+};
+
+// 修改文本节点遍历逻辑
+const getTextNodes = (root) => {
+ const nodes = [];
+ const walker = document.createTreeWalker(
+ root,
+ NodeFilter.SHOW_TEXT,
+ {
+ acceptNode: (node) => {
+ // 基本检查
+ if (!node || !node.parentElement) {
+ return NodeFilter.FILTER_REJECT;
+ }
+
+ // 检查是否是已翻译的内容
+ if (node.parentElement.classList.contains('ai-translation-container') ||
+ node.parentElement.classList.contains('ai-translation-inline')) {
+ return NodeFilter.FILTER_REJECT;
+ }
+
+ // 检查文本内容
+ const text = node.textContent.trim();
+ if (!text || !isValidText(text, node)) {
+ return NodeFilter.FILTER_REJECT;
+ }
+
+ return NodeFilter.FILTER_ACCEPT;
+ }
+ }
+ );
+
+ while (walker.nextNode()) {
+ nodes.push(walker.currentNode);
+ }
+
+ return nodes;
+};
+
+// 修改整页翻译功能
+const translatePage = async () => {
+ isTranslating.compare = true;
+ shouldStopTranslation.compare = false;
+
+ if (translatedNodes.size > 0) {
+ restoreOriginal();
+ }
+
+ const url = window.location.href;
+ const targetLang = await getCurrentTargetLang();
+ const pageCache = await CacheManager.getPageCache(url, targetLang, 'compare');
+
+ const textNodes = getTextNodes(document.body);
+ const totalNodes = textNodes.length;
+ let processedNodes = 0;
+
+ // 批量处理大小
+ const BATCH_SIZE = 10;
+ // 批处理延迟（毫秒）
+ const BATCH_DELAY = 50;
+
+ // 分批处理函数
+ const processBatch = async (nodes, startIndex) => {
+ const batch = nodes.slice(startIndex, startIndex + BATCH_SIZE);
+
+ for (const node of batch) {
+ if (shouldStopTranslation.compare) {
+ isTranslating.compare = false;
+ chrome.runtime.sendMessage({
+ action: 'translationStopped',
+ translationType: 'compare'
+ });
+ return;
+ }
+
+ const text = node.textContent.trim();
+ if (!text) continue;
+
+ try {
+ // 首先检查缓存
+ const nodeId = getNodeIdentifier(node);
+ let translation;
+
+ // 如果有缓存，立即使用
+ if (pageCache[text]) {
+ translation = pageCache[text];
+ } else {
+ // 否则调用API翻译
+ translation = await translateText(text, 'compare', nodeId);
+ }
+
+ if (isTextContentNode(node)) {
+ const container = createTranslationContainer(node);
+ if (container) {
+ container.textContent = translation;
+ container.setAttribute('data-node-id', nodeId);
+
+ const parent = node.parentElement;
+ if (parent && parent.parentNode) {
+ if (parent.nextSibling) {
+ parent.parentNode.insertBefore(container, parent.nextSibling);
+ } else {
+ parent.parentNode.appendChild(container);
+ }
+ translatedNodes.set(node, container);
+ }
+ }
+ } else {
+ const span = createInlineTranslation(node);
+ if (span && node.parentNode) {
+ span.textContent = ` (${translation})`;
+ span.setAttribute('data-node-id', nodeId);
+ if (node.nextSibling) {
+ node.parentNode.insertBefore(span, node.nextSibling);
+ } else {
+ node.parentNode.appendChild(span);
+ }
+ translatedNodes.set(node, span);
+ }
+ }
+
+ processedNodes++;
+ updateProgress(Math.round((processedNodes / totalNodes) * 100));
+ } catch (error) {
+ console.error('翻译失败:', error);
+ }
+ }
+
+ // 如果还有未处理的节点，延迟处理下一批
+ if (startIndex + BATCH_SIZE < nodes.length && !shouldStopTranslation.compare) {
+ await new Promise(resolve => setTimeout(resolve, BATCH_DELAY));
+ await processBatch(nodes, startIndex + BATCH_SIZE);
+ } else if (!shouldStopTranslation.compare) {
+ // 所有节点处理完成
+ isTranslating.compare = false;
+ chrome.runtime.sendMessage({
+ action: 'translationComplete',
+ translationType: 'compare'
+ });
+ }
+ };
+
+ // 开始批量处理
+ await processBatch(textNodes, 0);
+};
+
+// 修改替换翻译功能，使用类似的批处理逻辑
+const replaceTranslate = async () => {
+ isTranslating.replace = true;
+ shouldStopTranslation.replace = false;
+
+ if (translatedNodes.size > 0) {
+ restoreOriginal();
+ }
+
+ const url = window.location.href;
+ const targetLang = await getCurrentTargetLang();
+ const pageCache = await CacheManager.getPageCache(url, targetLang, 'replace');
+
+ const textNodes = getTextNodes(document.body);
+ const totalNodes = textNodes.length;
+ let processedNodes = 0;
+
+ const BATCH_SIZE = 10;
+ const BATCH_DELAY = 50;
+
+ const processBatch = async (nodes, startIndex) => {
+ const batch = nodes.slice(startIndex, startIndex + BATCH_SIZE);
+
+ for (const node of batch) {
+ if (shouldStopTranslation.replace) {
+ isTranslating.replace = false;
+ chrome.runtime.sendMessage({
+ action: 'translationStopped',
+ translationType: 'replace'
+ });
+ return;
+ }
+
+ const text = node.textContent.trim();
+ if (!text) continue;
+
+ try {
+ const nodeId = getNodeIdentifier(node);
+ let translation;
+
+ // 优先使用缓存
+ if (pageCache[text]) {
+ translation = pageCache[text];
+ } else {
+ translation = await translateText(text, 'replace', nodeId);
+ }
+
+ // 保存原始文本
+ translatedNodes.set(node, node.textContent);
+ // 替换文本内容
+ node.textContent = translation;
+
+ processedNodes++;
+ updateProgress(Math.round((processedNodes / totalNodes) * 100));
+ } catch (error) {
+ console.error('翻译失败:', error);
+ }
+ }
+
+ if (startIndex + BATCH_SIZE < nodes.length && !shouldStopTranslation.replace) {
+ await new Promise(resolve => setTimeout(resolve, BATCH_DELAY));
+ await processBatch(nodes, startIndex + BATCH_SIZE);
+ } else if (!shouldStopTranslation.replace) {
+ isTranslating.replace = false;
+ chrome.runtime.sendMessage({
+ action: 'translationComplete',
+ translationType: 'replace'
+ });
+ }
+ };
+
+ await processBatch(textNodes, 0);
+};
+
+// 修改恢复原文函数
+const restoreOriginal = () => {
+ for (const [node, originalText] of translatedNodes) {
+ // 检查节点是否仍然存在于文档中
+ if (node && node.parentElement && document.contains(node)) {
+ if (originalText instanceof Node) {
+ // 如果是注入式翻译，检查节点是否仍然存在于文档中
+ if (originalText.parentElement && document.contains(originalText)) {
+ originalText.remove();
+ }
+ } else {
+ // 如果是替换式翻译，恢复原文
+ node.textContent = originalText;
+ }
+ }
+ }
+ translatedNodes.clear();
+ isTranslated = false;
+ chrome.runtime.sendMessage({ action: 'restorationComplete' });
+};
+
+// 检测中文变体
+const detectChineseVariant = (text) => {
+ const traditionalChars = /[錒-鎛]/;
+ return traditionalChars.test(text);
+};
+
+// 修改停止翻译函数
+const stopTranslation = (type) => {
+ shouldStopTranslation[type] = true;
+};
+
\ No newline at end of file
diff --git a/content/languages.js b/content/languages.js
new file mode 100644
index 0000000..c947334
--- /dev/null
+++ b/content/languages.js
@@ -0,0 +1,222 @@
+// 语言代码和名称的映射
+export const LANGUAGES = {
+ // 常用语言
+ 'common': {
+ 'zh-CN': { name: '简体中文', native: '简体中文' },
+ 'en': { name: '英语', native: 'English' },
+ },
+ // 其他语言
+ 'others': {
+ 'zh-TW': { name: '繁体中文', native: '繁體中文' },
+ 'ja': { name: '日语', native: '日本語' },
+ 'ko': { name: '韩语', native: '한국어' },
+ 'es': { name: '西班牙语', native: 'Español' },
+ 'fr': { name: '法语', native: 'Français' },
+ 'de': { name: '德语', native: 'Deutsch' },
+ 'ru': { name: '俄语', native: 'Русский' },
+ 'it': { name: '意大利语', native: 'Italiano' },
+ 'pt': { name: '葡萄牙语', native: 'Português' },
+ 'vi': { name: '越南语', native: 'Tiếng Việt' },
+ 'th': { name: '泰语', native: 'ไทย' },
+ 'ar': { name: '阿拉伯语', native: 'العربية' },
+ // ... 可以继续添加更多语言
+ }
+};
+
+// 获取浏览器语言
+export const getBrowserLanguage = () => {
+ const lang = navigator.language || navigator.userLanguage;
+ // 处理类似 'zh-CN' 或 'en-US' 的格式
+ const baseLang = lang.split('-')[0];
+ const region = lang.split('-')[1];
+
+ // 特殊处理中文
+ if (baseLang === 'zh') {
+ return region === 'TW' || region === 'HK' ? 'zh-TW' : 'zh-CN';
+ }
+
+ // 检查是否支持该语言
+ const allLanguages = { ...LANGUAGES.common, ...LANGUAGES.others };
+ return allLanguages[baseLang] ? baseLang : 'en';
+};
+
+// 使用 Google Cloud Translation API 进行语言检测
+export const detectLanguage = async (text, apiKey) => {
+ try {
+ const response = await fetch(
+ `https://translation.googleapis.com/language/translate/v2/detect?key=${apiKey}`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ q: text
+ })
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error('Language detection failed');
+ }
+
+ const data = await response.json();
+ return data.data.detections[0][0].language;
+ } catch (error) {
+ console.error('Language detection error:', error);
+ // 降级到基本检测
+ return fallbackDetectLanguage(text);
+ }
+};
+
+// 更完善的语言检测规则
+const LANGUAGE_PATTERNS = {
+ // 东亚语言
+ 'zh-CN': {
+ pattern: /[\u4e00-\u9fa5]/,
+ threshold: 0.1,
+ excludePatterns: [/[ぁ-んァ-ン]/, /[가-힣]/] // 排除日文和韩文
+ },
+ 'zh-TW': {
+ pattern: /[[\u4e00-\u9fa5][\u3105-\u312F]]/,
+ threshold: 0.1,
+ traditionalChars: /[錒-鎛]/
+ },
+ 'ja': {
+ pattern: /[ぁ-んァ-ン]/,
+ threshold: 0.05,
+ extraPatterns: [/[\u4e00-\u9fa5]/, /[\u30A0-\u30FF]/] // 日文中可能包含汉字和片假名
+ },
+ 'ko': {
+ pattern: /[가-힣]/,
+ threshold: 0.1
+ },
+
+ // 欧洲语言
+ 'en': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(the|and|is|in|to|of)\b/i]
+ },
+ 'fr': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(le|la|les|et|est|dans|pour)\b/]
+ },
+ 'de': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(der|die|das|und|ist|in|zu)\b/]
+ },
+ 'es': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(el|la|los|las|es|en|por)\b/]
+ },
+ 'it': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(il|la|le|è|in|per|con)\b/]
+ },
+ 'pt': {
+ pattern: /[a-zA-Z]/,
+ threshold: 0.5,
+ wordPatterns: [/\b(o|a|os|as|é|em|para)\b/]
+ },
+ 'ru': {
+ pattern: /[а-яА-Я]/,
+ threshold: 0.3
+ },
+
+ // 其他语系
+ 'ar': {
+ pattern: /[\u0600-\u06FF]/,
+ threshold: 0.2,
+ rtl: true
+ },
+ 'hi': {
+ pattern: /[\u0900-\u097F]/,
+ threshold: 0.2
+ },
+ 'th': {
+ pattern: /[\u0E00-\u0E7F]/,
+ threshold: 0.2
+ },
+ 'vi': {
+ pattern: /[àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđ]/,
+ threshold: 0.1
+ }
+};
+
+// 改进的语言检测函数
+const fallbackDetectLanguage = (text) => {
+ const results = {};
+ const totalLength = text.length;
+
+ // 计算每种语言的匹配度
+ for (const [lang, config] of Object.entries(LANGUAGE_PATTERNS)) {
+ let matches = 0;
+ let isExcluded = false;
+
+ // 检查排除模式
+ if (config.excludePatterns) {
+ for (const excludePattern of config.excludePatterns) {
+ if (excludePattern.test(text)) {
+ isExcluded = true;
+ break;
+ }
+ }
+ }
+
+ if (isExcluded) continue;
+
+ // 基本字符匹配
+ matches = (text.match(config.pattern) || []).length;
+
+ // 检查额外模式
+ if (config.extraPatterns) {
+ for (const pattern of config.extraPatterns) {
+ matches += (text.match(pattern) || []).length;
+ }
+ }
+
+ // 检查特定词汇模式
+ if (config.wordPatterns) {
+ const wordMatches = config.wordPatterns.reduce((acc, pattern) => {
+ return acc + (text.match(pattern) || []).length;
+ }, 0);
+ matches += wordMatches * 2; // 给词汇匹配更高的权重
+ }
+
+ // 特殊处理繁体中文
+ if (lang === 'zh-TW' && config.traditionalChars.test(text)) {
+ matches *= 1.5; // 增加繁体字的权重
+ }
+
+ const ratio = matches / totalLength;
+ if (ratio >= config.threshold) {
+ results[lang] = ratio;
+ }
+ }
+
+ // 如果没有匹配结果，返回英语
+ if (Object.keys(results).length === 0) {
+ return 'en';
+ }
+
+ // 返回匹配度最高的语言
+ return Object.entries(results).reduce((a, b) => a[1] > b[1] ? a : b)[0];
+};
+
+// 格式化语言显示
+export const formatLanguageDisplay = (langCode) => {
+ const allLanguages = { ...LANGUAGES.common, ...LANGUAGES.others };
+ const lang = allLanguages[langCode];
+ return lang ? `${lang.name} (${lang.native})` : langCode;
+};
+
+// 验证语言代码
+export const isValidLanguageCode = (code) => {
+ // 检查是否符合 ISO 639-1 或 ISO 639-2 格式
+ return /^[a-z]{2,3}(-[A-Z]{2,3})?$/.test(code);
+};
\ No newline at end of file
diff --git a/content/panel.css b/content/panel.css
new file mode 100644
index 0000000..b35b33b
--- /dev/null
+++ b/content/panel.css
@@ -0,0 +1,233 @@
+.panel-container {
+ padding: 12px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.panel-title {
+ margin: 0 0 12px 0;
+ font-size: 16px;
+ color: #333;
+ text-align: center;
+}
+
+.language-section {
+ margin-bottom: 15px;
+}
+
+label {
+ display: block;
+ margin-bottom: 8px;
+ color: #333;
+}
+
+select {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background-color: white;
+ font-size: 14px;
+}
+
+.action-section {
+ margin-top: 15px;
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ margin-bottom: 15px;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+button:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 6px;
+ background-color: #f0f0f0;
+ border-radius: 3px;
+ overflow: hidden;
+ margin-bottom: 6px;
+}
+
+.progress {
+ width: 0;
+ height: 100%;
+ background-color: #4CAF50;
+ transition: width 0.3s ease;
+}
+
+.progress-text {
+ text-align: center;
+ font-size: 12px;
+ color: #666;
+}
+
+.language-select-container {
+ position: relative;
+}
+
+#targetLang {
+ width: 200px;
+ padding: 6px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background-color: white;
+ font-size: 14px;
+}
+
+#customLang {
+ width: 192px;
+ padding: 6px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ margin-top: 5px;
+}
+
+.target-language {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+#customLang.invalid {
+ border-color: #ff4444;
+ background-color: #fff8f8;
+}
+
+#customLang.invalid::placeholder {
+ color: #ff4444;
+}
+
+.language-select-container::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: -20px;
+ left: 0;
+ font-size: 12px;
+ color: #666;
+ display: none;
+}
+
+.language-select-container:hover::after {
+ display: block;
+}
+
+.button-group {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.button-group button {
+ flex: 1;
+ padding: 8px 6px;
+ font-size: 13px;
+ margin: 0;
+}
+
+button.active {
+ background-color: #388E3C;
+}
+
+button:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+ opacity: 0.7;
+}
+
+.translator-panel {
+ height: auto !important;
+ max-height: none !important;
+}
+
+.cache-controls {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.secondary-button {
+ background-color: #757575;
+ font-size: 11px;
+ padding: 4px 6px;
+ height: 24px;
+ border-radius: 3px;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+}
+
+.secondary-button:hover {
+ background-color: #616161;
+ opacity: 1;
+}
+
+.secondary-button:disabled {
+ background-color: #bdbdbd;
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+button.stop-translate {
+ background-color: #f44336;
+}
+
+button.stop-translate:hover {
+ background-color: #d32f2f;
+}
+
+.panel-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.panel-title {
+ margin: 0;
+ font-size: 16px;
+ color: #333;
+}
+
+.settings-link {
+ color: #4CAF50;
+ text-decoration: none;
+ font-size: 13px;
+ padding: 4px 8px;
+ border-radius: 3px;
+ transition: background-color 0.2s;
+}
+
+.settings-link:hover {
+ background-color: rgba(76, 175, 80, 0.1);
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+ .panel-title {
+ color: #fff;
+ }
+
+ .settings-link {
+ color: #81c784;
+ }
+
+ .settings-link:hover {
+ background-color: rgba(129, 199, 132, 0.1);
+ }
+}
+
\ No newline at end of file
diff --git a/content/panel.html b/content/panel.html
new file mode 100644
index 0000000..aa292ec
--- /dev/null
+++ b/content/panel.html
@@ -0,0 +1,46 @@
+
+
+
+
+ AI 网页翻译
+
+
+
+
+
+
+
+
原文语言: 检测中...
+
→
+
+
目标语言:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0%
+
+
+
AI 翻译助手设置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
提示：
+
+ - 选中文本后自动显示翻译
+ - 点击上方按钮翻译整页
+
+
+
+