Android浏览器翻译功能调研

您所在的位置:网站首页 自带翻译插件的手机浏览器 Android浏览器翻译功能调研

Android浏览器翻译功能调研

#Android浏览器翻译功能调研| 来源: 网络整理| 查看: 265

0x00 前言

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

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

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

拥有翻译功能的浏览器

Chromeuc浏览器 没用,不太清楚是不是我自己手机有什么问题搜狗浏览器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 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 ); }

感兴趣的朋友可以打开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并展示翻译结果,而这个域名无法访问。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3