关于网页划词翻译
2013-4-21
近日偶然看到js页面文字选中后分享到新浪微博实现，发现原来竟然只要一句话就可以实现获取划词。便萌生自己写个划词翻译的东东，方便自己看文档。
我首先想到了之前看到的油猴插件，最早是在看优酷去广告插件的原理时知道这个东西。感觉其原理是在 server 发的 response 页面上嵌入了自己写的js脚本，以达到邪恶的目的。
注：Chrome的脚本叫，Tampermonkey，或者可以用网上写的不用插件的方法。
实现思路是，获取划词，然后建一个iframe，内嵌网页为有道词典的网页版http://dict.youdao.com/ 组查询链接比如 http://dict.youdao.com/search?le=eng&q=zzzzz 表示查询zzzzz。
效果：
实现代码：
1 var di; 2 var div_id = \'translate_word\'; 3 di = document.getElementById(div_id); 4 5 // make di 6 if(!di){ 7 di = document.createElement("DIV"); 8 } 9 di.id = div_id; 10 di.style.position = \'absolute\'; 11 di.style.backgroundColor=\'white\'; 12 document.body.appendChild(di); 13 14 var get_selected_word = function(){ 15 var txt = \'\'; 16 //not support ie6 (which can not use this script :P) 17 txt = document.getSelection(); 18 return txt.toString(); 19 } 20 var ifr = document.createElement(\'iframe\'); 21 ifr.id = \'yd_translat_ifr\'; 22 document.onmouseup = function(e){ 23 //alert("asdf"); 24 var txt = get_selected_word(); 25 sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 26 var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40; 27 var top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40; 28 if(txt){ 29 top = top + 80; 30 di.style.top = top + "px"; 31 ifr.src = "http://dict.youdao.com/search?le=eng&q=" + get_selected_word(); 32 ifr.height = 300; 33 ifr.width = 1000; 34 document.getElementById(di.id).appendChild(ifr); 35 }else{ 36 if(document.getElementById(di.id).firstChild){ 37 document.getElementById(di.id).removeChild(document.getElementById(di.id).firstChild); 38 } 39 } 40 }
2013-5-7
分析有道划词插件
我猜想既然如此简单，有道肯定有自己的划词翻译，根据我的猜测，他的插件肯定得调用他的查询接口。通过chrome查看请求应该能获取能得到他的公共接口。（注：其实有道有提供公共api，不过得注册，oauth验证等，比较麻烦。）
由图可见，划词时client只得到了第一条test.开头的flash，鼠标每次移在声音按钮上后便向server请求此词的声音。
最重要的翻译结果在哪里？。。。
手贱 ， 意外发现：
话说看到这个我的心情小小的激动了下，chrome就是好啊，开源就是好。。。
然后发现了youdao的公用webservice（xml格式的）
比如查询abc
js组的 查询请求：
1 var url = \'http://dict.youdao.com/fsearch?client=deskdict&keyfrom=chrome.extension&q=\'+encodeURIComponent(word)+\'&pos=-1&doctype=xml&xmlVersion=3.2&dogVersion=1.0&vendor=unknown&appVer=3.1.17.4208&le=eng\' 2 xhr.open(\'GET\', url, true); 3 xhr.send();
用ajax实现，其实 http://dict.youdao.com/fsearch?q=abc 就行了，个人使用就用这个webservice把，免费的，不验身份，无限调用的。
client 字段，keyfrom等，我猜测可能是youdao用来统计，各个产品的调用数量吧。。
我觉得其实chrome的插件就是个新的网页（不然会存在跨域问题），激活插件就=在后台开了个页面。
可是为什么我在xxx页面划词，会得到查询结果呢？
通过查看源码，惊讶的发现此为options.js的代码仅仅是插件的popup的查询模块代码，与划词翻译没有关系。囧。
看代码时顺便看出个代码错误。
document.getElementsByName(\’word\’).focus(); 囧~
意外发现中文版chrome插件文档（感谢360攻城狮）http://open.chrome.360.cn/extension_dev/overview.html