Question

嘿，我的朋友和我刚接触javascript并遇到一些代码问题。目前，我们正在尝试制作一个Chrome扩展程序，通过检测击键来检测用户在特定Google文档上工作的时间和内容。

我们当前的方法涉及创建'keypress'事件监听器。我们将其放入在任何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);

任何帮助表示赞赏

Answer 1

我没有看到iframe用于g-docs或g-sheet上的主要内容，但如果你坚持认为你可以在manifest.json内容脚本声明中使用"all_frames": true和"match_about_blank": true来制作它会自动在所有iframe中运行。

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

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

希望它可以帮助别人。

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

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

3 个答案: