彈出式頁面 (popup.html) 顧名思義就是彈出一個頁面，其實它就是一般的網頁，只是固定顯示在某個位置 (瀏覽器右上角 or 網址列右側)。接下來就讓我們來練習一個簡單的 popup page。
Popup page 練習
如何建立一個 Extension 請參考 Chrome Extension 入門 - 一小時 Chrome Extension 就上手 。
P.S. 下列程式碼都在範例專案檔內: Popup page
P.S. 下列程式碼都在範例專案檔內: Popup page
step 1. 設定
在設定檔 (manifest.json) 裡的 "default_popup" 設定預設彈出式頁面為 popup.html。
在設定檔 (manifest.json) 裡的 "default_popup" 設定預設彈出式頁面為 popup.html。
{
"name" : "Popup page",
...
"browser_action" :
{
...
"default_popup" : "popup.html"
},
...
}
step 2. 建立 popup.html
popup.html 就跟一般網頁一樣。
popup.html 就跟一般網頁一樣。
<html>
<head>
<meta charset="utf-8">
<title>Popup page</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h2>Popup page</h2>
<p>You can show some info in this.</p>
</body>
</html>
總結：
只要兩個步驟，就完成簡易的 Popup page 了。那 Popup page 可以做什麼呢？ 就讓你發揮創意想一想。
如果你在練習上或其他有關於 Popup page 的問題，歡迎在下面留言。
如果你在練習上或其他有關於 Popup page 的問題，歡迎在下面留言。
沒有留言:
張貼留言