初探 Chrome Extension
用 Chrome Extension 寫一個幹話產生器
由於參加了六角學院的 JS地下城，花了兩天研究了一下 Chrome Extension並完成了一個小作品。這篇文章記錄了解題的歷程與想法，希望對初學者有一點點幫助 😊
什麼是 Chrome Extension
常用 Chrome 的人應該都聽過 AdBlock，這個用來擋廣告的好用插件。此外，有看大陸節目的朋友或許也用過 Unblock Youku，這個插件可以解除一些限定內地觀看的網路節目。
簡而言之，Chrome Extension 就是使用網頁的技術 ( HTML / CSS / JS) 以及Chrome 提供的 API 寫出的小程式，可以用來增加瀏覽器的客製化功能。
架構簡介
關於 Chrome Extension 的架構，我覺得這一篇寫得很好，這裡就只稍微帶過：
manifest.json: 最重要的檔案，用來描述整個 extension 的架構及資源。- Background Pages: 常駐在背景，可能是一個 HTML 或者 javascript 檔。
- UI Pages: 可以跟使用者互動的介面，例如
popup.html或是等下要使用的 Override Pages。
題目分析
先來看一下這次題目的要求:
1.請開發 Chrome extension，不需上架，投稿時請提供安裝檔放在雲端，以供 GM 下載測試。什麼？你說你想上架？嘛.. 人生想要什麼都嘗試，也是可以的啦。
2. 打開 Chrome 新頁(tab)時，會隨機顯示你自己新增的語錄，或者是幹話。
3.可切換夜間/日間模式
4. 新增語錄時，有兩種方式新增，一種是在頁面裡新增，另一種是點選瀏覽器右上角 icon 來新增
5. 背景插圖固定即可，目前的圖片只提供兩張，設計師本來很殘忍地說：「要不要也讓語錄也能新增客製化背景圖片？」，校長想了想，還是決定固定就好，不要太殘忍，當然你想試試看，校長也是不反對啦。
看完之後，我思考了一下並列出了下列要克服的問題:
- 怎麼產生插件?
- 怎麼產生popup 頁面?
- 怎麼修改 Chrome 打開新頁 (newtab) 的頁面?
- 怎麼讓 popup 頁面與修改過的 newtab 頁面溝通 ? 並持久化儲存 data ?
以下就一一解說這些問題。
🍣 怎麼產生插件?
首先創建一個資料夾，然後產生一個空文件 manifest.json ，並填入下列的內容:
這裡除了 manifest_version 之外，其他都可以自由替換。注意 icons/* 的圖檔要另外創建。
然後在 chrome://extensions 頁面點擊 “載入未封裝項目” 按鈕，匯入剛剛創建的資料夾，順利的話就可以看到類似下面的畫面:
🍣 怎麼產生 popup 頁面?
到目前為止，已經正確匯入插件了，接下來要讓右上角的 icon 可以點擊並跳出 popup 介面。
在 manifest.json裡，可以藉由定義 Page Actions 或 Browser Actions 來決定何時可以點擊右上角的 icon。差別在於，Browser Actions 是讓 icon 在所有網頁都可以點擊，而Page Actions 則是可以限定在特定頁面下才允許點擊 icon。
這邊題目沒有要求，我希望最終的作品在所有頁面下都可以點擊，所以決定用 Browser Actions 。
修改 manifest.json 如下:
然後創建一個 popup.html :
重新匯入修改後的插件。順利的話，應該可以點擊右上角的 icon，並看到網頁的內容:
🍣 怎麼修改 Chrome 打開新頁 (newtab) 的頁面?
在 manifest.json 裡有一個 chrome_url_overrides 參數可以修改 newtab, bookmarks 等預設介面，正好符合題目的需求。至於詳細參數可以看這裡。
修改 manifest.json 如下:
然後創建一個 newtab.html :
重新匯入插件後，點擊新頁面就可以看到修改後的畫面:
🍣 怎麼讓 popup 頁面與修改過的 newtab 頁面溝通 ? 並持久化儲存 data ?
這邊是我認為專案裡最有挑戰性的地方。關於持久化儲存，Chrome 有提供一個叫 chrome.storage 的 API。
可持久化儲存的概念跟 html5 的 localStorage 很像，但除此之外還有些有趣的功能:
- 不需要轉成字串，可以儲存物件
- 具有監聽儲存變化的事件
有這兩個方便的功能，就可以在 popup 與 newtab 頁面監聽 chrome.storage 來達到同步與溝通的效果。
chrome.storage 底下還有分 sync / local / managed 三種可以選擇，這邊就不贅述各別的特性，詳細可以參考官方文件。
使用 chrome.storage 需要明確指定權限，因此修改 manifest.json 如下:
然後新增一個 storage.js :
並在 popup.html 及 newtab.html 的 <body> 裡補上相同的內容:
重新匯入插件後，嘗試點擊 popup 頁面與 newtab 頁面的 Add按鈕，可以發現兩個頁面的資料可以互相溝通，並持久化儲存了 🎉
