javascript - 如何检测 Gmail 中的键盘事件

Question

我正在编写一个浏览器扩展，需要将处理程序附加到所有页面上的 keyup 和 keydown 事件。我可以使用以下内容脚本代码让它很好地工作。

document.addEventListener("keydown",keyDown, true);      
document.addEventListener("keyup", keyUp, true);

不过我无法在 Gmail 中使用它。具体来说，在撰写新电子邮件的正文时，我无法让它工作。它在我测试过的其他任何地方都可以使用。我认为问题是因为 Gmail 在所有键盘事件上调用 stopPropagation 但很难调试它们的最小化代码。我认为将第三个参数设置为 true 会导致事件在 CAPTURE_PHASE 期间被捕获，但这不起作用。

在使用 Google Chrome 内容脚本在 Gmail 中编写新正文时，如何捕获 keyup 和 keydown 事件？

编辑:

我通过将 "all_frames": true, 添加到我的 list 来确保我的内容脚本被注入(inject)到 DOM 的所有 iframe 中。我什至尝试过使用以下代码:

document.addEventListener("DOMNodeInserted", function (event) {
     if(event.type === "DOMNodeInserted") {
        if(event.srcElement.nodeName === "IFRAME") {
        console.log(event.srcElement.nodeName + " iframe detected");
        event.srcElement.addEventListener("keydown", function(kevent) {
            document.dispatchEvent(kevent);
            }, true);
        event.srcElement.addEventListener("keyup", function(kevent) {
            document.dispatchEvent(kevent);
            }, true);
        
    }
}
},true);

这仍然不能解决 Gmail 的问题。

Answer 1

您的代码无效，因为 event.srcElement指的是<iframe>元素，而不是它的内容。要访问其内容文档，您必须等待加载框架(onload 或轮询)，然后使用 frame.contentDocument访问框架。

从 Chrome 37.0.1995.0 开始，您还可以使用 match_about_blank (使用 all_frames )在 about:blank 中插入内容脚本捕获事件并将其发送到父内容脚本的框架。

这是最初想法的一个实现示例(使用轮询):

manifest.json的相关部分:

  "content_scripts": [{
      "matches": ["*://mail.google.com/*"],
      "js": ["contentscript.js"],
      "run_at": "document_end"
  }],

contentscript.js

function keyDown(e) {console.log(e.which);}; // Test
function keyUp(e) {console.log(e.keyCode);}; // Test
(function checkForNewIframe(doc) {
    if (!doc) return; // document does not exist. Cya

    // Note: It is important to use "true", to bind events to the capturing
    // phase. If omitted or set to false, the event listener will be bound
    // to the bubbling phase, where the event is not visible any more when
    // Gmail calls event.stopPropagation().
    // Calling addEventListener with the same arguments multiple times bind
    // the listener only once, so we don't have to set a guard for that.
    doc.addEventListener('keydown', keyDown, true);
    doc.addEventListener('keyup', keyUp, true);
    doc.hasSeenDocument = true;
    for (var i = 0, contentDocument; i<frames.length; i++) {
        try {
            contentDocument = iframes[i].document;
        } catch (e) {
            continue; // Same-origin policy violation?
        }
        if (contentDocument && !contentDocument.hasSeenDocument) {
            // Add poller to the new iframe
            checkForNewIframe(iframes[i].contentDocument);
        }
    }
    setTimeout(checkForNewIframe, 250, doc; // <-- delay of 1/4 second
})(document); // Initiate recursive function for the document.

请注意，我使用轮询而不是 DOM 突变事件，因为后者 heavily reduces performance .