Chrome Extension: detecting keypresses in Google Docs

Question

Hey my friends and I new to javascript and are encountering problems with some code. Currently we're trying to make a chrome extension that detects when and how much a user works on a particular google document, by detecting keystrokes.

We put it into a content.js file that runs on any docs.google webpage. The thing is, it works when you're on the page editing the title\/anything else, but for some reason it doesnt register when the user is actually editing the document. We tried it on other websites and it works, and adding it to background.js doesn't work.

var handler = function (e) { 
    handler.data.push(e);
    console.log("success");
    console.log(handler.data);
}
handler.data = [];
window.addEventListener("keydown", handler);
document.addEventListener("keydown", handler);

Answer 1

I don't see iframes used for the main content on g-docs or g-sheets, but if you insist you can use "all_frames": true and "match_about_blank": true in manifest.json content script declaration to make it run in all iframes automatically.

Another idea is to capture events before the site sees them: declare "run_at": "document_start" for your content script in manifest.json and use true for useCapture parameter of addEventListener: document.addEventListener("keydown", handler, true); - this line should be executed in the main code of your content script to register the listener before the page DOM is built, don't put it inside some load or DOMContentLoaded callback.

Answer 2

I had the same question (detect and use keypress in google docs) and that page gave me the solution : http://features.jsomers.net/how-i-reverse-engineered-google-docs/

var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
      if (editingIFrame) {
        editingIFrame.contentDocument.addEventListener("keydown", hook, false);
      }
    function hook(e){
        var keyCode = e.keyCode;
        console.log("keycode:" + keyCode);    
}

hope it can help someone else.

Answer 3

//Hope this may help you !!//
<pre>
var events = document.createEvent('Event');
events.initEvent('keyup',true,true);
var elem = document.querySelector(".docs-texteventtarget-iframe").contentDocument.activeElement;
elem.addEventListener('keyup',function(e){
console.log('check check')
console.log(elem);},false);
elem.dispatchEvent(events);
</pre>