0

I'm trying to insert a text programmaticaly to a div of some websites but then the whole UI gets broken and the changes are rejected. It seems that any changes made programmaticaly are being tracked by MutationObserver. Yet it seems to be a common problem, as Grammarly developers seem to have had it:

Another—perhaps even bigger—issue with this approach is that websites don’t like it when somebody tries to change their DOM. The code running on the site expects that the DOM it created will not be changed by any other code. If that assumption is broken, bad things can happen. So both website and text editor developers started to look for ways to disable Grammarly, including such popular editors as ProseMirror, Quill.js, Draft.js, and many others. Source

But still there is a way out of this, as it seems:

If we were going to make any change to the DOM at all, we needed to make sure it wouldn’t be noticed by the code running on the page. Source

How is it possible that you could change the DOM without the code's notice?

EDIT:

An example would be Facebook. If you try to insert a text into the "Create Post" dialog, it crashes and closes.

I'm trying the following in chrome's console as "Create Post" is already shown:

editor = document.querySelectorAll(`[role="textbox"]`)[0];
editor.focus();
document.execCommand("insertText", false, "some text");
mipsc
  • 113
  • 7
  • Grammarly and other extensions use ShadowDOM and/or an iframe pointing to an html file in `web_accessible_resources`. Usually there's no problem with adding/modifying DOM so it sounds like you're doing it incorrectly or the site is *really* fragile. Can't help without [MCVE](/help/mcve). – wOxxOm Sep 25 '20 at 04:36
  • I'm doing nothing incorrectly and Facebook isn't fragile. I posted an edit. – mipsc Sep 25 '20 at 04:47
  • The fact that it crashes already means something is fragile, maybe it's the browser. One thing to check: does the element matching `[role="textbox"]` also have `contenteditable` attribute? Because for execCommand to work correctly the latter should be focused. – wOxxOm Sep 25 '20 at 04:51
  • It's contenteditable. And It's focused. That's all known and tested. It works perfectly on other websites, like gmail. The problem here is MutationObserver removing any changes. I'm looking for a way out of this certain problem. The problem is explained clearly in the above citations. – mipsc Sep 25 '20 at 04:56
  • I don' think ShadowDOM could help. In the situation I mentioned, I need to alter the text of an actual node of the actual DOM. – mipsc Sep 25 '20 at 04:57
  • Well, there's no normal way to avoid detection so the only method is to override/hook MutationObserver constructor ([example](https://stackoverflow.com/a/52360034)) in [page context](/a/9517879) of a content script that runs at document_start. In your hook you will go through the `mutations` array and modify it to exclude the records related to your elements. – wOxxOm Sep 25 '20 at 05:04

0 Answers0