收聽 chrome 擴展中的按鈕單擊

Question

facebook 類似按鈕的 html 如下：

<div aria-label="J’aime" class="oajrlxb2 bp9cbjyn g5ia77u1 mtkw9kbi tlpljxtp qensuy8j ppp5ayq2 
goun2846 ccm00jje s44p3ltw mk2mc5f4 rt8b4zig n8ej3o3l agehan2d sk4xxmp2 rq0escxv nhd2j8a9 j83agx80 
mg4g778l btwxx1t3 pfnyh3mw p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x tgvbjcpo hpfvmrgz jb3vyjys 
rz4wbd8a qt6c0cv9 a8nywdso l9j0dhe7 i1ao9s8h esuyzwwr f1sip0of du4w35lb lzcic4wl abiwlrkh p8dawk7l 
buofh1pr taijpn5t" role="button" tabindex="0">

我將以下內容放在 content.js 中，即 content_script：

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

我希望這會在單擊“喜歡”按鈕時用“Hello World”提醒我，但事實並非如此。 怎么會？

我也收到此錯誤：

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

但我已經看到它被用於其他解決方案？

編輯：我將 content.js 更改為：

var likeButtonList = document.getElementsByClassName("oajrlxb2");

for (i = 0; i < likeButtonList.length; i++) {
  likeButtonList[i].addEventListener("click",
    function(){ alert("Hello World!"); }
  );
}

我試圖一次聽每個按鈕，但這仍然不起作用？

EDIT2：頁面未正確加載。 通過在 content.js 中執行以下操作來修復它：

var likeButtonList;

function getLikeButtons(){
  likeButtonList = document.getElementsByClassName("oajrlxb2");

  for (i = 0; i < likeButtonList.length; i++) {
    likeButtonList[i].addEventListener("click",
      function(){ alert("Hello World!"); }
    );
  }
}

setInterval(getLikeButtons, 1111);

Answer 1

document.getElementsByClassName("oajrlxb2")

這將返回一個集合，而不是您可以將事件附加到的元素（因為許多元素可以具有相同的類）。您必須使用索引訪問集合中的元素。 例如訪問集合中的第一個元素

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