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

Question

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

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

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

Answer 1

您正在向其中注入(inject)代码的页面是从内容脚本沙箱化而来的。但是，您的内容脚本可以完全访问页面 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
});