[好讀版]

彈出頁面是由 browserAction 或 pageAction 點擊按鈕後所開啟的一個小視窗，這個頁面與一般網頁相同，只是多了一些 Chrome 提供的 API。

那接下來將以 browserAction 來說明彈出頁面。(範例專案)

加入彈出頁面的方法

Step 1. 在設定檔裡定義彈出頁面

manifest.json

{
...
"browser_action" :
{
"default_icon" : {
"19" : "popup_128.png",
"38" : "popup_128.png"
},
"default_title" : "Popup page",
"default_popup" : "popup.html"
},
...
}

這邊提醒一下，我偷懶地把所有 size 的圖片都設定為 popup_128.png，雖然還是能正常顯示，不過建議各位還是準備對應的大小比較好。

Step 2. 建立彈出頁面

popup.html

<meta charset="utf-8">
<title>Popup page</title>
<link rel="stylesheet" href="popup.css">


<h2>Popup page</h2>
<p>你可以在這裡放一些資訊。</p>

溫馨小提醒：如果要載入 css 或 javascript 的話，不建議外連檔案，請直接下載並包在專案裡。

Step 3. 加入後，點擊 Chrome Browser 右上方的 browserAction 按鈕就會出現彈出頁面

什麼時候需要彈出頁面？

我個人的習慣是，當 Extension 所要顯示的資訊與當前網頁內容沒有關係時，就用彈出頁面來顯示，例如今天是做一個顯示天氣的 Extension，那麼就該把資訊放在彈出頁面。舉另一個例子，像是 Google Calendar，它也是與網頁內容無關，所以彈出頁面通常是為了增強 Chrome Browser 的功能時才會用到。