Search code examples
javascriptgoogle-chrome-extensiongoogle-calendar-apibrowser-extensionmutation-observers

MutationObserver in "new" Google Calendar


I have an browser extension for Google Calendar, where I observe the DOM to gather events that are being viewed with:

// content.js
const calendarContainer = document.getElementById('gridcontainer');
const observer = new MutationObserver(mutations => {
  // just for test
  console.log('content', mutations);
}

observer.observe(calendarContainer, {
  childList: true,
  characterData: true,
  subtree: true
});

It works correctly in "classic" Calendar, but since the last update to Material design, DOM structure is different. So, I tried to change observed element accordingly:

// content.js
const calendarContainer = document.querySelector('div[role="main"]');

Even though I switch between week/day view, schedule or between dates, I cannot receive any new mutations besides first load of the page (after refresh). If you look on the source code trough Developer Tools you can see that DOM is changing, but Observer is somehow not able to see it.

Any thoughts?


Solution

  • According to wOxxOm comment, I have changed it to observe the parentElement, which is not replaced between different calls, and it's working.