图标弹窗(popup)
注册:
在清单文件的浏览器行为(browser_action),添加默认弹窗(default_popup)
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
编写
编写popup.html,就可以在弹窗的展示出来。
比如下面的HelloWorld入门程序
- 清单
{
"name": "HelloWorld",
"version": "1.0.0",
"manifest_version": 2,
"description": "This a extension with a UI of HelloWorld",
"icons":
{
"128": "image/image128.png",
"48": "image/image48.png",
"16": "image/image16.png"
},
"browser_action":
{
"default_icon": "image/image16.png",
"default_popup": "popup.html"
}
}
- popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script src="jquery-3.5.1.min.js">
</script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="greet">Hello World!</h1>
<input type="text" id="name">
</body>
</html>
- popup.js
$(function (){
$('#name').keyup(function (