Question

What I’m trying to do is trigger an event from a web page and catch it inside a content script injected in that webpage. Both the page and the content script have their one instance of jQuery loaded, they don’t have access to each other’s variables but have access to the same DOM.

Is it possible to do this using jQuery events? How do they actually work in the background?

Page:

$('#elementID').trigger('stateChange', state)

Content script:

$('#elementID').on('stateChange', function(event, state) {...})

Answer 1

This is not doable with jQuery events. The easiest way to do it is by using the HTML5 api window.postMessage(). There’s a good description and example on this in the Google Chrome extensions documentation: http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication