## popup
popup是點(diǎn)擊`browser_action`或者`page_action`圖標(biāo)時(shí)打開的一個(gè)小窗口網(wǎng)頁(yè),焦點(diǎn)離開網(wǎng)頁(yè)就立即關(guān)閉,一般用來(lái)做一些臨時(shí)性的交互。
popup可以包含任意你想要的HTML內(nèi)容,并且會(huì)自適應(yīng)大小??梢酝ㄟ^(guò)`default_popup`字段來(lái)指定popup頁(yè)面,也可以調(diào)用`setPopup()`方法。
```
{
"browser_action": {
"default_icon": "images/icon19.png", // 圖標(biāo)
"default_title": "Google Mail", // tooltip提示
"default_popup": "popup.html" // 點(diǎn)擊圖標(biāo)后展示的氣泡框頁(yè)面(獨(dú)立頁(yè)面,可加載js / css)
}
}
```
default_icon也可以這樣:
```
"default_icon": {
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
```
**1. 哈哈大笑**
(實(shí)例:`popup`):
```
// manifest.json
{
"browser_action": {
"default_title": "TG",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
// popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img style="width: 100px;" src="laugh.jpg" alt="">
</body>
</html>
```
安裝完成后,在瀏覽器右上角可以看到圖標(biāo):

注:popup中可以直接通過(guò)`chrome.extension.getBackgroundPage()`獲取background的window對(duì)象。
**何時(shí)使用**
僅針對(duì)popup頁(yè)面內(nèi)起作用的、比較小的(這樣每次重新載入不會(huì)太久)腳本
更多關(guān)于popup:《改變?yōu)g覽器的UI界面 -> [Browser Actions](BrowserActions.md) | [Page Actions](PageActions.md)》
- 前言
- 致讀者
- 第一章 什么是Chrome擴(kuò)展
- 第二章 manifest.json
- 常用配置
- background
- content-scripts
- popup
- web_accessible_resources
- devtools_page
- Command Line API
- homepage_url
- permissions
- 第三章 5種類型的Javascript
- 權(quán)限對(duì)比
- 消息傳遞
- 短連接
- 長(zhǎng)連接
- 調(diào)試方式
- 第四章 瀏覽器的UI界面
- Browser Actions
- Page Actions
- 右鍵菜單
- 桌面通知
- Omnibox
- 選項(xiàng)頁(yè)
- 覆蓋特定頁(yè)
- 第五章 Chrome應(yīng)用開發(fā)
- 擴(kuò)展與應(yīng)用的異同
- 一個(gè)簡(jiǎn)單的Chrome應(yīng)用
- 應(yīng)用窗口
- 應(yīng)用窗口
- 美化窗口
- 窗口事件
- webview
- 應(yīng)用相關(guān)API
- 第六章 打包與發(fā)布擴(kuò)展應(yīng)用
- 第七章 常用API
- 右鍵菜單(contextMenus)
- 鍵盤快捷鍵(commands)
- cookies ?
- 事件(events)
- Extension ?
- 瀏覽器歷史記錄(history) ?
- 消息通知(notifications)
- 擴(kuò)展管理(management) ?
- 本地存儲(chǔ)(storage)
- 標(biāo)簽頁(yè)(tabs) ?
- 書簽(bookmarks) ?
- Runtime
- 窗口(windows) ?
- 第八章 擴(kuò)展
- 主題
- 國(guó)際化 (i18n)
- 已安裝的擴(kuò)展
- 附錄A 參考資料