0x00 前言
这里简单记录一下，关于市面上常见的Android手机浏览器网页翻译功能的情况，以及简述目前我了解到的网页翻译的方式，根据收集到的情况来看，有些方案是适用于任何浏览器的，和平台都没有太大关系。
相关安装包均为2021年2月初在华为手机应用市场下载的版本，仅代表当时的情况，虽然部分浏览器支持添加翻译插件，但是这里仅仅手机原始包的情况。
0x01 市面上常见的Android手机浏览器及其翻译功能的支持情况
拥有翻译功能的浏览器
- Chrome
- uc浏览器 没用，不太清楚是不是我自己手机有什么问题
- 搜狗浏览器
- Edge
- 夸克
- QQ浏览器
- 极速浏览器
- 360浏览器
- via浏览器
- x浏览器
- 猎豹浏览器 这个在我手机里头也不好使
没有翻译功能的浏览器
- firefox
- 星尘浏览器
- 百度浏览器/百度移动端app
百度移动端app因为集成了搜索，感觉和浏览器差不多，就放在一起看了，没有在工具箱看到这个功能，按理来说这么大的厂不至于没有这玩意啊，也可能是我版本不对或者入口深吧。
0x02 部分浏览器翻译功能的实现分析
部分自带的浏览器使用的是内置的翻译功能，我逆向这块不是特别熟悉，只是简单看了看，这里只介绍分析出结果的翻译功能的实现。
Chrome/360浏览器
360浏览器我也不确定他是不是真的就和chrome完全一摸一样，但是用起来的ui和效果是完全一致的，国内挺多浏览器应该都是chrome套壳做的。这里找到了别人处理好的Chrome的源码?https://github.com/kuoruan/Chromium-Android?，然后也有简单看一下它的翻译功能对应的类 TranslateBridge ，再下面就是native了，项目里面只有so，so对应的源码没有找到，相关的符号或者函数名称都尝试检索过，没有结果，可能是代码分支或者build之类的不同吧。
via/x浏览器
这类的实现方式比较简单，耦合的代码也非常少。实际上就是注入了一小段js
//出处?https://blog.csdn.net/Cdeeffq/article/details/103934994
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
// pageLanguage: 'zh-CN',
// 需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
// 自动显示翻译横幅，就是翻译后顶部出现的那个
autoDisplay: true,
// 还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
},
'google_translate_element' // 触发元素的id
);
}
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
|
感兴趣的朋友可以打开chrome的开发者模式然后在控制台输入这段代码，就可以实现翻译功能了。我并不是非常熟悉js，这里只是一个示例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| var pageBodyForTransalte = document.getElementsByTagName("body")[0];
var btnGoogleTranslate = document.createElement("div");
btnGoogleTranslate.id = "google_translate_element";
btnGoogleTranslate.setAttribute('style', 'position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7');
pageBodyForTransalte.appendChild(btnGoogleTranslate);
var googleTranslateScript = document.createElement("script");
googleTranslateScript.src = "https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit";
pageBodyForTransalte.appendChild(googleTranslateScript);
function googleTranslateElementInit() {
new google.translate.TranslateElement({
// pageLanguage: 'zh-CN',
// 需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
// 自动显示翻译横幅，就是翻译后顶部出现的那个
autoDisplay: true,
// 还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
},'google_translate_element'
);
}
|
这里逆向了via浏览器，因为没有加固啥的，倒是好说，它注入的js大概是这样的。基本原理和上面说的都是一样的。
1
2
3
4
5
6
7
| var s = document.createElement('script');
s.type = 'text/javascript';
s.text = "!function(){!function(){function e(){window.setTimeout(function(){window[t].showBanner(!0)},10)}function n(){return new google.translate.TranslateElement({autoDisplay:!1,floatPosition:0,multilanguagePage:!0,includedLanguages:'null',pageLanguage:'auto'})}var t=(document.documentElement.lang,'TE_3b04e01e881a82d5e4776c906373d512'),o='TECB_3b04e01e881a82d5e4776c906373d512';if(window[t])e();else if(!window.google||!google.translate||!google.translate.TranslateElement){window[o]||(window[o]=function(){window[t]=n(),e()});var a=document.createElement('script');a.src='https://translate.google.cn/translate_a/element.js?cb='+encodeURIComponent(o)+'&client=tee',document.getElementsByTagName('head')[0].appendChild(a)}}()}();";
var o = document.getElementsByTagName('head');
if (o.length > 0 && o[0]) {
o[0].appendChild(s)
}
|
这个功能的实现基于谷歌的一个接口，比较遗憾的是谷歌已经停止对它的支持了?https://translate.google.com/intl/en/about/website/?可以继续使用，但是已经没有文档一类的信息了。
这里简单提一下Android WebView调用js的方式，使用evaluateJavascript或loadUrl函数就可以了，区别是前者有js调用的返回值，后者没有。
极速浏览器
它使用的方式，比上面的注入js还要更加简单
1
2
| url格式如下
https://translate.googleusercontent.com/translate_c?sl=ORIGINALLANGUAGE&tl=TRANSLATEDLANGUAGE&u=WEBSITEURL
|
示例，比如说现在需要翻译https://www.englishpage.com/，只用构造这样一个url然后跳转过去就好了
1
| https://translate.googleusercontent.com/translate_p?hl=en&sl=auto&tl=zh-CN&u=https://www.englishpage.com/
|
但是它会跳转到translate.google.com并展示翻译结果，而这个域名无法访问。
|