1

Background:

I am writing a Chrome extension that programmatically replaces abbreviations with snippets of text. Like, it can auto-replace "brb" with "be right back". The way (simplified to this question) I insert this snippet expansion is like this:

var newFullText = textBeforeAbbrev + expansionText + textAfterAbbrev;
textarea.value = newFullText; // OR
div.innerHTML = newFullText;

Problem:

The problem here is that although this correctly inserts the expanded text, the website does not catch it as an update to the textarea/div contents.

Some sites internally keep a track of textarea/div contents, updating it on input events. That means, if I do this expansion and submit the form, on some sites (like Facebook, Hipchat), this newFullText won't be registered - because it wasn't a user input event - so the website didn't catch it either!. So, the submitted value would be having the text prior to this expansion.

My attempts:

I've already tried firing the keydown and input events - on the concerned textareas - in this manner with NO luck at all:

function triggerKeypress(keyCode){
    var ev = new Event("input");
    ev.keyCode = keyCode;
    this.dispatchEvent(ev);
}

My question:

Is these a way to achieve what I am requesting? Specifically:

Simulate a user keypress/keydown/input/whatever_necessary on the textarea/div/input element, so that the website internally catches it as an input/keypress(whatever event it is supposedly looking for), and updates its internal text, so that the submitted text correctly shows up

I'm looking for a native JS solution. My app is a Chrome extension so naturally I plan to support Chrome code, although cross-browser support is appreciated.

Minimum viable code sample:

Here's the zip file of the minimum code (11KB) you need to reproduce the issue. Please run it and try changing those two methods in the code to get them work, as stated in this question. I've confirmed the linked code does STILL NOT work on Hipchat, Facebook posts and comments. More details inside file README.txt.

How to use it? 1. Open Hipchat team chat, or Facebook.
2. Type "brb" into the team chat box/Facebook post/comments.
3. Press Shift+Space.
4. The expanded text "be right back" would clearly show up inside the textarea.
5. Press enter.
6. The submitted value will show up as "brb" instead of "be right back"

This question is not a duplicate question: please note that the other questions are about:
1. firing a keydown that fires their own custom handler, and which naturally do NOT work here
2. are way too out-dated and have become convoluted over time
3. use deprecated methods like Document.createEvent

Please let me know for more clarification. Thanks!

Community
  • 1
  • 1
Gaurang Tandon
  • 6,504
  • 11
  • 47
  • 84
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Mar 24 '17 at 03:16
  • @Makyen I appreciate your desire to maintain high quality questions on this site. But please note that: I've included all the manifest.json and content scripts into the zip file. I will edit my question more. "the shortest code necessary to reproduce it in the question itself. " I've included that in the question. Though if you're asking about the code that is necessary to **reproduce** the problem, it's impossible to include it in the question coz it involves "setting the manifest,setting iframe handlers, catching keypresses, matching them, doing expansion" half of which is off-topic. – Gaurang Tandon Mar 24 '17 at 03:20
  • Your stated problem is that you are unable to insert text, and have it recognized by some sites, into a ` – Makyen Mar 24 '17 at 03:25
  • @Makyen Honestly speaking, there's **only 2 methods** (~20 lines) in the code that any question solver needs to be check. I've mentioned this in the readme. The format of those 2 methods has been shown as "triggerKeypress" method above. The snippet insertion technique has been shown above "newFullText = ...". Rest of the code in that file is about caret handling and detection of the static string ("brb"). The caret handling is mandatory to reproduce the bug, but is something the question solver need not be concerned about. So, I don't see the problem. – Gaurang Tandon Mar 24 '17 at 03:30
  • What might be required for any particular website will depend on what the site does. This will vary from site to site. You may need to reverse engineer exactly what the sites in which you are interested do. The sites may be intentionally written to try to prevent exactly what you are wanting to do: use a script to control what happens on the site. There are a wide variety of things that could be done. One of those is to check to see if any events which are received by the webpage's code are "trusted". (continued) – Makyen Mar 24 '17 at 03:34
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138882/discussion-between-gaurang-tandon-and-makyen). – Gaurang Tandon Mar 24 '17 at 03:38

0 Answers0