Home Ask Login Register

Developers Planet

Your answer is one click away!

gogachinchaladze February 2016

Keydown Which Not Working Chrome Extension

I've been struggling with my idea of google extension, and you as always are the last hope of mine ! :))

Well, I want to click the button on my chrome extension that will cause keydown simulation on the page extension is running.

I think chrome has some safety issues on my idea, that blocks the keyboard simulation (makes event isTrusted:false) and deletes which property.

The function I wrote works fine on jsfiddle , but it appears that chrome extension does it in a different manner.

Here is the content script file :

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if(request.action == "scrollToTop"){

  }
  else if(request.action == "scrollToBottom"){

  }
  else if(request.action == "enter"){
    triggerKeyboardEvent(document,13);
  }

  function triggerKeyboardEvent(el, keyCode){
    var event = new Event("keydown", {"bubbles":true, "cancelable":true});
    event.which = keyCode;
    el.dispatchEvent(event);
  }

});
chrome.runtime.sendMessage({action : "show"});

The log on jsFiddle writes:

Event {isTrusted: false, which: 13}

The log on website:

document.addEventListener('keydown',function (e) {
      console.log(e)
}

writes just:

Event {isTrusted: false}

Answers


gogachinchaladze February 2016

Thanks to @BG101 and @Rob W I found out that solution is script injection!

the only thing was that according to MDN KeyboardEvent.initKeyboardEvent() is depricated, so I replaced the code with:

var event = new Event(event, {"bubbles":true, "cancelable":true});

Also, as I wanted the trigger to run on document, I removed the element selector things. Here is what I got:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if(request.action == "scrollToTop"){
    triggerKeyboardEventOnDocument("keydown",38);

  }
  else if(request.action == "scrollToBottom"){
    triggerKeyboardEventOnDocument("keydown",40);

  }
  else if(request.action == "enter"){
    triggerKeyboardEventOnDocument("keydown",13);
  }

  function triggerKeyboardEventOnDocument(event, keyCode){
    var script = document.createElement('script');

    script.textContent = '(' + function(event, charCode) {

        //Create Event
        var event = new Event(event, {"bubbles":true, "cancelable":true});

        // Define custom values
        // This part requires the script to be run in the page's context
        var getterCode = {get: function() {return charCode}};
        var getterChar = {get: function() {return String.fromCharCode(charCode)}};
        Object.defineProperties(event, {
          charCode: getterCode,
          which: getterCode,
          keyCode: getterCode, // Not fully correct
          key: getterChar,     // Not fully correct
          char: getterChar
        });
        document.dispatchEvent(event);
      } + ')(' + '\"' + event + '\", '+ keyCode + ')';

    (document.head||document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
  }

});
chrome.runtime.sendMessage({action : "show"});

Post Status

Asked in February 2016
Viewed 3,520 times
Voted 10
Answered 1 times

Search




Leave an answer


Quote of the day: live life