Greasy Fork is available in English.
将推文翻译为简体中文，并在下方显示
// ==UserScript==
// @name X 翻译姬
// @namespace https://github.com/SIXiaolong1117/Rules
// @version 0.3
// @description 将推文翻译为简体中文，并在下方显示
// @license MIT
// @icon https://x.com/favicon.ico
// @author SI Xiaolong
// @match https://twitter.com/*
// @match https://x.com/*
// @grant GM_xmlhttpRequest
// @grant GM_registerMenuCommand
// @grant GM_getValue
// @grant GM_setValue
// @connect translate.googleapis.com
// @connect api.mymemory.translated.net
// ==/UserScript==
(function () {
'use strict';
// 已翻译的元素集合，避免重复翻译
const translatedElements = new WeakSet();
// 默认设置
const DEFAULT_SETTINGS = {
translationSource: 'google',
sourceLang: 'auto',
targetLang: 'zh-CN'
};
// 获取当前设置
function getSettings() {
return {
translationSource: GM_getValue('translationSource', DEFAULT_SETTINGS.translationSource),
sourceLang: GM_getValue('sourceLang', DEFAULT_SETTINGS.sourceLang),
targetLang: GM_getValue('targetLang', DEFAULT_SETTINGS.targetLang)
};
}
// 保存设置
function saveSetting(key, value) {
GM_setValue(key, value);
location.reload();
}
// 翻译源配置
const TRANSLATION_SOURCES = {
google: 'Google 翻译',
mymemory: 'MyMemory 翻译'
};
// 语言配置
const LANGUAGES = {
'auto': '自动检测',
'zh-CN': '简体中文',
'zh-TW': '繁体中文',
'en': '英语',
'ja': '日语',
'ko': '韩语',
'es': '西班牙语',
'fr': '法语',
'de': '德语',
'ru': '俄语',
'ar': '阿拉伯语',
'pt': '葡萄牙语',
'it': '意大利语',
'th': '泰语',
'vi': '越南语'
};
// 检测当前主题（深色或浅色）
function detectTheme() {
const bgColor = window.getComputedStyle(document.body).backgroundColor;
const rgb = bgColor.match(/\d+/g);
if (rgb) {
const brightness = (parseInt(rgb[0]) + parseInt(rgb[1]) + parseInt(rgb[2])) / 3;
return brightness > 128 ? 'light' : 'dark';
}
return 'dark';
}
// 获取主题相关的颜色
function getThemeColors() {
const theme = detectTheme();
if (theme === 'light') {
return {
background: 'rgba(247, 249, 249, 0.8)',
loadingText: '#536471',
translatedText: '#0f1419',
errorText: '#f4212e',
headerText: '#536471',
border: 'rgba(207, 217, 222, 0.3)'
};
} else {
return {
background: 'rgba(32, 35, 39, 0.8)',
loadingText: '#8b949e',
translatedText: '#e7e9ea',
errorText: '#ff6b6b',
headerText: '#8b949e',
border: 'rgba(47, 51, 54, 0.3)'
};
}
}
// 注册菜单命令
function registerMenuCommands() {
const settings = getSettings();
// 翻译源选择
GM_registerMenuCommand(`🌐 翻译源: ${TRANSLATION_SOURCES[settings.translationSource]}`, () => {
const sources = Object.keys(TRANSLATION_SOURCES);
const currentIndex = sources.indexOf(settings.translationSource);
const nextIndex = (currentIndex + 1) % sources.length;
const nextSource = sources[nextIndex];
saveSetting('translationSource', nextSource);
});
// 源语言选择
GM_registerMenuCommand(`📤 源语言: ${LANGUAGES[settings.sourceLang]}`, () => {
showLanguageSelector('sourceLang', '选择源语言');
});
// 目标语言选择
GM_registerMenuCommand(`📥 目标语言: ${LANGUAGES[settings.targetLang]}`, () => {
showLanguageSelector('targetLang', '选择目标语言');
});
// 重置设置
GM_registerMenuCommand('🔄 重置为默认设置', () => {
if (confirm('确定要重置所有设置为默认值吗？')) {
saveSetting('translationSource', DEFAULT_SETTINGS.translationSource);
saveSetting('sourceLang', DEFAULT_SETTINGS.sourceLang);
saveSetting('targetLang', DEFAULT_SETTINGS.targetLang);
}
});
}
// 显示语言选择对话框
function showLanguageSelector(settingKey, title) {
const languages = Object.keys(LANGUAGES);
const languageList = languages.map((code, index) =>
`${index + 1}. ${LANGUAGES[code]} (${code})`
).join('\n');
const input = prompt(`${title}\n\n${languageList}\n\n请输入语言代码（如 zh-CN, en, ja 等）：`);
if (input && LANGUAGES[input]) {
saveSetting(settingKey, input);
} else if (input) {
alert('无效的语言代码！');
}
}
// Google翻译API
async function translateWithGoogle(text, sourceLang, targetLang) {
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`;
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: function (response) {
try {
const result = JSON.parse(response.responseText);
const translatedText = result[0].map(item => item[0]).join('');
resolve(translatedText);
} catch (e) {
reject(e);
}
},
onerror: function (error) {
reject(error);
}
});
});
}
// MyMemory翻译API
async function translateWithMyMemory(text, sourceLang, targetLang) {
const langPair = `${sourceLang === 'auto' ? 'en' : sourceLang}|${targetLang}`;
const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${langPair}`;
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: function (response) {
try {
const result = JSON.parse(response.responseText);
if (result.responseStatus === 200) {
resolve(result.responseData.translatedText);
} else {
reject(new Error('Translation failed'));
}
} catch (e) {
reject(e);
}
},
onerror: function (error) {
reject(error);
}
});
});
}
// 统一翻译接口
async function translateText(text) {
const settings = getSettings();
const { translationSource, sourceLang, targetLang } = settings;
switch (translationSource) {
case 'google':
return await translateWithGoogle(text, sourceLang, targetLang);
case 'mymemory':
return await translateWithMyMemory(text, sourceLang, targetLang);
default:
return await translateWithGoogle(text, sourceLang, targetLang);
}
}
// 保护文本中的特殊元素（@mentions, #hashtags, URLs）
function protectSpecialElements(text) {
const protectedElements = [];
let protectedText = text;
// 保护 URL（优先处理，因为URL可能包含其他特殊字符）
protectedText = protectedText.replace(/https?:\/\/[^\s]+/g, (match) => {
const placeholder = `__URL_${protectedElements.length}__`;
protectedElements.push(match);
return placeholder;
});
// 保护 @mentions
protectedText = protectedText.replace(/@[\w]+/g, (match) => {
const placeholder = `__MENTION_${protectedElements.length}__`;
protectedElements.push(match);
return placeholder;
});
// 保护 #hashtags
protectedText = protectedText.replace(/#[\w\u4e00-\u9fa5]+/g, (match) => {
const placeholder = `__HASHTAG_${protectedElements.length}__`;
protectedElements.push(match);
return placeholder;
});
return { protectedText, protectedElements };
}
// 恢复保护的特殊元素
function restoreSpecialElements(text, protectedElements) {
let restoredText = text;
protectedElements.forEach((element, index) => {
if (element.startsWith('@')) {
restoredText = restoredText.replace(`__MENTION_${index}__`, element);
} else if (element.startsWith('#')) {
restoredText = restoredText.replace(`__HASHTAG_${index}__`, element);
} else if (element.startsWith('http')) {
restoredText = restoredText.replace(`__URL_${index}__`, element);
}
});
return restoredText;
}
// 提取纯文本内容（不提取链接信息）
function extractPlainText(element) {
let textParts = [];
function traverse(node) {
// 跳过某些不需要翻译的元素（如按钮、SVG等）
if (node.nodeType === Node.ELEMENT_NODE) {
const tagName = node.tagName.toLowerCase();
if (tagName === 'button' || tagName === 'svg' || tagName === 'path') {
return;
}
}
for (let child of node.childNodes) {
if (child.nodeType === Node.TEXT_NODE) {
const text = child.textContent.trim();
if (text) textParts.push(text);
} else if (child.nodeType === Node.ELEMENT_NODE) {
// 对于链接元素，直接提取文本内容，保持位置
if (child.tagName === 'A') {
const linkText = child.textContent.trim();
if (linkText) textParts.push(linkText);
} else {
// 递归处理其他元素
traverse(child);
}
}
}
}
traverse(element);
return textParts.join(' ');
}
// 创建占位翻译框
function createPlaceholderBox() {
const settings = getSettings();
const sourceName = TRANSLATION_SOURCES[settings.translationSource];
const colors = getThemeColors();
const box = document.createElement('div');
box.className = 'x-translator-box';
box.style.cssText = `
margin-top: 12px;
padding: 12px 16px;
background-color: ${colors.background};
border: 1px solid ${colors.border};
border-radius: 12px;
font-size: 15px;
line-height: 1.5;
transition: background-color 0.2s ease, border-color 0.2s ease;
`;
// 创建标题
const header = document.createElement('div');
header.className = 'x-translator-header';
header.style.cssText = `
font-size: 13px;
color: ${colors.headerText};
margin-bottom: 8px;
font-weight: 500;
transition: color 0.2s ease;
`;
header.textContent = `📝 ${sourceName}`;
// 创建加载中的内容容器
const content = document.createElement('div');
content.className = 'x-translator-content';
content.style.cssText = `
color: ${colors.loadingText};
white-space: pre-wrap;
word-wrap: break-word;
transition: color 0.2s ease;
`;
content.textContent = '翻译中...';
box.appendChild(header);
box.appendChild(content);
return box;
}
// 更新翻译框内容（成功）
function updateTranslationBox(box, translatedText) {
const colors = getThemeColors();
const content = box.querySelector('.x-translator-content');
content.style.color = colors.translatedText;
content.textContent = translatedText;
}
// 更新翻译框内容（失败）
function updateTranslationBoxError(box, errorMessage) {
const colors = getThemeColors();
const content = box.querySelector('.x-translator-content');
content.style.color = colors.errorText;
content.textContent = `❌ 翻译失败: ${errorMessage}`;
}
// 更新所有翻译框的主题
function updateAllBoxesTheme() {
const colors = getThemeColors();
const boxes = document.querySelectorAll('.x-translator-box');
boxes.forEach(box => {
box.style.backgroundColor = colors.background;
box.style.borderColor = colors.border;
const header = box.querySelector('.x-translator-header');
if (header) {
header.style.color = colors.headerText;
}
const content = box.querySelector('.x-translator-content');
if (content) {
const text = content.textContent;
if (text === '翻译中...') {
content.style.color = colors.loadingText;
} else if (text.startsWith('❌')) {
content.style.color = colors.errorText;
} else {
content.style.color = colors.translatedText;
}
}
});
}
// 处理翻译
async function processTranslation(element, isTrend = false) {
// 如果已经翻译过，跳过
if (translatedElements.has(element)) {
return;
}
// 标记为已处理
translatedElements.add(element);
// 提取纯文本内容
const originalText = extractPlainText(element);
if (originalText.length === 0) {
return;
}
// 对于热搜，进行额外过滤
if (isTrend) {
// 排除"xx的趋势"这类描述性文字
if (originalText.match(/的趋势|条推文|Trending|posts?$/i)) {
return;
}
// 如果文本太短（少于2个字符），也跳过
if (originalText.length < 2) {
return;
}
}
// 创建占位框并立即插入到页面
const placeholderBox = createPlaceholderBox();
const parentContainer = element.parentElement;
if (parentContainer) {
parentContainer.insertBefore(placeholderBox, element.nextSibling);
}
try {
// 保护特殊元素
const { protectedText, protectedElements } = protectSpecialElements(originalText);
// 翻译文本
const rawTranslatedText = await translateText(protectedText);
// 恢复特殊元素
const translatedText = restoreSpecialElements(rawTranslatedText, protectedElements);
// 如果翻译结果与原文相同，说明可能已经是目标语言，移除占位框
if (translatedText === originalText) {
if (placeholderBox.parentNode) {
placeholderBox.parentNode.removeChild(placeholderBox);
}
return;
}
// 更新占位框内容为翻译结果
updateTranslationBox(placeholderBox, translatedText);
} catch (e) {
console.error('翻译失败:', e);
// 更新占位框内容为错误信息
updateTranslationBoxError(placeholderBox, e.message || '未知错误');
}
}
// 查找并处理所有推文
function findAndTranslateTweets() {
const tweetDivs = document.querySelectorAll('[data-testid="tweetText"]');
tweetDivs.forEach(div => {
processTranslation(div, false);
});
}
// 查找并处理用户简介
function findAndTranslateUserDescription() {
const userDescriptions = document.querySelectorAll('[data-testid="UserDescription"]');
userDescriptions.forEach(div => {
processTranslation(div, false);
});
}
// 查找并处理热搜趋势（优化版）
function findAndTranslateTrends() {
const trends = document.querySelectorAll('[data-testid="trend"]');
trends.forEach(trendDiv => {
const divs = trendDiv.querySelectorAll('div[dir="ltr"]');
let trendTextElement = null;
for (let div of divs) {
const text = div.textContent.trim();
const classList = div.className || '';
if (!text) continue;
if (text.match(/趋势|Trending/i)) continue;
if (text.match(/条帖子|posts?$/i)) continue;
if (text.match(/^[\d,]+$/)) continue;
if (classList.includes('r-b88u0q') ||
(!trendTextElement && text.length > 0)) {
trendTextElement = div;
break;
}
}
if (trendTextElement) {
processTranslation(trendTextElement, true);
}
});
}
// 查找并翻译所有内容
function findAndTranslateAll() {
findAndTranslateTweets();
findAndTranslateUserDescription();
findAndTranslateTrends();
}
// 监听DOM变化，处理动态加载的内容
const observer = new MutationObserver((mutations) => {
findAndTranslateAll();
});
// 监听主题变化
const themeObserver = new MutationObserver(() => {
updateAllBoxesTheme();
});
// 注册菜单
registerMenuCommands();
// 开始观察
observer.observe(document.body, {
childList: true,
subtree: true
});
// 监听body的属性变化（主题切换通常会改变body的class或style）
themeObserver.observe(document.body, {
attributes: true,
attributeFilter: ['class', 'style']
});
// 监听HTML元素的属性变化（有些网站会在html元素上设置主题）
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'style', 'data-theme']
});
// 初始翻译
findAndTranslateAll();
// 定期检查新内容（作为备用）
setInterval(findAndTranslateAll, 2000);
console.log('Twitter翻译脚本已加载，当前设置:', getSettings());
})();