Question

我正在尝试制作一个Google Chrome扩展程序，它会在每个评论旁边提供一个按钮，用于执行特定操作。评论没有html id，所以我在我的内容脚本文件中这样做了。

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

此代码应列出所有注释，然后为每个注释添加一个按钮，但它不起作用。

（cFooter代表评论页脚，我希望按钮位于不喜欢按钮旁边。）

清单文件：

"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

最后一个按钮现在应该可以使用（如果您要将cFooter.item(i)更改为cFooter[i]）。通过将点击处理程序分配给每个按钮，而不仅仅是最后一个按钮，以下是所有这些按钮的工作原理：

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

如何向具有相同类的每个节点添加按钮

1 个答案: