popup页面,每一次都会重新创建。
页面只有创建后,才能够响应键盘消息。
如果你是为了响应快捷键,然后执行某一个操作,那么可以在manifest.json文件中,定义快捷键,比如
"commands": {
"open-baidu": {
"suggested_key": {"default": "Alt+B" },
"description": "open baidu"
}
}
然后在background页面中响应快捷键:
chrome.commands.onCommand.addListener(function(command){
if(command === "open-baidu")
{
// TODO:
}
})
JavaScript 弹窗共有三种
1、window.alert("sometext")
2、window.confirm("sometext")
3、window.prompt("sometext","defaultvalue")
但是这3种方法都不能做一个大小固定的小窗口,要做大小固定的弹窗,需要我们自己在HTML文档中编写:
HTML:
.btn:点击button后弹窗出现
.close:点击X后弹窗消失
.con:是弹窗内容区
.bk:屏蔽页面其他内容,弹窗出现时,弹窗的z-index最大,其他内容不能进行操作
CSS:
JQ:
页面展现效果:
1、点击按钮
2、出现一个自己控制的500*200的弹框,同时浏览区背景为灰色
3、点击红色区域右上角X号,弹窗会消失
方法如下:
1、创建一个单独的文件夹,比如说为百度贴吧开发一个插件,就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件,在里面写上如下的样子。
{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"},
"permissions": [http://*/*]
}
2、现在需要找一个图标,放在这个目录下,名字叫icon.png,当然,这个名字只要和上面的配置文件里default_icon的属性一致就好。
3、现在只要点击Chrome工具条的菜单按钮选择里面的工具(Tools)>>扩展(Extensions)就好。菜单按钮如右图。
4、选择开发者模式,选择加载未打包的插件,然后,选择第一步中的那个文件夹即可。
5、在地址栏的右侧出现了图标,但是点击图标却什么也没做,因为我们还什么代码没有写。现在在那个目录下,建立一个html文件,并且名字为popup.html,同时在配置文件里“browser_action”下加上一条:"popup": "popup.html"。
示范:
{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png","popup": "popup.html"},
"permissions": [http://*/*]
}
此处注意,每一对大括号里的最后一项后面都没有逗号,其余的每项之间必须用逗号间隔!哪怕是browser_action这样复合的项目,在他的大括号后也要有逗号。
6、在Popup.html里写上一些html代码,比如简单的输出HelloWorld也好,这个Popup.html和普通的html文件按没有任何差别。
7、这就是基本的插件制作方法。