iT邦幫忙

DAY 6
0

Chrome Extension 學習筆記系列 第 6

Chrome Extension 開發入門篇 06 - Chrome Extension 彈出頁面

[好讀版]

彈出頁面是由 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 的功能時才會用到。


上一篇
Chrome Extension 開發入門篇 05 - Chrome Extension 設定檔
下一篇
Chrome Extension 開發入門篇 07 - Chrome Extension 選項頁面
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言