Trigger state change of a React component from Chrome extension on a Facebook post Trigger state change of a React component from Chrome extension on a Facebook post google-chrome google-chrome

Trigger state change of a React component from Chrome extension on a Facebook post


That’s not possible, you can’t imperatively mutate a React element tree from outside the app. You’d have to declaratively render a tree, either by modifying Facebook’s frontend code (beware of legal ramifications) or implementing your own post UI.


While it's nearly impossible to change the state of React component from your plugin, nothing stops you from emulating user's input by sending keystrokes, mouse clicks etc. The only thing you need it to figure out - which DOM-element listens to these events (not necessary one of those 4 in you question).


About the possibility of direct state change: let's say the component you need to changes is a functional one. Then it has a form of

Component() {  const [state, setState] = useState(...)  ...  setState(something)  ...}

so you need to somehow access the setState function of the component. But how? It's private to the function call. If you think that instead you can call the useState directly, then be aware that in another component it will return another setState. I have no idea what would happen if you'll call useState outside of a component, but surely it will not be able to guess which setState you want.

If you want you can check the source code of react-devtools to find out how you can dig out the state from the depths of React... but would you really want to try? And for what? The next time Facebook or React will be updated your code will definitely break.