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.

Our current method involves creating a 'keypress' event listener. 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);

So we tried to change the permissions on the 'iframe' of the google docs document so that we could use content scripts but it still didn't work (here's the code)

var divs = document.getElementsByTagName("iframe");
for(var i = 0; i < divs.length; i++){
divs[i].sandbox = 'allow-scripts'
divs[i].addEventListener('keydown', handler, true);

Any help appreciated

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.

Our current method involves creating a 'keypress' event listener. 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);

So we tried to change the permissions on the 'iframe' of the google docs document so that we could use content scripts but it still didn't work (here's the code)

var divs = document.getElementsByTagName("iframe");
for(var i = 0; i < divs.length; i++){
divs[i].sandbox = 'allow-scripts'
divs[i].addEventListener('keydown', handler, true);

Any help appreciated

• javascript
• html
• google-chrome
• google-chrome-extension

3 Answers 3

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.

I had the same question (detect and use keypress in google docs) and that page gave me the solution : http://features.jsomers/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.

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