1

I'm creating a chrome extension that can replace text snippets in a contenteditable div from a content script.

This for example works fine:

var elem = document.activeElement.innerHTML;
elem = elem.replace("foo", "bar");
document.activeElement.innerHTML = elem;

But when a website uses React, it still replaces the text but only temporarily. As soon as you type another character it jumps back to the original content. My guess is that this happens because the text is stored as a prop of a React component instead. Because when I change the text with the React chrome extension, it does keep the new value.

So I need to change the property of a React component from my content script, is this possible? If yes, how?

Onnem
  • 61
  • 3
  • 1
    Try execCommand, [example](https://stackoverflow.com/a/57900849). If it won't work you'll have to use react's global hooks in page context. – wOxxOm Sep 27 '21 at 19:28
  • execCommand works much better, thank you! I'm using the insertHTML command, which does the trick just fine. Only with rich text such as ol, ul or anchor tag it just pastes in regular text instead. Haven't been able to solve that part just yet, insertOrderedList etc don't do anything even when I have the right node selected. – Onnem Sep 30 '21 at 07:16

0 Answers0