2012年7月12日 星期四

[cloud] 為 Google 翻譯加上熱鍵

為 Google 翻譯加上熱鍵

Jing (mqjing@gmail.com)
預計時間: 10 分鐘
專案下載:  Download

Google Translate 當作是一個即時翻譯字典, 我想應該有很多人這麼做吧. 但是要把之前的文字清掉, 你就必須用眼睛很精確的控制滑鼠點那右上角的 x 清除按鈕. 非常麻煩!

為什麼不寫一個簡單的 Chrome content script, 把想要的 [熱鍵清除] 功能注射進 Google Translate 網頁. 這樣不就好了.

要求:
  1. 使用者在任何時刻, 按下 ALT + C, 即可清除輸入文字項 [textarea id=source]
問題
  1. 如何寫一個 content script 程式? (你可以參考這篇文章[1])
  2. 如何讓 JavaScript 收 hot key? 下面是關鍵片段.

// 攔截 ALT key up 事件範例程式
document.onkeyup=function(e){
if(e.which == 18){ // alt
alt=false;
console.log('alt = false');
}
}



完整程式範例:





Install:
請參考 http://mqjing.blogspot.tw/2012/04/cloud-chrome-extension.html.

Demo:
1. 連到 Google Translate, http://translate.google.com.tw/
2. 按 ALT+C 將會清除 area text input

Enjoy!
by Jing.

References:
  1. 井民全, "最簡單的 Chrome Extension,"  http://mqjing.blogspot.tw/2012/04/cloud-chrome-extension.html.
  2.  Jean-Baptiste Jung, "Using keyboard shortcuts in Javascript," http://www.catswhocode.com/blog/using-keyboard-shortcuts-in-javascript.
  3. All event,  http://www.w3schools.com/jsref/dom_obj_event.asp