JavaScript mutation observer not working in google chrome extension

aspirinemaga 0
Viewed 84

I want to console log a content from a specific div once it has been updated on the page. But my Mutation Observer seems do not want to work.

The div I'm looking for is on binance price tag:
enter image description here

What am I doing wrong here ?

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.target.textContent);
  });
});

const targetElements = document.querySelectorAll(".showPrice");

targetElements.forEach((i) => {
  observer.observe(i, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
  });
});

A demo here (LINK) is working fine, but somehow ignored in my chrome extension code:

Please, before removing or closing my question, explain what's wrong. I'm trying to find a solutions since all day. Checked I guess all stackoverflow duplicate questions with no luck.

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.target.textContent);
  });
});

const targetElements = document.querySelectorAll(".showPrice");

targetElements.forEach((i) => {
  observer.observe(i, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
  });
});

// NOT PART OF THE REAL CODE, JUST FOR DEMO DOWN BELOW
setInterval(() => {
  const randomNum = 1000 + Math.random() * 1000;
  const number = Math.round(randomNum / 100) * 100;
  targetElements[0].textContent = number;
  clearTimeout();
}, 2000);
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="showPrice">0</div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

mutation-observers google-chrome-extension javascript
1 Answers

The only way to make it work is to listen for load event and time it out for 2-3 seconds.

async function run () {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      console.log(mutation.target.textContent)
    })
  })
  
  const targetElements = document.querySelectorAll('.showPrice')
  
  targetElements.forEach((i) => {
    observer.observe(i, {
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
      attributeOldValue: true,
      characterDataOldValue: true
    })
  })
}

window.addEventListener('load', function load(e){
  window.removeEventListener('load', load, false);
  this.setTimeout(() => {
    run()
  }, 3000)
}, false);
aspirinemaga0
Related