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
});