彈出頁面是由 browserAction 或 pageAction 點擊按鈕後所開啟的一個小視窗，這個頁面與一般網頁相同，只是多了一些 Chrome 提供的 API。
那接下來將以 browserAction 來說明彈出頁面。(範例專案)
加入彈出頁面的方法
Step 1. 在設定檔裡定義彈出頁面
{
...
"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. 建立彈出頁面
<html>
<head>
<meta charset="utf-8">
<title>Popup page</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h2>Popup page</h2>
<p>你可以在這裡放一些資訊。</p>
</body>
</html>
溫馨小提醒：如果要載入 css 或 javascript 的話，不建議外連檔案，請直接下載並包在專案裡。
Step 3. 加入後，點擊 Chrome Browser 右上方的 browserAction 按鈕就會出現彈出頁面
什麼時候需要彈出頁面？
我個人的習慣是，當 Extension 所要顯示的資訊與當前網頁內容沒有關係時，就用彈出頁面來顯示，例如今天是做一個顯示天氣的 Extension，那麼就該把資訊放在彈出頁面。舉另一個例子，像是 Google Calendar，它也是與網頁內容無關，所以彈出頁面通常是為了增強 Chrome Browser 的功能時才會用到。
結語：
看完這篇，是不是覺得彈出頁面很簡單。如果您有問題，歡迎在下方留言。謝謝！
沒有留言:
張貼留言