( 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頁面時，可以讓資料自動輸入至欄位中
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: trueHide checkbox
hideCheckbox: true預設勾選取
select: true子項目預設展開
expand: true選擇預設停留位置
activate: true圖示為Folder
isFolder: trueMouse 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
沒有留言:
張貼留言