0

I am trying to create a chrome extension that modifies calendar.google.com/ web page. I want to insert extra information to meeting badges (blue buttons with meeting title). I use content script that select elements by class name and than inserts extra attributes to the element.

However, it appears that I can't select this elements via document.querySelectorAll and document.getElementsByClassName. And this confuses me, since via Develope Tool -> elements I can search this element.

Here is extension code:

manifest.json:

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

content script:

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

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

element HTML code:

<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>

I tried to select class="FAxxKc" and jscontroller="ABQtfe" via querySelectorAll but no luck. I want to know how to select this elements via js. Any help will be appriciated! Thanks!

Update: I can select elements that I need via Google Chrome Developer console by typing:

> document.querySelectorAll(".FAxxKc")

However, I don't understand why chrome extension content script doesn't detects elements via same query.

evgenyorlov1
  • 225
  • 5
  • 15
  • The elements are created dynamically by the page **after** your content scripts have run. This is how modern sites work. See [How to change the HTML content as it's loading on the page](https://stackoverflow.com/a/39334319) and [this answer about other methods](https://stackoverflow.com/a/39508954). Note that in case of simple styling you don't need any of these, you can simply declare a `css` content script file with `.FAxxKc { color: red !important }` – wOxxOm Feb 22 '21 at 06:13
  • @wOxxOm Thanks! I have read all your posts regarding this topic, very helpful! – evgenyorlov1 Feb 22 '21 at 08:36

0 Answers0