Android浏览器翻译功能调研

发表于

0x00 前言

这里简单记录一下，关于市面上常见的Android手机浏览器网页翻译功能的情况，以及简述目前我了解到的网页翻译的方式，根据收集到的情况来看，有些方案是适用于任何浏览器的，和平台都没有太大关系。

相关安装包均为2021年2月初在华为手机应用市场下载的版本，仅代表当时的情况，虽然部分浏览器支持添加翻译插件，但是这里仅仅手机原始包的情况。

0x01 市面上常见的Android手机浏览器及其翻译功能的支持情况

拥有翻译功能的浏览器

  1. Chrome
  2. uc浏览器 没用，不太清楚是不是我自己手机有什么问题
  3. 搜狗浏览器
  4. Edge
  5. 夸克
  6. QQ浏览器
  7. 极速浏览器
  8. 360浏览器
  9. via浏览器
  10. x浏览器
  11. 猎豹浏览器 这个在我手机里头也不好使

没有翻译功能的浏览器

  1. firefox
  2. 星尘浏览器
  3. 百度浏览器/百度移动端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并展示翻译结果，而这个域名无法访问。