Wie füge ich eine Schaltfläche zu jedem Knoten mit der gleichen Klasse hinzu

Question

Ich versuche, eine Google Chrome-Erweiterung, die eine Schaltfläche neben jedem Kommentar, der etwas bestimmtes tut, bietet. Kommentare haben keine HTML-ID, also habe ich das in meiner Inhaltsskriptdatei gemacht.

var cFooter = document.getElementsByClassName("comment-renderer-footer"); 
var btn = document.createElement("button");   
var txt = document.createTextNode("does something");  
btn.appendChild(txt); 


for(var i = 0 ; i<cFooter.length ; i++){ 
    cFooter.item(i).appendChild(btn); 
} 

btn.addEventListener("click", function(){ alert("You Clicked!")}); 

Dieser Code sollte eine Liste aller Kommentare erstellen und dann eine Schaltfläche zu jedem von ihnen hinzufügen, aber es funktioniert nicht.

(cFooter steht für Kommentare Footer, ich die Taste wollen die Abneigung Schaltfläche neben sein.)

Manifest-Datei:

"name": "Youtube Comments ", 
"description": "Youtube Comments, 
"version": "1.0", 

"manifest_version": 2, 

"browser_action":{ 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "background": { 
    "scripts": ["background.js"], 
    "persistent": false 
    }, 

    "icons" : { 
    "64" : "icon.png" 
    }, 

    "permissions": ["activeTab"], 

    "content_scripts": [ 
    { 
    "matches": ["https://www.youtube.com/*"], 
    "js": ["myScript.js"] 
    } 
    ] 
} 

Answer 1

Die letzte Taste sollte nun bereits arbeiten (wenn Sie würde sich ändern cFooter.item(i) bis cFooter[i]). Hier ist, wie alle von ihnen arbeiten, indem Sie den Click-Handler für jede Taste zuweisen, nicht nur die letzten von ihnen:

var cFooter = document.getElementsByClassName("comment-renderer-footer"); 
for(var i = 0 ; i<cFooter.length ; i++){ 
    var btn = document.createElement("button");   
    var txt = document.createTextNode("does something");  
    btn.appendChild(txt); 
    cFooter[i].appendChild(btn); 
    btn.addEventListener("click", function(){ alert("You Clicked!")}); 
}