javascript - querySelectorAll 和 getElementsByClassName 无法在谷歌日历页面上选择元素

Question

我正在尝试创建一个修改calendar.google.com/网页的 chrome 扩展。我想在会议徽章（带有会议标题的蓝色按钮）中插入额外信息。我使用按类名选择元素的内容脚本，然后向元素插入额外的属性。

但是，我似乎无法通过 document.querySelectorAll 和 document.getElementsByClassName 选择这些元素。这让我很困惑，因为通过开发工具-> 元素我可以搜索这个元素。

这是扩展代码：

清单.json：

{
  "manifest_version": 2,
  "name": "Test",
  "version": "1",
  "content_scripts": [
    {
      "matches": [
        "https://calendar.google.com/calendar/*"
      ],
      "run_at": "document_end",
      "js": ["contentscript.js"]
    }
  ]
}

内容脚本：

var elms = document.querySelectorAll(".FAxxKc"); //always get 0 elements
console.log("Elements found: " + elms.length);

[].forEach.call(elms, function(div) {
    div.style.color = "red";
});

元素 HTML 代码：

<div role="button" data-eventchip="" data-opens-details="true" jscontroller="ABQtfe" tabindex="0" data-eventid="NGZyaTU0MDR1cDNsNDZrZmhldDVqdml0N2EgeW9ybG92QGludGVyc29nLmNvbQ" data-keyboardactiontype="0;1" data-focusable="" jsaction="click:cOuCgd; contextmenu:mg9Pef; dblclick:Reio8; mouseenter:tfO1Yc; mouseleave:JywGue" jslog="35463; track:click,dblclick" data-dragsource-type="5" class="NlL62b EfQccc elYzab-cXXICe-Hjleke EiZ8Dd">
   <div class="ynRLnc">5pm to 5:45pm, Design Developer Review, User12234, Accepted, Location: Skype, February 43, 2022</div>
   <div aria-hidden="true" class="lFe10c">
      <div class="Jmftzc RIOtYe cpCWFd PKhkGc EiZ8Dd" style="max-height: 15px;"><span class="FAxxKc">Design Developer Review</span><span class="m6vl0d">,&nbsp;</span><span class="A6wOnd">22pm<span class="m6vl0d">,&nbsp;</span>Skype</span></div>
   </div>
</div>

我试图通过 querySelectorAll 选择 class="FAxxKc" 和 jscontroller="ABQtfe" 但没有运气。我想知道如何通过 js 选择这些元素。任何帮助将不胜感激！谢谢！

更新：我可以通过输入以下内容通过 Google Chrome 开发者控制台选择我需要的元素：

> document.querySelectorAll(".FAxxKc")

但是，我不明白为什么 chrome 扩展内容脚本不能通过相同的查询检测元素。

标签： javascripthtmldomgoogle-chrome-extension