Chrome 扩展中,怎么访问popup.html 里面的button?

html-css014

Chrome 扩展中,怎么访问popup.html 里面的button?,第1张

不可以的。

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、这就是基本的插件制作方法。