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.

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

wOxxOm · Accepted Answer · 2016-11-05T07:27:37.017

4

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.

edited Nov 05 '16 at 07:27

answered Nov 05 '16 at 07:09

wOxxOm

65,848
11
132
136

We tried editing our code (http://imgur.com/a/wWNqS) but we're still getting the error message (http://imgur.com/a/9KbbR) – QCD_IS_GOOD Nov 05 '16 at 07:21
This is a really great answer(as always), unfortunately it doesn't seem to be working for me right now. From looking at `getEventListeners(document)["keydown"];` in devtools, I think the GDocs page is actually removing the event listeners once it loads- my listeners exist when I create them at `doc_start`, but once we get past `load`, they're gone. – Karl Reid Jun 29 '17 at 17:00
@KarlReid, the events are captured in iframe with `docs-texteventtarget-iframe` class so the answer should work. You can verify it in devtools by inspecting inside this iframe so that console toolbar context selector changes to the iframe, then run `document.addEventListener("keydown", console.log)` and type something in the gdocs editor. – wOxxOm Jun 29 '17 at 17:11
Thanks, knowing the class is very helpful. The toolbar selector doesn't actually have this frame for me, but it is there because I can find it with a querySelector. Anyway, I've actually found that just `match_about_blank` seems to work perfectly for my application- presumably it gets my script injected into that frame while `all_frames` didn't, and then all is well. Don't need `document_start` in the end. Many thanks! – Karl Reid Jun 29 '17 at 17:36

score 2 · Answer 2 · answered Sep 14 '17 at 11:04

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.

score 0 · Answer 3 · answered Jun 22 '21 at 02:05

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

Chrome Extension: detecting keypresses in Google Docs

3 Answers3

Linked