Chrome Extension: Detecting Keypresses In Google Docs

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

Solution 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.

Solution 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);
      }
    functionhook(e){
        var keyCode = e.keyCode;
        console.log("keycode:" + keyCode);    
}

hope it can help someone else.

Solution 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>