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