幫Chrome加裝線上嘸蝦米查碼程式的Extensions

你用嘸蝦米在打字時，會有熊熊想不起這個字該怎麼折碼的情況嗎？幸好~搭心的嘸蝦米公司有提供「線上嘸蝦米查碼程式」的工具，可以馬上去查字碼。

寫在前頭

你會從這篇文章知道：

1. 一些有關寫Chrome Extensions的訊息。
2. 如何在Chrome Browser快速查嘸蝦米的字碼。

Chrome Extensions的資源

可以從Google 瀏覽器擴充功能找到許多Extensions，然後~把它掛在自己的Chrome Browser上，讓Browser的功能更加豐富多元化，並發現許多人的創意想法。另外一個連結Google Chrome Extensions - Google Code是寫Extensions的說明文件，能於Getting Started或是Samples快速掌握如何寫Extensions，文件裡面還有更多詳細的內容。

動手寫線上嘸蝦米XMa程式

這次我寫的Extensions是運用Ajax把表單傳到行易有限公司所提供的線上嘸蝦米查碼程式，然後~再秀出結果而已，為增加安全性，有把XMLHttpRequest的responseText的<script>...</script>內容全部取代掉。

• manifest.json：

  {
    "name": "Online Liu XMa",
    "version": "1.0",
    "permissions": [
      "tabs", "http://*/*", "https://*/*"
    ],
    "browser_action": {
        "default_title": "線上嘸蝦米XMa程式",
        "default_icon": "icon.ico",
        "popup": "popup.html"
    }
  }

• popup.html的Javascript部份：

  <script type='text/Javascript'>
          function getQueryURL(text,all){
              var url='http://boshiamy.com/liuquery.php?q='+text;
              if (all)
                  url=url+'&f=1';
              return url
          }
          function setLoading(isEnable){
              var obj = document.getElementById('loading');
              if (isEnable)
                  obj.style.visibility='visible';
              else
                  obj.style.visibility='hidden';
          }
          function run_query(obj){
              setLoading(true);
              var queryText=obj.txtInput.value,isQueryAll=obj.queryAll.checked;
              var request = new XMLHttpRequest();
              request.onreadystatechange = function(){
                  if (request.readyState == 4) {
                      var response = request.responseText.replace(/<script>.*<<\/script>/gi,'').match(/<table>.*<\/table>/gi);
                      document.getElementById('result_box').innerHTML = response;
                      if (isQueryAll)
                          document.body.style.width='800px';
                      setLoading(false);
                  }
              };
              request.open('GET',getQueryURL(queryText,isQueryAll),true);
              request.send();
          }
      </script>

測試檔案和截圖

1. 可以執行安裝版本或是下載Zip檔案以載入未封裝方式(註1)去擴充。
2. 安裝後的小截圖：
   
3. My GitHub:Online-Liu-XMa

結論

既然有行易提供的線上嘸蝦米查碼程式，那為什麼要再弄個Chrom Extensions呢？最主要是自己每次查碼時，都要先到行易的網站再去查詢，如果~能直接在Browser上就能搞定，是不是就省去開Tab，和找行易網站時間了！其次，也是寫寫看Chrome Extensions的小小小工具來自爽一下:D。

後記

原本，想把它放在Google 瀏覽器擴充功能，後來~發現要收5塊美金的費用，才會打消這念頭的。

---

備註

1. 先下載Zip檔案並解壓縮，然後~按下Chrome的扳手圖示->工具->擴充功能->載入未封裝的擴充功能，選擇剛解壓縮後的資料夾，就能載入Extensions。