Chrome Extension 架構
1.Manifest - 安裝檔
2.HTML / CSS - UI介面
3.JavaScript - 套件腳本
4.其他檔案 - Images、Font Family......
基本上就是一個 Web pages app
HTML / CSS
點選網址列旁的圖像檔後出現的介面，作用跟普通 Web App 一樣
我要做一個可以搜尋N網漫畫的工具，所以只需要一個輸入框跟一個提交按鈕，而我今天用 Bootstrap 這個框架來進行製作
在 Extension 資料夾新增一個 manifest.json 內與 default_popup: 相同名稱的 HTML 檔，
所以我新增了一個名為 popup 的 HTML 檔，當作初始頁
操作介面
接著用迴圈產生剩下的 HTML 原件
目前介面
到這邊介面也做的差不多了，但是 Extension 因為指令集的影響看起來有點長，所以再匯入一個 CSS 檔，來固定寬度以及把指令集改為可滾動的區域，並且把滾動條給取消掉
匯入 CSS 檔
修改介面樣式
overflow 的基本用法
auto - 預設會自動使用滾動條，所以要先固定高度，我固定為 149 px
scroll - 自動產生滾動條
inherit - 繼承自父元素的可見性
visible - 顯示的文字或圖片會直接超出範圍，不使用滾動條
hidden - 自動隱藏超出的文字或圖片
最終成果
達人
