Find-and-Replace-Browser-Extension icon indicating copy to clipboard operation
Find-and-Replace-Browser-Extension copied to clipboard

Does not work on Facebook and Messenger

Open Dalimil opened this issue 7 years ago • 1 comments

Facebook uses contenteditables and keeps the text content in JavaScript variables (separately). When I insert my markup, and replace text, their JavaScript immediately restores the previous state (switches back to the orginal text). When I detach their JavaScript listeners by cloning the contenteditable DOM node, I'm able to highlight and replace text successfully and the user can continue editing, but when they click the post button, all changes made after the last search & replace operation are lost because the text that is posted is the content of their JavaScript variables, not the actual contenteditable content.

We can use Document.execCommand but it is very unreliable and often replacing a piece of text ends up accidentally replacing everything (due to the JavaScript monitoring of their editable text area).

Dalimil avatar Nov 27 '17 15:11 Dalimil

Document.execCommand proved very unreliable, because execCommand operates on the active cursor selection, which can be programmatically set by manipulating the Selection object, but since there's no way to tell it to select only the text content itself it ended up deleting whole DOM tags and even after a lot of testing it wasn't reliably able to replace parts of text in a post and pass through all the automatic DOM manipulation that Facebook implements. Therefore, we disable the extension on Facebook and Messenger for now.

Dalimil avatar Jan 26 '18 18:01 Dalimil