通用型选中文本翻译/解释工具，支持复杂动态网页
// ==UserScript==
// @name Universal DeepSeek Text Selection
// @namespace http://tampermonkey.net/
// @version 3.7
// @description 通用型选中文本翻译/解释工具，支持复杂动态网页
// @author You
// @match *://*/*
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @connect api.deepseek.com
// @connect api.deepseek.ai
// @connect *
// @run-at document-start
// @license MIT
// ==/UserScript==
(function () {
'use strict';
const CONFIG = {
API_KEY: '',
API_URL: 'https://api.deepseek.com/v1/chat/completions',
MAX_RETRIES: 3,
RETRY_DELAY: 1000,
RETRY_BACKOFF_FACTOR: 1.5,
DEBOUNCE_DELAY: 200,
SHORTCUTS: {
translate: 'Alt+T',
explain: 'Alt+E',
summarize: 'Alt+S'
},
MAX_TEXT_LENGTH: 5000,
MIN_TEXT_LENGTH: 1,
ERROR_DISPLAY_TIME: 3000,
ANIMATION_DURATION: 200,
MENU_FADE_DELAY: 150,
CACHE_DURATION: 3600000, // 1小时
MAX_CACHE_ITEMS: 50,
LOADING_MESSAGES: [
'正在思考中...',
'处理中，请稍候...',
'马上就好...',
'正在分析文本...'
],
LOADING_INTERVAL: 2000,
MAX_RESULT_HEIGHT: 400,
SCROLLBAR_WIDTH: 15,
};
// 样式注入
GM_addStyle(`
#ai-floating-menu {
all: initial;
position: fixed;
z-index: 2147483647;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
padding: 5px;
opacity: 1;
visibility: visible;
transition: opacity ${CONFIG.ANIMATION_DURATION}ms ease,
visibility ${CONFIG.ANIMATION_DURATION}ms ease;
font-family: system-ui, -apple-system, sans-serif;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
#ai-floating-menu.hiding {
opacity: 0;
visibility: hidden;
}
#ai-floating-menu button {
all: initial;
display: block;
width: 120px;
margin: 3px;
padding: 8px 12px;
background: #2c3e50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
text-align: center;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
#ai-floating-menu button:hover {
background: #34495e;
transform: translateY(-1px);
}
#ai-floating-menu button:active {
transform: translateY(1px);
}
#ai-floating-menu button.processing {
pointer-events: none;
opacity: 0.7;
}
#ai-floating-menu button.processing::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: linear-gradient(to right, #3498db, #2ecc71);
animation: loading-bar 2s infinite linear;
}
#ai-floating-menu .shortcut {
float: right;
font-size: 12px;
opacity: 0.7;
}
#ai-result-box {
all: initial;
position: fixed;
z-index: 2147483648;
background: white;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0,0,0,0.2);
padding: 15px;
min-width: 200px;
max-width: 500px;
max-height: ${CONFIG.MAX_RESULT_HEIGHT}px;
opacity: 1;
visibility: visible;
transition: opacity ${CONFIG.ANIMATION_DURATION}ms ease,
visibility ${CONFIG.ANIMATION_DURATION}ms ease,
transform 0.2s ease;
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
overflow: auto;
transform: translateY(0);
animation: fadeIn 0.3s ease;
cursor: grab;
user-select: none;
}
#ai-result-box .content {
cursor: default;
user-select: text;
}
#ai-result-box.hiding {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
#ai-result-box .close-btn {
all: initial;
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #f0f0f0;
border: none;
border-radius: 50%;
cursor: pointer;
font-family: inherit;
font-size: 14px;
color: #666;
transition: all 0.2s;
}
#ai-result-box .close-btn:hover {
background: #e0e0e0;
transform: rotate(90deg);
}
#ai-result-box .content {
margin-top: 5px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.6;
font-size: 14px;
color: #2c3e50;
}
#ai-result-box .error {
color: #e74c3c;
background: #fde8e7;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
animation: shake 0.5s ease-in-out;
}
#ai-result-box .loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
}
.loading-spinner {
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 10px;
}
.loading-text {
color: #666;
font-size: 14px;
margin-top: 10px;
min-height: 20px;
transition: opacity 0.3s;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes loading-bar {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@media (prefers-color-scheme: dark) {
#ai-floating-menu,
#ai-result-box {
background: #2c3e50;
color: #ecf0f1;
}
#ai-result-box .content {
color: #ecf0f1;
}
#ai-result-box .error {
background: #4a1c17;
}
.loading-text {
color: #ecf0f1;
}
}
`);
// 工具函数
const utils = {
debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
},
async retry(fn, retries = CONFIG.MAX_RETRIES, delay = CONFIG.RETRY_DELAY) {
try {
return await fn();
} catch (error) {
if (retries === 0) throw error;
await new Promise(resolve => setTimeout(resolve, delay));
return this.retry(fn, retries - 1, delay * CONFIG.RETRY_BACKOFF_FACTOR);
}
},
createLoadingSpinner() {
return `
<div class="loading-container">
<div class="loading-spinner"></div>
<div class="loading-text">${CONFIG.LOADING_MESSAGES[0]}</div>
</div>
`;
},
isValidText(text) {
return text &&
text.length >= CONFIG.MIN_TEXT_LENGTH &&
text.length <= CONFIG.MAX_TEXT_LENGTH;
},
rotateLoadingMessage() {
const loadingText = document.querySelector('.loading-text');
if (!loadingText) return;
let currentIndex = 0;
return setInterval(() => {
currentIndex = (currentIndex + 1) % CONFIG.LOADING_MESSAGES.length;
loadingText.style.opacity = '0';
setTimeout(() => {
loadingText.textContent = CONFIG.LOADING_MESSAGES[currentIndex];
loadingText.style.opacity = '1';
}, 300);
}, CONFIG.LOADING_INTERVAL);
}
};
// 缓存管理类
class CacheManager {
static getKey(text, action) {
return `${action}_${text}`;
}
static async get(text, action) {
const key = this.getKey(text, action);
const cached = GM_getValue(key);
if (cached && Date.now() - cached.timestamp < CONFIG.CACHE_DURATION) {
return cached.data;
}
return null;
}
static async set(text, action, data) {
const key = this.getKey(text, action);
const cache = {
data,
timestamp: Date.now()
};
const keys = Object.keys(GM_getValue('cache_keys', {}));
if (keys.length >= CONFIG.MAX_CACHE_ITEMS) {
const oldestKey = keys[0];
GM_deleteValue(oldestKey);
keys.shift();
}
keys.push(key);
GM_setValue('cache_keys', keys);
GM_setValue(key, cache);
}
}
// API调用类
class APIClient {
static async call(text, action) {
const cached = await CacheManager.get(text, action);
if (cached) return cached;
if (!utils.isValidText(text)) {
throw new Error(`文本长度应在${CONFIG.MIN_TEXT_LENGTH}至${CONFIG.MAX_TEXT_LENGTH}字符之间`);
}
const prompts = {
translate: '将以下内容翻译成中文，保持专业性和准确性：',
explain: '请详细解释以下内容，如果包含专业术语请着重说明：',
summarize: '请提炼以下内容的关键要点，以简洁的要点形式列出：'
};
let retryCount = 0;
const maxRetries = CONFIG.MAX_RETRIES;
while (retryCount < maxRetries) {
try {
const response = await this.makeRequest(text, prompts[action]);
const result = this.processResponse(response);
await CacheManager.set(text, action, result);
return result;
} catch (error) {
retryCount++;
if (retryCount === maxRetries) throw error;
await new Promise(resolve =>
setTimeout(resolve, CONFIG.RETRY_DELAY * Math.pow(CONFIG.RETRY_BACKOFF_FACTOR, retryCount))
);
}
}
}
static async makeRequest(text, prompt) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'POST',
url: CONFIG.API_URL,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${CONFIG.API_KEY}`
},
data: JSON.stringify({
model: 'deepseek-chat',
messages: [{
role: 'user',
content: `${prompt}\n\n${text}`
}],
temperature: 0.7,
max_tokens: 2000,
presence_penalty: 0.6,
frequency_penalty: 0.5
}),
timeout: 30000,
onload: resolve,
onerror: reject,
ontimeout: () => reject(new Error('请求超时'))
});
});
}
static processResponse(res) {
if (res.status !== 200) {
throw new Error(`API错误: ${res.status}`);
}
try {
const data = JSON.parse(res.responseText);
if (!data.choices?.[0]?.message?.content) {
throw new Error('API返回格式错误');
}
return data.choices[0].message.content;
} catch (e) {
throw new Error('解析响应失败');
}
}
static getErrorMessage(error) {
const errorMessages = {
'Network Error': '网络连接失败',
'Timeout': '请求超时',
'API错误: 429': '请求过于频繁，请稍后再试',
'API错误: 401': 'API密钥无效',
'API错误: 403': '没有访问权限'
};
return errorMessages[error.message] || error.message;
}
}
// UI管理类
class UIManager {
static ensureElementsExist() {
if (!document.getElementById('ai-floating-menu')) {
const menu = document.createElement('div');
menu.id = 'ai-floating-menu';
menu.style.display = 'none';
menu.innerHTML = `
<button data-action="translate">翻译为中文 <span class="shortcut">Alt+T</span></button>
<button data-action="explain">解释内容 <span class="shortcut">Alt+E</span></button>
<button data-action="summarize">总结要点 <span class="shortcut">Alt+S</span></button>
`;
document.body.appendChild(menu);
}
if (!document.getElementById('ai-result-box')) {
const resultBox = document.createElement('div');
resultBox.id = 'ai-result-box';
resultBox.style.display = 'none';
resultBox.innerHTML = `
<button class="close-btn">×</button>
<div class="content"></div>
`;
document.body.appendChild(resultBox);
}
}
static async showMenu(x, y) {
this.ensureElementsExist();
await this.hideAll();
const menu = document.getElementById('ai-floating-menu');
const { left, top } = this.calculateOptimalPosition(x, y, menu);
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;
menu.style.display = 'block';
menu.offsetHeight; // 触发重排
menu.classList.remove('hiding');
}
static async showResult(content, x, y) {
this.ensureElementsExist();
await this.hideMenu();
const resultBox = document.getElementById('ai-result-box');
const contentDiv = resultBox.querySelector('.content');
if (content.startsWith('错误:')) {
contentDiv.classList.add('error');
setTimeout(() => {
this.hideAll();
contentDiv.classList.remove('error');
}, CONFIG.ERROR_DISPLAY_TIME);
} else {
contentDiv.classList.remove('error');
}
contentDiv.innerHTML = content;
const { left, top } = this.calculateResultPosition(x, y, resultBox);
resultBox.style.left = `${left}px`;
resultBox.style.top = `${top}px`;
resultBox.style.display = 'block';
resultBox.offsetHeight; // 触发重排
resultBox.classList.remove('hiding');
return content.includes('loading-container') ? utils.rotateLoadingMessage() : null;
}
static calculateOptimalPosition(x, y, element) {
const margin = 10;
const maxWidth = Math.min(500, window.innerWidth - 2 * margin);
element.style.maxWidth = `${maxWidth}px`;
let left = Math.max(margin, Math.min(x, window.innerWidth - element.offsetWidth - margin));
let top = Math.max(margin, Math.min(y, window.innerHeight - element.offsetHeight - margin));
return { left, top };
}
static calculateResultPosition(x, y, element) {
const margin = 20;
const maxWidth = Math.min(500, window.innerWidth - 2 * margin);
element.style.maxWidth = `${maxWidth}px`;
const selection = window.getSelection();
let selectionRect = null;
if (selection.rangeCount > 0) {
selectionRect = selection.getRangeAt(0).getBoundingClientRect();
}
let left, top;
if (selectionRect) {
// 优先显示在选区下方
left = selectionRect.left;
top = selectionRect.bottom + margin;
// 如果底部空间不足，则显示在选区上方
if (top + element.offsetHeight > window.innerHeight - margin) {
top = Math.max(margin, selectionRect.top - element.offsetHeight - margin);
}
// 如果水平方向超出屏幕，进行调整
if (left + maxWidth > window.innerWidth - margin) {
left = Math.max(margin, window.innerWidth - maxWidth - margin);
}
} else {
// 如果没有选区，则根据鼠标位置
left = Math.max(margin, Math.min(x, window.innerWidth - maxWidth - margin));
top = Math.max(margin, Math.min(y, window.innerHeight - element.offsetHeight - margin));
}
return { left, top };
}
static async hideMenu() {
const menu = document.getElementById('ai-floating-menu');
if (menu && menu.style.display !== 'none') {
menu.classList.add('hiding');
await new Promise(resolve => setTimeout(resolve, CONFIG.ANIMATION_DURATION));
menu.style.display = 'none';
}
}
static async hideAll() {
const menu = document.getElementById('ai-floating-menu');
const resultBox = document.getElementById('ai-result-box');
const promises = [];
if (menu && menu.style.display !== 'none') {
menu.classList.add('hiding');
promises.push(new Promise(resolve => setTimeout(resolve, CONFIG.ANIMATION_DURATION)));
}
if (resultBox && resultBox.style.display !== 'none') {
resultBox.classList.add('hiding');
promises.push(new Promise(resolve => setTimeout(resolve, CONFIG.ANIMATION_DURATION)));
}
await Promise.all(promises);
if (menu) menu.style.display = 'none';
if (resultBox) resultBox.style.display = 'none';
}
}
// 文本选择管理类
class SelectionManager {
static getSelectedText() {
let text = '';
let range = null;
const selection = window.getSelection();
text = selection.toString().trim();
if (text && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
return { text, range };
}
try {
const iframes = document.getElementsByTagName('iframe');
for (const iframe of iframes) {
try {
const iframeSelection = iframe.contentWindow.getSelection();
const iframeText = iframeSelection.toString().trim();
if (iframeText) {
return {
text: iframeText,
range: iframeSelection.rangeCount > 0 ? iframeSelection.getRangeAt(0) : null
};
}
} catch (e) {
console.debug('无法访问iframe内容:', e);
}
}
} catch (e) {
console.debug('处理iframe时出错:', e);
}
const activeElement = document.activeElement;
if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
const start = activeElement.selectionStart;
const end = activeElement.selectionEnd;
if (start !== end) {
text = activeElement.value.substring(start, end).trim();
return { text, range: null };
}
}
return { text: '', range: null };
}
}
// 事件处理类
class EventHandler {
static init() {
UIManager.ensureElementsExist();
this.setupEventListeners();
this.setupIntersectionObserver();
this.setupResizeObserver();
this.setupDraggable();
}
static setupEventListeners() {
const menu = document.getElementById('ai-floating-menu');
const resultBox = document.getElementById('ai-result-box');
// 使用事件委托处理按钮点击
document.addEventListener('click', async (e) => {
const button = e.target.closest('#ai-floating-menu button');
if (!button) return;
const action = button.dataset.action;
const { text } = SelectionManager.getSelectedText();
if (!text) return;
button.classList.add('processing');
await this.handleAction(action, text, e.clientX, e.clientY);
button.classList.remove('processing');
});
// 关闭按钮
resultBox.querySelector('.close-btn').addEventListener('click', () => {
UIManager.hideAll();
});
// 点击外部隐藏菜单和结果框
document.addEventListener('mousedown', (e) => {
if (!menu.contains(e.target) && !resultBox.contains(e.target)) {
UIManager.hideAll();
}
}, true);
// 快捷键支持
document.addEventListener('keydown', (e) => {
for (const [action, shortcut] of Object.entries(CONFIG.SHORTCUTS)) {
const [modifier, key] = shortcut.split('+');
if (e[`${modifier.toLowerCase()}Key`] && e.key.toUpperCase() === key) {
e.preventDefault();
const { text } = SelectionManager.getSelectedText();
if (text) {
this.handleAction(action, text, e.clientX, e.clientY);
}
}
}
});
// 文本选择监听
this.addSelectionListeners();
// 触摸屏支持
document.addEventListener('touchend', (e) => {
const { text } = SelectionManager.getSelectedText();
if (text) {
const touch = e.changedTouches[0];
UIManager.showMenu(touch.clientX, touch.clientY);
}
});
}
static setupDraggable() {
const resultBox = document.getElementById('ai-result-box');
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
resultBox.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('close-btn') ||
e.target.closest('.content')) return;
isDragging = true;
initialX = e.clientX - resultBox.offsetLeft;
initialY = e.clientY - resultBox.offsetTop;
resultBox.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
// 限制在可视区域内
currentX = Math.max(0, Math.min(currentX, window.innerWidth - resultBox.offsetWidth));
currentY = Math.max(0, Math.min(currentY, window.innerHeight - resultBox.offsetHeight));
resultBox.style.left = `${currentX}px`;
resultBox.style.top = `${currentY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
resultBox.style.cursor = 'grab';
});
}
static addSelectionListeners(target = document) {
const handleSelection = utils.debounce(async (e) => {
const { text, range } = SelectionManager.getSelectedText();
if (!text) {
await UIManager.hideAll();
return;
}
let x = e?.clientX || 0;
let y = e?.clientY || 0;
if (range) {
try {
const rect = range.getBoundingClientRect();
if (rect.width > 0 && rect.height > 0) {
x = rect.right;
y = rect.bottom + 5;
}
} catch (e) {
console.debug('获取选区位置失败:', e);
}
}
await UIManager.showMenu(x, y);
}, CONFIG.DEBOUNCE_DELAY);
target.addEventListener('mouseup', handleSelection);
target.addEventListener('keyup', handleSelection);
target.addEventListener('selectionchange', handleSelection);
}
static setupIntersectionObserver() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
UIManager.hideAll();
}
});
});
const menu = document.getElementById('ai-floating-menu');
const resultBox = document.getElementById('ai-result-box');
observer.observe(menu);
observer.observe(resultBox);
}
static setupResizeObserver() {
const observer = new ResizeObserver(utils.debounce(() => {
const menu = document.getElementById('ai-floating-menu');
const resultBox = document.getElementById('ai-result-box');
if (menu.style.display === 'block' || resultBox.style.display === 'block') {
UIManager.hideAll();
}
}, 100));
observer.observe(document.body);
}
static async handleAction(action, text, x, y) {
let loadingMessageInterval;
try {
await UIManager.hideAll();
loadingMessageInterval = await UIManager.showResult(utils.createLoadingSpinner(), x, y);
const response = await APIClient.call(text, action);
clearInterval(loadingMessageInterval);
UIManager.showResult(response, x, y);
} catch (error) {
if (loadingMessageInterval) clearInterval(loadingMessageInterval);
UIManager.showResult(`错误: ${error.message}`, x, y);
}
}
}
// 初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => EventHandler.init());
} else {
EventHandler.init();
}
})();