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