5

I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.

The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.

I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.

For a while, I just thought it would be impossible...

BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.

Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...

Thanks for any help and insight!

EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)

travisjayday
  • 784
  • 6
  • 16
  • I'm afraid your question isn't very clear. What exactly are you trying to accomplish? Get the content of a contenteditable div? – obscure Jul 29 '19 at 20:39
  • Sorry about that... I need to set the contents of a contenteditable div and make sure the new contents saved into the twitter javascript code (which I'm guessing is either React or Angular). I examined the source code from the Grammarly extension and*I think* the way they are doing it is like this (see below comment). I think they're doing it by sending a paste event to the div. When I try to reproduce it, however, nothing happens. – travisjayday Jul 29 '19 at 20:45
  • ```function(e, t) { var n = new DataTransfer; n.setData("text/plain", t.replace(/\s/g, a)); var r = e.contentDocument; (r.querySelector("div[contentEditable]") || r.body) .dispatchEvent(new ClipboardEvent("paste", { clipboardData: n }))``` – travisjayday Jul 29 '19 at 20:46
  • @obscure did that make sense? I'm sorry if it wasn't clear... – travisjayday Jul 29 '19 at 20:49
  • 1
    Paste only works in chrome browser but, how can I replace the error word? I tried to select the error word, but I wasn't able to select a specific word like grammarly. – Sadhan Sarker Jan 02 '22 at 04:09
  • Did you find solution? – Kani Oct 20 '22 at 03:26

0 Answers0