Chrome扩展程序 - 附加代码的事件监听器

Question

我正在编写一个chrome扩展,我试图在现有页面上创建一个GUI.该GUI由输入文本字段和回复按钮组成.我通过创建HTML字符串并将其附加到网站来创建GUI.

我想添加一个事件监听器,以便在按下回复按钮时,它将触发一个函数,这样我就可以将输入文本字段中的数据发送到我的服务器.根据我的理解,一旦代码被附加到页面,它就不再能访问script.js,因此它无法访问事件监听器.还有其他选择吗？

我的GUI图片:http://www.filedump.net/index.php？ pic = eventlistenermoot1328028688.jpg

Answer 1

您注入代码的页面是从内容脚本中沙箱化的.但是,您的内容脚本可以完全访问页面DOM,包括事件.这意味着您可以向附加的元素添加事件侦听器.您必须不显眼地添加它们,以便内容脚本可以向后台页面发送消息:

内容脚本:

var html = document.createElement('div');
    html.innerHTML = '<input id="clickMe" type="button" value="Click Me" />';
document.body.appendChild(html);

document.getElementById('clickMe').addEventListener('click', function() {
    // do stuff
});