How to get chrome extension hotkey to work with gmail, yahoo mail etc?

Question

I am using the following code to implement a hotkey for my Chrome extension:

// content script:
  window.addEventListener("keydown", function(event) {
      if (event.ctrlKey && event.keyCode == 81) {alert('Ctrl+Q Pressed!');}
    }, false);

Since inserting the following line in the manifest file it has worked in most situations, even when iFrames are selected:

...
  "content_scripts": [
    {
      "all_frames": true
...

For example with http://danish.typeit.org, the hotkey even now works when typing with that and facebook personal messages too. Everywhere it seems except when composing emails using gmail, yahoo mail or gmx. While the composition box is selected, the hotkey doesn't work. This is a disappointment as I was hoping people would use my extension to aid with writing emails. And Twitter, it does not work when typing on Twitter, either.

Answer 1

I think the reason that the content script is not being loaded for the editor iframe even when you have all_frames specified is that the content scripts only get applied to iframes that are present in the markup when the containing page is loaded.

In the case of the gmail page, there are multiple iframes on the page, some that are present in the markup of the containing page (which the content script gets applied to) and then the one for the editor, which is created by JavaScript after the page is loaded.

Even if you were to try and wait for the JavaScript on the page to load the iframe for the editor the JavaScript in the content script would not be able to access it because accessing the contentWindow object of an iframe is not allowed in content scripts.

A long shot might be to inject a JavaScript file into the DOM that then executes the logic you have in the content script.

The content script might be something like:

document.body.appendChild(document.createElement("script")).src = "http://external/file/javascript.js";

Then the contents of the remote JavaScript file could try and get access to the editor iframe, you might need to use a setInterval until the element is created.

// These are the IDs gmail uses, each mail app would be different
document.getElementById("canvas_frame").contentWindow.document.getElementById(":nt")