## popup
popup是点击`browser_action`或者`page_action`图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。
popup可以包含任意你想要的HTML内容,并且会自适应大小。可以通过`default_popup`字段来指定popup页面,也可以调用`setPopup()`方法。
```
{
"browser_action": {
"default_icon": "images/icon19.png", // 图标
"default_title": "Google Mail", // tooltip提示
"default_popup": "popup.html" // 点击图标后展示的气泡框页面(独立页面,可加载js / css)
}
}
```
default_icon也可以这样:
```
"default_icon": {
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
```
**1. 哈哈大笑**
(实例:`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>
```
安装完成后,在浏览器右上角可以看到图标:
![](https://box.kancloud.cn/b6f24dd3acd33d8feded494be0940247_183x161.png)
注:popup中可以直接通过`chrome.extension.getBackgroundPage()`获取background的window对象。
**何时使用**
仅针对popup页面内起作用的、比较小的(这样每次重新载入不会太久)脚本
更多关于popup:《改变浏览器的UI界面 -> [Browser Actions](BrowserActions.md) | [Page Actions](PageActions.md)》
- 前言
- 致读者
- 第一章 什么是Chrome扩展
- 第二章 manifest.json
- 常用配置
- background
- content-scripts
- popup
- web_accessible_resources
- devtools_page
- Command Line API
- homepage_url
- permissions
- 第三章 5种类型的Javascript
- 权限对比
- 消息传递
- 短连接
- 长连接
- 调试方式
- 第四章 浏览器的UI界面
- Browser Actions
- Page Actions
- 右键菜单
- 桌面通知
- Omnibox
- 选项页
- 覆盖特定页
- 第五章 Chrome应用开发
- 扩展与应用的异同
- 一个简单的Chrome应用
- 应用窗口
- 应用窗口
- 美化窗口
- 窗口事件
- webview
- 应用相关API
- 第六章 打包与发布扩展应用
- 第七章 常用API
- 右键菜单(contextMenus)
- 键盘快捷键(commands)
- cookies ✫
- 事件(events)
- Extension ✫
- 浏览器历史记录(history) ✫
- 消息通知(notifications)
- 扩展管理(management) ✫
- 本地存储(storage)
- 标签页(tabs) ✫
- 书签(bookmarks) ✫
- Runtime
- 窗口(windows) ✫
- 第八章 扩展
- 主题
- 国际化 (i18n)
- 已安装的扩展
- 附录A 参考资料