Question

I’m creating a Chrome extension that uses key bindings (i.e. will use javascript keydown and keyup event handlers) via a content script. I’ve hit upon a snag while trying to get this to work with GMail, though.

The the handler function in the following code (content script) seems to trigger only when I chat with someone via GChat:

$(window).bind('keydown', function(e){console.log('yay!');});

Unfortunately, it doesn’t seem to activate anywhere else, including when I am trying to send an email. I looked into the GMail webpage source, and it turns out all of the content actually displayed resides in an iFrame with id canvas_frame, so I tried this:

$('#canvas_frame').content().live('keydown', function(e){console.log('yay!');});

and this:

$('#canvas_frame').content().find('body').live('keydown', function(e){
  console.log('yay!');
});

Unfortunately, that didn’t work either.

My manifest.json looks like this:

{
  "name": "extension",
  "version": "1.0",
  "description": "description",
  "background_page": "background.html",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "css": [],
      "js": [ 
              "main.js"
            ]
    }
  ],
  "all_frames": true,
  "permissions": [
    "http://*/*", "https://*/*"
  ]
}

I was wondering if anyone had a clue about what was going on, what’s the right way to do this with GMail, and if $('#canvas_frame').content().live(...) is the right way to go about it.

Thanks!

Answer 1

Your all_frames parameter is misplaced in manifest, it should be:

"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "all_frames": true,
      "js": ["main.js"]
    }
],

I would approach this problem by injecting content scripts into iframes themselves and doing all key bindings there. Identify URLs of those iframes and inject individual content scripts into each of them. For example:

"content_scripts": [
    {
      "matches": ["http://gmail.com/*"],
      "all_frames": false,
      "js": ["main.js"]
    },
    {
      "matches": ["http://gmail.com/iframe1.html"],
      "all_frames": true,
      "js": ["iframe1.js"]
    },
    {
      "matches": ["http://gmail.com/iframe2.html"],
      "all_frames": true,
      "js": ["iframe2.js"]
    }
],