关于网页划词翻译

　　2013-4-21

　　近日偶然看到js页面文字选中后分享到新浪微博实现，发现原来竟然只要一句话就可以实现获取划词。便萌生自己写个划词翻译的东东，方便自己看文档。

　　我首先想到了之前看到的油猴插件，最早是在看优酷去广告插件的原理时知道这个东西。感觉其原理是在 server 发的 response 页面上嵌入了自己写的js脚本，以达到邪恶的目的。

　　注：Chrome的脚本叫，Tampermonkey，或者可以用网上写的不用插件的方法。 

　　实现思路是，获取划词，然后建一个iframe，内嵌网页为有道词典的网页版http://dict.youdao.com/   组查询链接比如 http://dict.youdao.com/search?le=eng&q=zzzzz  表示查询zzzzz。

　　效果：

　　

　　实现代码：

var di;
var div_id = 'translate_word';
di = document.getElementById(div_id);

// make di
if(!di){
    di = document.createElement("DIV");
}
di.id = div_id;
di.style.position = 'absolute';
di.style.backgroundColor='white';
document.body.appendChild(di);

var get_selected_word = function(){
    var txt = '';
    //not support ie6 (which can not use this script :P)
    txt = document.getSelection();
    return txt.toString();
}
var ifr = document.createElement('iframe'); 
ifr.id = 'yd_translat_ifr';
document.onmouseup = function(e){
    //alert("asdf");
    var txt = get_selected_word();
    sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40;
    var top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
    if(txt){
        top = top + 80;
        di.style.top = top + "px";
        ifr.src = "http://dict.youdao.com/search?le=eng&q=" + get_selected_word();
        ifr.height = 300;
        ifr.width = 1000;    
        document.getElementById(di.id).appendChild(ifr);
    }else{
        if(document.getElementById(di.id).firstChild){
            document.getElementById(di.id).removeChild(document.getElementById(di.id).firstChild);
        }   
    }
}

　　

2013-5-7

　　分析有道划词插件

　　我猜想既然如此简单，有道肯定有自己的划词翻译，根据我的猜测，他的插件肯定得调用他的查询接口。通过chrome查看请求应该能获取能得到他的公共接口。（注：其实有道有提供公共api，不过得注册，oauth验证等，比较麻烦。）

　　

　　由图可见，划词时client只得到了第一条test.开头的flash，鼠标每次移在声音按钮上后便向server请求此词的声音。

　　最重要的翻译结果在哪里？。。。

　　手贱 ， 意外发现：

　　　

　　话说看到这个我的心情小小的激动了下，chrome就是好啊，开源就是好。。。

　　然后发现了youdao的公用webservice（xml格式的）

　　比如查询abc

　　js组的 查询请求：

        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'
        xhr.open('GET', url, true);
        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