监听 Chrome 扩展中的按钮点击

Question

facebook like 按钮的 html 如下：

\n

<div aria-label="J\xe2\x80\x99aime" class="oajrlxb2 bp9cbjyn g5ia77u1 mtkw9kbi tlpljxtp qensuy8j ppp5ayq2 \ngoun2846 ccm00jje s44p3ltw mk2mc5f4 rt8b4zig n8ej3o3l agehan2d sk4xxmp2 rq0escxv nhd2j8a9 j83agx80 \nmg4g778l btwxx1t3 pfnyh3mw p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x tgvbjcpo hpfvmrgz jb3vyjys \nrz4wbd8a qt6c0cv9 a8nywdso l9j0dhe7 i1ao9s8h esuyzwwr f1sip0of du4w35lb lzcic4wl abiwlrkh p8dawk7l \nbuofh1pr taijpn5t" role="button" tabindex="0">\n

\n

我将以下内容放入 content.js 中，即 content_script ：

\n

document.getElementsByClassName("oajrlxb2").addEventListener("click",\n  function(){ alert("Hello World!"); }\n);\n

\n

我希望当点击“喜欢”按钮时它会用“Hello World”提醒我，但事实并非如此。怎么会？

\n

我也收到此错误：

\n

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function\n

\n

但我看到它被用于其他解决方案？

\n

编辑：\n我将 content.js 更改为：

\n

var likeButtonList = document.getElementsByClassName("oajrlxb2");\n\nfor (i = 0; i < likeButtonList.length; i++) {\n  likeButtonList[i].addEventListener("click",\n    function(){ alert("Hello World!"); }\n  );\n}\n

\n

我试图同时收听每个按钮，但这仍然不起作用？

\n

EDIT2:\n页面未正确加载。通过在 content.js 中执行以下操作已修复此问题：

\n

var likeButtonList;\n\nfunction getLikeButtons(){\n  likeButtonList = document.getElementsByClassName("oajrlxb2");\n\n  for (i = 0; i < likeButtonList.length; i++) {\n    likeButtonList[i].addEventListener("click",\n      function(){ alert("Hello World!"); }\n    );\n  }\n}\n\nsetInterval(getLikeButtons, 1111);\n

\n

Answer 1

document.getElementsByClassName("oajrlxb2")

这将返回一个集合，而不是可以附加事件的元素（因为许多元素可以具有相同的类）。您必须使用索引访问集合中的元素。例如访问集合中的第一个元素

document.getElementsByClassName("oajrlxb2")[0].addEventListener("click",
  function(){ alert("Hello World!"); }
);