初探 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
按鈕,可以發現兩個頁面的資料可以互相溝通,並持久化儲存了 🎉