8

I am working on a Google Chrome extension and have something like the following code below. While there is nothing wrong with the code below there is a slight issue I am having trouble resolving.

I'm using this code to detect if the reports-content class was changed from losing focus on an input control or if a timer was the action that caused the change.

The problem is, I only want to do something if the change was the result of losing focus on the input control and NOT the timer.

I want to do this so I can loop through different inputs and only try new inputs once the 'reports-content' has updated with new data.

The 'timer' is outside my control since it's on a third party website (tradingview.com), which happens to be using React framework in case that is important. Every-time the price changes it will detect as a mutation to the object I'm checking, which is not a bug, that is good that it does that, but I need to be able to discern which mutation was caused from that (timer/event/change), and which came from the input control losing focus.

enter image description here

Below is an example of the two mutation records I currently see, one caused by the event and the other the timer or (price change noticed event).

enter image description here

Below this is an example of what the reports-content looks like.

enter image description here

//When the DOM is ready set the mutation listner.
$(document).ready(function(){
    console.log("JQuery Ready");

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(record => {
            var recordTarget = record.target;
            
            if(record.addedNodes.length>0){
                if(recordTarget.classList.contains("reports-content")){
                    console.log(recordTarget);
                    console.log(record);
                };
            }
                    
        });
    });

    //Use mutation observer on 'body' to wait for the existence of the .reports-content class node
    var target = $('body')[0];
    var config = {
        childList:true,
        subtree: true
    };
    observer.observe(target, config);
});
Joseph Astrahan
  • 8,659
  • 12
  • 83
  • 154
  • This: "_if the reports-content class was changed_" implies that the addition of the `.reports-content` class is what you are looking for - is that correct? – Randy Casburn Sep 17 '21 at 04:36
  • The problem is it's added from both mutations, what is more important is which mutation caused it. I have a workaround in place I'm using for now that I'll share once I confirm it's working nicely, but still want to figure this out if it's possible. – Joseph Astrahan Sep 17 '21 at 05:46
  • FWIW you can override setTimeout in [page context](/a/9517879) to intercept the timer. – wOxxOm Sep 17 '21 at 05:47
  • @wOxxOm True, I think it's actually calling an event everytime the 'price' changes but I'm not sure if 'that' is under a timer itself. The other issue is that may break other timer things required on the page, and I don't know the name of the function since it's on a third party website, but none the less this is worth exploring. – Joseph Astrahan Sep 17 '21 at 05:48
  • Could you add yourself a blur event on the element directly? – Kaiido Sep 17 '21 at 06:49

0 Answers0