以下是几种实现网页自动翻译的脚本源码方案，结合不同技术栈和适用场景：
一、基于浏览器扩展的解决方案
1. Chrome扩展（Manifest V3）
javascript
// manifest.json
{
"manifest_version": 3,
"name": "网页翻译助手",
"version": "1.0",
"permissions": ["activeTab", "storage", "scripting"],
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
}
}
// background.js
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: translatePage
});
});
function translatePage() {
const bodyText = document.body.innerText;
// 调用翻译API（示例为伪代码）
fetch('https://translation-api.com', {
method: 'POST',
body: JSON.stringify({ text: bodyText, targetLang: 'zh' })
}).then(response => response.json())
.then(data => {
document.body.innerHTML = data.translatedText;
});
}
技术要点：
需要申请Google翻译API或微软Translator API的密钥
需处理跨域问题（CORS）
推荐使用`chrome.i18n`实现多语言支持
二、Python自动化方案（Selenium + 翻译API）
python
from selenium import webdriver
from googletrans import Translator
def auto_translate(url):
driver = webdriver.Chrome()
driver.get(url)
content = driver.find_element_by_tag_name('body').text
translator = Translator()
translated = translator.translate(content, dest='zh-cn')
# 回写翻译结果（需DOM操作）
driver.execute_script(f"document.body.innerText = `{translated.text}`")
driver.save_screenshot('translated.png')
调用示例
auto_translate('https://example.com')
注意事项：
需安装`selenium`和`googletrans`库
可能遇到反爬机制，需设置随机延迟
大文本分块处理避免API限制
三、纯前端实现（HTML+JS）
html
优化建议：
添加语言选择下拉菜单
实现本地存储保存用户偏好
使用Web Worker处理大文本
四、Node.js服务端方案
javascript
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;
app.get('/translate', async (req, res) => {
const { url } = req.query;
const pageContent = await fetchPage(url);
const translated = await callTranslateAPI(pageContent);
res.send(translated);
});
async function fetchPage(url) {
const { data } = await axios.get(url);
return data;
}
async function callTranslateAPI(text) {
// 实际项目中应使用环境变量保存API密钥
const response = await axios.post('https://api.cognitive.microsofttranslator.com/translate',
[{ Text: text }], {
params: {
'api-version': '3.0',
'to': 'zh-Hans'
},
headers: {
'Ocp-Apim-Subscription-Key': 'YOUR_KEY',
'Content-Type': 'application/json'
}
});
return response.data[0].translations[0].text;
}
app.listen(PORT, () => console.log(`服务运行中: http://localhost:${PORT}`));
生产环境考虑：
添加请求频率限制
实现缓存机制（Redis）
支持HTTPS加密
扩展知识：
1. API选择对比：
- Google Cloud Translation：每百万字符\$20，支持100+语言
- 微软Azure Translator：免费层200万字符/月
- DeepL：专业术语翻译质量更高但价格较贵
2. 性能优化技巧：
- 使用`textContent`替代`innerHTML`减少XSS风险
- 对于SPA应用监听DOM变化（MutationObserver）
- 实现增量翻译避免全页刷新
3. 法律合规建议：
- 检查目标网站`robots.txt`文件
- 遵守GDPR等数据保护法规
- 商业用途需购买正版API授权
4. 机器学习替代方案：
- 使用Transformers库加载Helsinki-NLP/opus-mt模型
- 实现本地化翻译避免API调用
- 需要至少4GB显存支持
实际开发中建议优先使用官方SDK，例如Google Cloud Translation API提供了自动语言检测、HTML标签保留等高级功能。对于中文网页，需要注意简繁体转换问题时可以配合OpenCC库处理。
查看详情
查看详情
