【使用技巧】谷歌翻译及其element.js使用笔记

XZen
2,089 阅读3分钟

Chrome浏览器自带谷歌翻译，但是不能一键切换；安卓的webview无此功能，但可用谷歌的element.js代替，下面记录一些使用的技巧。

浏览器一键翻译、一键切换原文译文

原理：巧用autohotkey脚本帮我们完成“右键菜单+按键T”的操作，实现一键翻译。 推荐将此脚本绑定到小键盘的＋号按键，因为显示翻译条界面时，回车键默认即为切换原文与译文，所以两个按键可以很好地相互配合、实现一键切换翻译。

简单版本（鼠标不能在链接、图片、文本选择等元素之上，否则点出来的右键菜单里就没有"翻译成中文"）：

#IfWinActive ahk_exe chrome.exe
NumpadAdd:: 
	MouseClick, Right, xw - 10, ypos
	sleep, 20
	Send {T}
return

复杂版本（瞬间将鼠标移动至网页最右端（滚动条的位置），触发右键菜单、按下T，然后恢复鼠标位置）：

#IfWinActive ahk_exe chrome.exe
NumpadAdd:: ; 小键盘加号打开谷歌翻译，自带回车切换
	CoordMode, Mouse, Screen
	global lastXW
	MouseGetPos, xpos, ypos
	WinGetPos,x,y,w,h
	xw := lastXW
	WinGetTitle, title
	IfInString, title, Chrome ; 这里排除翻译条界面的窗口
	{
		xw := x + w
		lastXW := xw
		;弹出顺时消息("Title",title . xw, "-500", "w720")
	}
	MouseClick, Right, xw - 10, ypos
	MouseMove, xpos, ypos
	sleep, 20
	Send {T}
	;MouseMove, lastX, ypos
	; DllCall("SetCursorPos", "int", lastX, "int", ypos)
return

脚本可以用中文编写，其中，弹出顺时消息是调试方法，用一个临时的小弹窗打印字符串，也可以用于输出状态信息、显示提示消息等等。

弹出顺时消息(Title,Message,Timeout,Width := "w120")  {
Progress, %Width% b1 zh0 fs18, %Message%,,%Title%,
		settimer, killAlert,%Timeout%
}

推荐用vscode编写相关脚本，需安装AutoHotKey Plus插件，支持代码导航、语法高亮、自动完成、断点调试（后两个不怎么用得上），建议将运行脚本之指令绑定到F5。

Element.js 使用技巧

<div id='text'></div>
<script>
        document.getElementById('text').innerText='happy';
        function init() {
                new google.translate.TranslateElement(
                        { pageLanguage: 'auto' }
                        //{pageLanguage:'auto',layout:google.translate.TranslateElement.InlineLayout.SIMPLE,multilanguagePage:true}
                        , 'text');
        }
</script>
<script src='http://translate.google.com/translate_a/element.js?cb=init'></script>

文档没找到。谷歌的翻译API有付费版本的，免费API翻译出来的效果可能差一些（参见讨论，element.js效果还不错）。可以用class='notranslate'标记不需要翻译的内容，比如原文片段。

通过devtool查看得知，有两个资源访问较慢，可以下载下来后弄本地代理，替换后，实际的翻译速度还是很快的。

顺便修改了一下代码，谷歌翻译插入的顶部布局是一个iframe，原文的body往下偏移；iframe的访问限制实在太严格，即使是无域名的iframe（构建过程是设置src='javascript:'，然后修改文档流？），也有跨域限制，无法修改Dom，即使是用src='javascript:...'也不行。只好修改下载下来的网络文件，主要是去除多余文本，使界面不那么拥挤，然后拦截替代。

效果图：

image (6).png

本次使用编辑器时，又发现了一二可以改进之处：

  1. 文本拖拽功能，CTRL修饰需要预先按下，不能在拖拽过程中按下，否则不是复制、还是剪切。
  2. 不支持<kbd>快捷键标签</kbd>，或者说没有相关的样式：

image (4).png

▶ 3. 还有，参考Github，这个折叠功能最好自动就有个向右的三角形，或者包含在工具栏的模板代码里…… 另外，若开启了同步滚动、插入了图片，打字时页面会跳动。浏览器底部显示下载栏时，尤为明显。

支持 AutoHotKey 的语法高亮，挺好。

avatar
文章
阅读
粉丝