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