popup · Chrome擴展及應用開發實戰

## 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)》