Chrome 扩展程序：检测 Google Docs 中的按键答案

【问题标题】：Chrome Extension: detecting keypresses in Google DocsChrome 扩展程序：检测 Google Docs 中的按键
【发布时间】：2016-11-05 06:46:32
【问题描述】：

嘿，我和我的朋友们都是 javascript 新手，但遇到了一些代码问题。目前，我们正在尝试制作一个 chrome 扩展程序，通过检测击键来检测用户在特定谷歌文档上的工作时间和工作量。

我们当前的方法涉及创建一个“按键”事件侦听器。我们将其放入在任何 docs.google 网页上运行的 content.js 文件中。问题是，当您在页面上编辑标题/其他任何内容时它可以工作，但由于某种原因，当用户实际编辑文档时它不会注册。我们在其他网站上尝试过，它可以工作，将其添加到 background.js 不起作用。

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);

因此我们尝试更改 google docs 文档的“iframe”的权限，以便我们可以使用内容脚本，但它仍然不起作用（这是代码）

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

任何帮助表示赞赏

【问题讨论】：

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

我看不到用于 g-docs 或 g-sheets 主要内容的 iframe，但如果您坚持可以在 manifest.json 内容脚本声明中使用 "all_frames": true 和 "match_about_blank": true 使其在所有内容中运行自动生成 iframe。

另一个想法是在站点看到它们之前捕获事件：在 manifest.json 中为您的内容脚本声明 "run_at": "document_start" 并为 addEventListener 的 useCapture 参数使用 true：document.addEventListener("keydown", handler, true); - 这行应该在在构建页面 DOM 之前注册监听器的内容脚本的主要代码，不要将它放在一些 load 或 DOMContentLoaded 回调中。

【讨论】：

我们尝试编辑我们的代码 (imgur.com/a/wWNqS) 但我们仍然收到错误消息 (imgur.com/a/9KbbR)
这是一个非常好的答案（一如既往），不幸的是它现在似乎对我不起作用。通过查看 devtools 中的getEventListeners(document)["keydown"];，我认为 GDocs 页面在加载后实际上正在删除事件侦听器——当我在doc_start 创建它们时，我的侦听器存在，但是一旦我们通过load，它们就消失了。
@KarlReid，事件是在 iframe 中以docs-texteventtarget-iframe 类捕获的，因此答案应该有效。您可以在 devtools 中通过检查此 iframe 来验证它，以便控制台工具栏上下文选择器更改为 iframe，然后运行 document.addEventListener("keydown", console.log) 并在 gdocs 编辑器中输入一些内容。
谢谢，知道这门课很有帮助。工具栏选择器实际上并没有适合我的框架，但它存在是因为我可以使用 querySelector 找到它。无论如何，我实际上发现 match_about_blank 似乎对我的应用程序非常有效 - 大概它将我的脚本注入到该框架中，而 all_frames 没有，然后一切都很好。最后不需要document_start。非常感谢！

【解决方案2】：

我有同样的问题（在谷歌文档中检测和使用按键），那个页面给了我解决方案：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);    
}

希望它可以帮助别人。

【讨论】：

【解决方案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>

【讨论】：