2

I'm developing a chrome extension that should alter the text contents of a content editable div in chrome. It's working perfectly on websites like gmail, but has a problem on facebook, that after the contents have been altered and then you close the dialog containing the div and then open it, all changes are removed and only the text entered manually via keyboard stay.

I change the text via javascript as follows:

document.getSelection().anchorNode.textContent = "something";

It goes like this:

enter image description here

but after closing the dialog and opening it again, only the manually entered text is shown.

enter image description here

As mentioned above, this problem only on facebook. It looks like that the dom is being monitored and any changes made to it are removed.

Still, other extensions could alter the contents of this div like Grammarly. How is this possible? Do you need permission from facebook or something like that for your extension to work?

mipsc
  • 113
  • 7
  • See [Enter data into a custom-handled input field](https://stackoverflow.com/a/57900849) – wOxxOm Aug 30 '20 at 17:41
  • "This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it." - https://developer.mozilla.org/en-US/docs/Web/API/Document/execComman apart from that, the text is being entered already, the problem is in keeping it inside the div after it is closed. – mipsc Aug 30 '20 at 17:44
  • The point of execCommand is that the changes should persist. Also, as my answer notes, execCommand will work in the foreseeable future because a new editing API specification is not finished yet, and knowing how slow such things usually move it may take another 5-20 years. – wOxxOm Aug 30 '20 at 18:42
  • Well, I tried it and it didn't work. When executing execCommand the dialog breaks and closes automatically. It seems that the website runs a MutationObserver and removes anything inserted programmatically for security reasons. But there should be some way out of this, as it works with Grammarly for example. It has for sure nothing to do with the extension, because if you try to change the textContent of the div via the console, then after closing the dialog everything inserted will be deleted by the website itself. – mipsc Aug 31 '20 at 02:04
  • To use execCommand you need to focus the element that has `contenteditable` attribute first. – wOxxOm Aug 31 '20 at 04:12
  • It's still the same even with the div being focused. – mipsc Sep 02 '20 at 22:19

0 Answers0