Chrome extension mutating running react application

Question

i am trying to create extension for chrome which mutating DOM of facebook timeline. Chrome extension cant inject to var or function created by page: https://developer.chrome.com/extensions/content_scripts#execution-environment

So its possible change rendering of react app? I was trying manually change text:

var elements = document.querySelectorAll('.UFILikeLink');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.innerHTML = element.innerHTML.replace(/Like/g, 'ORly?');
}

But afterwards Like component breaks and when i change reaction there is same text as expected. Any tips or it is possible change react DOM without breaking whole application?

Answer 1

React don't allow you to mutate the DOM manually at all until it's not clearly specified (and it's not in your case).

The only way to change the the DOM representation of a component is to change his render() method. For this, you have to change a function in the running JavaScript of the page.

Unfortunately (or fortunately), this is not authorized by the Chrome extension because of the Security policy and the Sandboxing of your JavaScript code.

This should be the official Google's answer to this question. But you can pass through this protection by injecting a <script> tag with your JavaScript code mutating the ReactCompenent behaviour in the DOM of the facebook page. This will force the browser to execute this code in the host page JavaScript VM. I don't know if changing the render() function of a Component can be performed after its initialisation by React, but it's your unique hope to perform what you want.

Let us know if you've found a solution, it can be interesting to know if React can be a protection against this type of intrusion.