Event löst keine Inhaltsscripts aus Chrome-Erweiterung

Question

Ich baue eine content scripts Chrome-Erweiterung. Ich habe eine Schaltfläche dynamisch zu einer Webseite hinzugefügt, der Ereignis-Listener auf dieser Schaltfläche wird jedoch nicht ausgelöst.

ist hier manifest.json:

{ 
    "manifest_version": 2, 
    "name": "my extension", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "activeTab" 
    ], 
    "content_scripts": [ 
     { 
     "matches": ["http://127.0.0.1:8000/*"], 
     "js": ["jquery.js", "script.js"], 
     "run_at": "document_end" 
     } 
    ] 
} 

Dies ist script.js:

document.body.style.backgroundColor = "yellow"; 
var button = $('<input id="btn" type="button"/>'); 
$("body").append(button); 

$("#btn").on("click", function(){ 
    document.body.style.backgroundColor = "red"; 
}); 

Die Schaltfläche auf die Seite und Hintergrund auf gelb hinzugefügt wird, aber es ändert sich nicht auf rot, wenn Klicken auf die Taste .

Answer 1

Diese eindeutige ID kann Ihnen helfen;)

document.body.style.backgroundColor = "yellow"; 
uniqueId = 'btn' + Date.now(); 
var button = $('<input id="' + uniqueId + '" type="button"/>'); 
$("body").append(button); 

$("#" + uniqueId).on("click", function(){ 
    document.body.style.backgroundColor = "red"; 
}); 

Answer 2

Wenn der Verdacht Problem mit der Taste ID ist - beachten Sie, dass Sie dies nicht tun brauchen die überhaupt ID.

document.body.style.backgroundColor = "yellow"; 
var button = $('<input id="btn" type="button"/>'); 
$("body").append(button); 

button.on("click", function(){ // Notice you don't need to search for it again! 
    document.body.style.backgroundColor = "red"; 
}); 

jedoch in diesem Fall werden Sie die button Variable halten müssen, um es wieder zu finden.