Android浏览器翻译功能调研
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,viincludedLanguages: '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,viincludedLanguages: '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并展示翻译结果,而这个域名无法访问。
Android浏览器翻译功能调研相关推荐
- qq浏览器翻译功能启用划词插件教程
qq浏览器翻译功能启用划词插件教程 qq浏览器翻译功能怎么启用?QQ浏览器对于我们经常浏览qq空间,微信聊天的人来说是非常不错的一个浏览器,而且,QQ浏览器也有非常多不错的功能,比如划词翻译等等.那么 ...
- 浏览器翻译功能在哪里,如何使用浏览器翻译网页
对于英文不是很好的用户来说,使用浏览器浏览网页真的太头疼了,不过还好很多浏览器都有翻译功能网页的功能,那么这个翻译功能在哪里,我们如何使用浏览器翻译页面呢?本文将针对不同的浏览器,介绍如何使用浏览器翻 ...
- android wps翻译功能吗,Android版WPS Office将支持金山词霸即时翻
近日,金山WPS表示将在Android平台中实现与金山词霸的功能打通,此后Android用户无需繁琐的窗口切换,在WPS中即可方便地实现即时取词翻译功能.这一功能的加入,将更加方便全球化背景下,用户查 ...
- react项目开发中出现浏览器翻译功能造成的bug
最近使用react开发一个项目时,测试提出一个bug,说是在某些浏览器上面本来是序号''5''变成了大写的''五'' 自己却一直无法重现,最后发现是测试人员浏览器打开了翻译功能 解决方案: 解决思路是 ...
- Chrome浏览器翻译功能及访问GitHub的host配置
位置:C:\Windows\System32\drivers\etc # ip为 ping google.cn 返回的ip 142.250.4.90 translate.googleapis.com ...
- android浏览器和iPhone浏览器
android和iPhone的浏览都是使用webkit内核. webkit内核是苹果最先搞的,后来苹果把它开源了,不过苹果自己还继续在发展webkit.虽然 android和iPhone浏览器使用相同 ...
- Chrome for Android AutoComplete地址栏地址自动补全功能调研和更新
Chrome地址栏地址自动补全功能调研和更新 我的博客对应文章地址 Chrome地址栏地址自动补全功能预览 补全前提: 1. 使用Gboard输入法 2. Gboard输入法打开了[文字更正]功能里面 ...
- 谷歌浏览器翻译本地的html,谷歌Chrome浏览器开启自带的翻译功能的方法
谷歌浏览器是现在很多人喜欢用的浏览器,在使用时常常需要进行各种操作,平时使用浏览器浏览网页的时候,有时候想要将网页中的内容翻译,可以使用第三方插件,也可以使用浏览器自带的翻译功能,那么如何开启谷歌浏览 ...
- 360浏览器如何开启翻译功能?
打开360浏览器访问网页时,可能会遇到一些全英文或者全日文的网页,完全看不懂,怎么办?其实不用担心,360浏览器支持翻译功能,开启之后随时翻译网页内容,下面就来看看具体的教程. 360浏览器怎么开启翻 ...
- 百度输入法android+4.8,百度输入法Android v7.6来了 翻译功能上线助力跨国沟通
本帖最后由 百度输入法小助手 于 2017-8-8 17:50 编辑 随着世界越来越小,各个领域的跨语言交流也愈渐频繁,为了让大家可以更好地与世界各地的人交流.对话,百度输入法Android v7.6 ...
最新文章
- 手把手教你熟悉Git操作
- SQL 遍历父子关系表(二叉树)获得所有子节点 所有父节点
- solrcloud集群搭建
- 统计“3_人民日报语料”文本中的字符数和词数,把文件分别保存为 ansi, UTF8,UTF16,unicode 格式
- 如何利用Excel进行同类项合并?
- 字节数组转换为图片_每日一课 | Python 3 TypeError:无法将“字节”对象隐式转换为str...
- Web安全测试实战之测试HTTP方法
- python oop编程_23 Python - 面向对象编程OOP
- 项目管理需要使用到的图表
- 目标检测(七)--Fast R-CNN
- Swing JTree用法总结
- vjc机器人灰度怎么编程_求用vc++编程实现显示灰度直方图的详细步骤,越详细越好...
- labelcommand打印条码_Zebra条码打印机编程命令
- 远程操作Linux图形界面
- Centos 7 根目录存储容量调整大小
- python中rect用法_【opencv基础】Rect类的神奇用法
- 斯坦福 机器学习-第四章学习理论
- java课程设计计算器 uml简图,计算器的用例建模
- IDEA中DEBUG时断点变成灰色
- 5码默认版块_速看!在阜阳,“5折乘公交”优惠来了