好用工具備份文章

先備份起來，之後可以使用

• Markdown

更新中…

Google Chrome Extension Study

在2012年參加Yahoo! OpenHack的時候，就有看到許多大神們，使用Chrome Extension實作出讓人驚豔的作品，實在太厲害了 m( _  _ )m
( p.s. 我們的作品叫“Guess What？” ，感謝一下當時的夥伴 +Caesar Chi +Simon Su ，我才有機會參加這種大型的Hackathon)
不知道何時才可以看到各位大神們的車尾燈(遠目~)

目標

---

這次主要的需求是希望能夠在Extension外掛裡，勾選各處室的E-mail後可自動填入Google mail郵件的寄件者欄位或是副本欄位中，若在Google document中，則在分享給使用者的欄位自動填入Mail list。 Mail資料的來源則是從AD server撈出來經過RESTful server處理過後，才會吐到extension呈現出樹狀結構組織讓使用者進行勾選的動作。

實作過程

---

相關程式碼在我的Github上：Chrome-Extension-Tree-Case

在此說明我的製作流程，可搭配Github上的程式碼相互對照，就不貼上程式內容。
製作流程為，先設定好manifest裡必需的內容(官方文件)，因需求中需要二個功能：

• 新開tab讓使用者做登入的動作
• 在點選GDOC和Gmail頁面時，可以讓資料自動輸入至欄位中

因此在permissions設定新增了tab和google會使用到的網域，content_scripts設定新增了matches:['<all_urls>']與和網頁溝通的contentScript.js。

新增了這二個設定後，我就可以在popup.html裡得知目前的使用者是否有登入，若沒有登入則新開登入頁面的tab，讓使用者登入。

登入後透過dynatree這個套件，將從後端得到的JSON資料自動展開成樹狀組織呈現在popup.html頁面上，並且將勾選的email資料，傳送到contentScript.js與當前網頁產生互動的行為。這個流程中，還穿插了chrome.extension.onMessage.addListener和chrome.tabs.sendMessage這二個API的使用。

在popup.js裡，只要當組織樹被click選取的時候，即觸發sendMessage，將勾選的資料推播至content_scripts，contentScript.js裡面新增一個監聽的Event，接收傳送過來的資料，並偵測使用者在DOM上的動作，只要引發click事件，且是TEXTAREA輸入欄位的話，即將Email資料填入欄位中。

其中要克服的話，Google mail或是document可以輸入的欄位很多，我怎麼知道是哪一個呢？！沒錯，我是不知道，但我知道它的寄件者欄位和副本，還有密件副本的欄位一定是TEXTAREA，所以我使用document.addEventListener的方法來得知目前使用者click的tag是什麼，若是TEXTAREA則自動填入mail。詳細程式可參考：popup.js

這是目前和同事們討論出來可以解決的方案，各位看倌若有更好的方式可以正確得知的話，歡迎提出來一起討論！

另一個重點項目是Google document的分享功能，它是用iframe的方式呈現，因此我用廻圈的方式，取出當前的iframe的名稱share-client-content-iframe，並且透過contentWindow.addEventListener的方法正確監聽到使用者在iframe裡的動作，進而將值填入正確欄位中。詳細程式可參考：contentScript.js

遇到的問題

---

• 與傳輸資料的Server-side溝通的話，需到manifest.json將網域加入permissions的設定中，manifest.json可設定信認的網域。
• 一開始遇到比較大的問題是Cross-Origin XMLHttpRequest的問題，可參考其他大大提供的解決方案。

使用的套件

---

Dynatree

相關API使用

不可選擇unselectable: true
Hide checkboxhideCheckbox: true
預設勾選取select: true
子項目預設展開expand: true
選擇預設停留位置activate: true
圖示為FolderisFolder: true
Mouse over提示tooltip : "content"



參考文件

---

• http://pydoing.blogspot.tw/2011/12/javascript-element-iframe.html
• http://expressjs.com/api.html#res.json
• http://wwwendt.de/tech/dynatree/doc/samples.html
• http://open.chrome.360.cn/extension_dev/extension.html#method-getBackgroundPage
• http://open.chrome.360.cn/html/dev_browserAction.html#method-setTitle
• http://www.slideshare.net/lis186/20100915-google-chrome-extension
• http://tonytonyjan.net/2012/05/25/get-start-with-chrome-extension/
• http://ithelp.ithome.com.tw/question/10133537
• http://stackoverflow.com/questions/10710674/html5-localstorage-clear-all-data
• http://technotab.com/10-best-free-ebooks-every-developer-should-have/
• http://stackoverflow.com/questions/15601302/chrome-ext-how-can-i-pass-parameter-value-from-popup-js-background-js-to-conten
• http://korprulu.blogspot.tw/2012/12/chrome-extension.html

JavaScript新增DOM Element

今天想利用Chrome Extension在Gmail輸入mail的欄位旁邊加上一個Button，可以讓使用者做些好玩的事。

可以利用下面程式碼達成這目標：

document.addEventListener('click', function(e){
  var xx = e.pageX, // 取得滑鼠X位置
      yy = e.pageY; // 取得滑鼠Y位置
  var node = document.createElement("div");
      node.style.position = "absolute";
      node.style.top = yy + "px";
      node.style.left = xx + "px";
      node.style.width = "50px";
      node.style.height = "50px";
      node.style.backgroundColor = "red";
  document.body.appendChild(node);
})

但是…

在實作方面還有z-index的問題需要解決，有時候會讓插入的button顯示在下一層？

還有如何讓button消失？什麼時候消失？這部份的問題也要考慮。

如果要刪除剛剛新增的DOM Element的話，可以利用下方程式：

var nodes =  document.getElementsByTagName('div'); //傳回DIV element的array   
//remove last div
if(nodes && nodes.length > 0){
    document.body.removeChild(nodes[nodes.length-1]); //刪除最後面的DIV
}

404！美麗的錯誤

網站出現錯誤機會總是難免的，如何讓自己在失誤時，又可讓使用者不這麼生氣，反而會心一笑，我想這是前端必需學習的功課。

以下收集了許多有關前輩們對於發生404錯誤的處理畫面，每一個作品都是值得學習的對象。

加油，繼續努力~

晚點再來整理一下 :D

參考來源

---

http://ldope.com/news/design/404-not-found-error_web-page/

http://blog.eztable.com.tw/2012/05/17/set-up-an-interesting-404-not-found-page_1/

http://404notfound.fr/

Nginx取得url的parameter

對於Nginx沒有很了解，但即然有這方面的需求，就來問一下G神吧。

尋找了一下，得到的結論是：

• 可以取得url的parameter
• 可以取得header
• 可以重設header？(待確認)

如果版友有更詳細的解說歡迎回覆，感謝！

參考來源

---

http://e-mats.org/2011/07/nginx-and-rewriting-based-on-get-parameter-url-parametersarguments/

Https憑證 Mac v.s. Windows

今天測試程式時，同事發現，在相同https的網域情況下，

這個網址在Mac上看到的是「未受信任」出現紅色的畫面，在Windows上看到的，則是「受信認」正常顯示畫面，出現綠色的https。

為什麼會這樣呢？

於是同事在G大神中發現一位大大的Blog寫著：

Mac OS X 擁有的根憑證比 Windows 少很多，如果網站使用較不熱門的憑證中心所發行的根憑證時就會導致根憑證驗證失敗

原來如此！感謝這位大大的分享。

參考來源

---

Kelp Code