1

I'm working on a Chrome extension whose content script injects a bunch of elements in a webpage, including an input element of type text, on specified actions.

the problem is that while on a webpage like Facebook's home page, which listens for keyboard input (e.g., P), the extension's input element loses focus, which goes to Facebook's "what's on your mind?" section in case of the P.

I tried getting focus back to the input element programtically, and while that seems to be partially working, as it takes focus back from the "what's on your mind?" section immediately, it still doesn't write the 'P' into the text field.

is there anyway to workaround that?

update #0: the code that I tried for regaining focus was as simple as that:

searchBar.onblur = searchBar.focus;

update #1: my input element is inside a shadow DOM. apparently the element doesn't lose focus when it's not part of a shadow DOM. any idea on how to get that to work with the shadow DOM?

kzidane
  • 753
  • 3
  • 11
  • 29

2 Answers2

0

Check out this example. You can listen for keyboard events on the highest level (which is document), unless the site blocks propagation of the event.

document.addEventListener('keypress', function(e) {
    console.log(e);
}, false);

document.getElementById('text3').addEventListener('keypress', function(e) {
    console.log(e);
}, false);
<textarea id="text1"></textarea>
<textarea id="text2"></textarea>
<textarea id="text3"></textarea>
<textarea id="text4"></textarea>
Luke
  • 1,369
  • 1
  • 13
  • 37
0

I don't use Facebook; are you saying that when someone types a P, that causes the focus to move to "What's on your mind?" Because if the sequence of events is keypress --> Facebook takes focus --> you take focus back, the keypress didn't occur while your input field had focus, so the typed letter wouldn't show up.

You might have to put those letters into your input's value yourself by listening to keypresses, checking if they missed the input field, converting the keycode into the appropriate letter, and appending it to the input's value.

  • yes. when someone hits P focus moves to facebook's "what's on your mind?". it's worth mentioning that the `keydown` is fired while my input is focused on. yet facebook's page manages to steal focus and I end up not having the P typed into my input. I want handling that manually to be the last solution to try. – kzidane Jul 16 '15 at 16:19
  • I tried to replicate this in my own extension and I'm not getting this problem. I've injected an input field from the content script, Ps are being typed and the focus isn't lost. –  Jul 16 '15 at 16:39
  • my input element is part of a shadow DOM. but you're right. it works if it's not inside the shadow DOM. any idea on how to keep that working even when the input is inside the shadow DOM? – kzidane Jul 16 '15 at 17:46
  • 1
    This might be relevant: http://stackoverflow.com/questions/24480808/how-are-shadow-dom-events-from-under-content-targeted. "events are retargeted to look like they've come from the host element rather than internal elements to the Shadow DOM." This might be why key events aren't showing up in the input; they're being processed as if they come from the host node? –  Jul 16 '15 at 18:08