首页 > 其他分享> 文章详细

Android浏览器翻译功能调研

2021-07-22 18:31:25 阅读：245 来源： 互联网

标签：翻译 google 浏览器 js https Android translate

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

标签：翻译,google,浏览器,js,https,Android,translate
来源： https://blog.csdn.net/a646796992/article/details/119006072

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Android浏览器翻译功能调研

0x00 前言

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

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