Hi Dai Gei Ho~ 我是Winnie ~

在此篇文章中，我們要來介紹 Extension 的擴充頁面 - Option Page 。

什麼是 Option Page ?

Option Page 為 Extension 的擴充選項頁，透過功能選項的提供，讓使用者可以依個人需求來自訂義自己的Extension。

是不是有點抽象，那讓我們以 換匯查詢 功能為例 :

從上圖中，我們可以看到在上方Action 的 Popup視窗中，提供美金、日幣的匯率換算查詢功能，只要輸入對應金額，就可以依照匯率顯示相關金額。

那如果想增加其他幣別選項呢？

登愣，此時就可以透過 Option Page 來擴充增加其他幣別需求。

定義 Option Page

定義方式也與其他Context一樣，需在Manifest 中定義 檔案路徑，與網頁一樣，主要是由 HTML、CSS、JavaScript組成的，執行於Extension環境中。

其中比較特別的是，在宣告方法中，官方文件提供了兩種形式可以進行宣告，分別是 獨立頁面 和 嵌入頁面 :

獨立頁面

獨立頁面 就跟網頁一樣，有屬於自己的網址，定義方式可以透過options_page指定相關HTML檔案路徑

{
  "name": "IT_HELP Option",
  "options_page": "/option/option.html",
  //略
}

接著就可以透過開啟Action選單中的選項進到頁面中。

此時就會看到自訂義的 Option Page

嵌入選項頁

嵌入選項頁允許使用者在Extension管理頁中嵌入lightBox，而無需透過另開頁面才能使用，而打開選項的方法 同樣也是透過點擊Action選單中的選項來開啟。

如要要定義嵌入式選項頁，可以在options_ui的page定義 HTML 文件，並將open_in_tab設置為 false 即可使用。

{
  "name": "IT_HELP Option",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

而文章到這邊，不知道大家有沒有發現不管是那種方式打開 Option Page，他們的網址都為chrome-extension://開頭，

這是為什麼呢？

因為 Option Page 運行環境為 Extension 端，所以這也就是表示，在Option Page 中我們也可以使用Chrome.runtime 提供的各種方法 來 與其它 Context (如:Content Scirpt、Popup等...)進行溝通，相互傳遞資料。

以剛剛的 新增幣值 為範例:

關於 Storage 的用法後續我們會在其他文章中介紹

當透過 Option page 新增幣別的同時，我們可以透過Storage的方法來存目前新增的資料，接著在 Popup 中取得儲存於Storage的所有幣別資訊 進行資料渲染，即可達到兩方資料同步的結果(示意如下)。

以上就是關於 Option Page的介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日有感而發:

今天什麼事也沒發生，
一整天的聽了 房東的貓
嘗試了沒寫過的程式

然後就今天就度過了...

所以 又是分享 房東的貓 -> 時光，一如既往