How to call MutationObserver inside addEventListener()?

Question

I'm trying to write a primitive google chrome extension that gets the name of the current youtube channel.

So I use MutationObserver To do this. MutationObserver waits for the desired node to appear on the page.

This code works:

var observer = new MutationObserver(function (mutations) {
    if (document.querySelector("#text a")) {
      console.log(document.querySelector("#text a").innerText);
  
      observer.disconnect();
      
    }
});
  
const target = document.querySelector("body");
const config = { childList: true, characterData: true };
observer.observe(target, config);

But since Youtube changes the content of the page without reloading. I am trying to restart MutationObserver to get the new channel name again. But MutationObserver doesn't get called from addEventListener.

This example code doesn't work:

window.addEventListener("popstate", function() { 
  
  var observer = new MutationObserver(function (mutations) {
    if (document.querySelector("#text a")) {
      console.log(document.querySelector("#text a").innerText);
  
      observer.disconnect();
      
    }
  });
  
  const target = document.querySelector("body");
  const config = { childList: true, characterData: true };
  observer.observe(target, config);
});

How would I implement this task to receive the desired node with a fresh channel name every time the url address changes without page reloading?

window.addEventListener("popstate", function() { 
  
  var observer = new MutationObserver(function (mutations) {
    if (document.querySelector("#text a")) {
      console.log(document.querySelector("#text a").innerText);
  
      observer.disconnect();
      
    }
  });
  
  const target = document.querySelector("body");
  const config = { childList: true, characterData: true };
  observer.observe(target, config);
});

If I go forward or go back on the history of links any code works except MutationObserver call.

See also [How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) — wOxxOm, Mar 23 '23 at 15:41
but how would I track when the node I need appears? I can't get the channel name not using the MutationObserver. It simply does not exist at the moment when document.querySelector tries to get it. Waiting for the page to load in different ways does not work also. — aleks1104, Mar 23 '23 at 18:23
@wOxxOm your comment move me bet forward so now I can run script during new video selection without page reloading. `document.addEventListener('yt-navigate-finish', getChannalName); function getChannalName() { console.log("script run"); console.log(document.querySelector("#text a").innerText); }` But problem is this line `console.log(document.querySelector("#text a").innerText);` get error - Uncaught TypeError: Cannot read properties of null (reading 'innerText'). Since now I don't use MutationObserver because it doesn't work inside addEventListener. — aleks1104, Mar 24 '23 at 07:28
Apparently you still need it inside the event listener because the element is created later. — wOxxOm, Mar 24 '23 at 11:08

Patrick · Answer 1 · 2023-03-26T00:53:38.543

popstate is only fired by browser actions (i.e. clicking the back button, etc). Youtube modifying the history object doesn't cause the event to occur.

chrome.webNavigation.onHistoryStateUpdated would give you an event to hook into

There are samples of how to use it available on MDN.

const filter = {
  url:
  [
    {hostContains: "example.com"},
    {hostPrefix: "developer"}
  ]
}

function logOnHistoryStateUpdated(details) {
  console.log(`onHistoryStateUpdated: ${details.url}`);
  console.log(`Transition type: ${details.transitionType}`);
  console.log(`Transition qualifiers: ${details.transitionQualifiers}`);
}

chrome.webNavigation.onHistoryStateUpdated.addListener(logOnHistoryStateUpdated, filter);

Would you show a simple example of how to write the callback function according to this documentation? `chrome.webNavigation.onHistoryStateUpdated.addListener( callback: function, filters?: object, )` — aleks1104, Mar 23 '23 at 20:09

How to call MutationObserver inside addEventListener()?

1 Answers1