Android浏览器翻译功能调研

2024-03-09 15:35:29

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

<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，这里只是一个示例。

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大概是这样的。基本原理和上面说的都是一样的。

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并展示翻译结果，而这个域名无法访问。

码农公寓

0x00 前言

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

0x02 部分浏览器翻译功能的实现分析

相关文章