Manipulate The Dom Using Jquery, Without Changing The React Code

Let's say I want to develop a third party plugin, like a chrome extension. So I will have absolutely no privilege to change the javascript code of the page. All I can do is add thi

Solution 1:

You can use MutationObserver to detect the moment DOM was modified and add your stuff again if it was removed.

let myStuff = $('<div>foo</div>');

const mo = newMutationObserver(() => {
  if (!document.contains(myStuff[0])) {
    insert();
  }
});

observe();

functioninsert() {
  mo.disconnect();
  myStuff.appendTo('.some.react.element');
  observe();
}

functionobserve() {
  mo.observe(document.body, {childList: true, subtree: true});
}

Another advanced approach is hooking into React itself via __REACT_DEVTOOLS_GLOBAL_HOOK__ in page context, it's also used by React DevTools, look for more info yourself if you aren't afraid to delve into the depths.