Javascript Chrome扩展：检测Google文档中的按键

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

我们当前的方法包括创建一个“按键”事件侦听器。我们将其放入一个content.js文件中，该文件可以在任何docs.google网页上运行。问题是，当你在页面上编辑标题/任何其他内容时，它会起作用，但由于某些原因，当用户实际编辑文档时，它不会注册。我们在其他网站上试用过，效果不错，但将其添加到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”）；
对于（变量i=0；i

---

感谢任何帮助

我没有看到用于g-docs或g-sheets上主要内容的iFrame，但如果您坚持，您可以使用manifest.json内容脚本声明中的and使其自动在所有iFrame中运行

---

另一个想法是在站点看到事件之前捕获它们：在manifest.json中为您的内容脚本声明，并对addEventListener的参数使用

true

：document.addEventListener（“keydown”，handler，true）-这一行应该在内容脚本的主代码中执行，以便在构建页面DOM之前注册侦听器，不要将它放在一些

load

或

domcontentload

回调中。

我看不到用于g-docs或g-sheets上主内容的iFrame，但如果您坚持可以在manifest.json中使用和内容脚本声明，使其自动在所有iFrame中运行

另一个想法是在站点看到事件之前捕获它们：在manifest.json中为您的内容脚本声明，并对addEventListener的参数使用

true

：document.addEventListener（“keydown”，handler，true）-这一行应该在内容脚本的主代码中执行，以便在构建页面DOM之前注册侦听器，不要将其放入一些

load

或

DOMContentLoaded

回调中。

我有同样的问题（在谷歌文档中检测并使用按键），该页面给了我解决方案：

希望它能帮助其他人。

我有同样的问题（在谷歌文档中检测并使用按键），该页面为我提供了解决方案：

---

希望它能帮助其他人。

我们尝试编辑代码（），但仍然收到错误消息（），这是一个非常好的答案（一如既往），不幸的是，它现在似乎对我不起作用。通过查看

getEventListeners（document）[“keydown”]

在devtools中，我认为GDocs页面实际上是在加载事件监听器后删除事件监听器——我在

doc\u start

创建监听器时，监听器就存在了，但一旦我们通过

load

，它们就消失了。@KarlReid，事件在iframe中被捕获，带有

docs texteventtarget iframe

类，因此答案应该有效。您可以n在devtools中通过检查此iframe内部来验证它，以便控制台工具栏上下文选择器更改为iframe，然后运行

document.addEventListener（“keydown”，console.log）

并在gdocs编辑器中键入一些内容。谢谢，了解该类非常有帮助。工具栏选择器实际上没有这个框架，但它确实存在，因为我可以使用querySelector找到它。无论如何，我发现只要

match\u about\u blank

似乎对我的应用程序非常有效-大概它得到了我的答案当

所有帧都没有时，脚本被注入到该帧中，然后一切正常。不需要
文档开始
。非常感谢！我们尝试编辑代码（），但仍然收到错误消息（）。这是一个非常好的答案（一如既往），不幸的是，它现在似乎对我不起作用

在devtools中，我认为GDocs页面实际上是在加载事件监听器后删除事件监听器——我在

doc\u start

创建监听器时，监听器就存在了，但一旦我们通过

load

，它们就消失了。@KarlReid，事件在iframe中被捕获，带有

docs texteventtarget iframe

类，因此答案应该有效。您可以n在devtools中通过检查此iframe内部来验证它，以便控制台工具栏上下文选择器更改为iframe，然后运行

document.addEventListener（“keydown”，console.log）

并在gdocs编辑器中键入一些内容。谢谢，了解该类非常有帮助。工具栏选择器实际上没有这个框架，但它确实存在，因为我可以使用querySelector找到它。无论如何，我发现只要

match\u about\u blank

似乎对我的应用程序非常有效-大概它得到了我的答案当

所有框架都没有时，脚本被注入到该框架中，然后一切都很好。最后不需要
文档开始。非常感谢！
var divs = document.getElementsByTagName("iframe");
for(var i = 0; i < divs.length; i++){
divs[i].sandbox = 'allow-scripts'
divs[i].addEventListener('keydown', handler, true);

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