How can I implement publish / subscribe “pattern” in javascript between a website and a google chrome extension?

Question

I'm trying to implement a pub/sub pattern between a website and a google chrome extension. Most of my experimentation thus far has been using jQuery due to its strong bind/trigger syntax but I've been having little luck.

Background: I'm working with an open source, Ruby/Rails-based Pomodoro Technique implementation. I've modified the site's code to expose its activity using jQuery's $.trigger syntax to publish observable events for the start of a timer session and the end of a timer session. Those triggers work in so far as I can trace the execution into the jQuery event code. So the site is the publisher of a couple of relevant events.

I've implemented the listener/subscriber end of the transaction in a google chrome extension by loading jquery and using the .bind() syntax to bind to the custom events being published by the site. The extension is loading for the site and has permissions set for all paths within the url for the site.

From the publication side I've tried both $.event.trigger() and $(document).trigger() to be as general as possible, on the subscriber side I've tried binding to several relevant elements, the most general being $(document).bind()

When I observe the custom event binding by pausing execution after the bind calls in the extension are executed and analyze the results of console.dir($(document).data('events')); I see the custom events I'm trying to subscribe to in the list.

However when I analyze the results of console.dir($(document).data('events')); just before triggering the custom event on the website side, the requisite event handlers do not appear in the list.

Am I missing something obvious in how this should work?

p.s. I should note that if I bind directly to the 'click' event on the elements that trigger the changes my extension code work perfectly, but the DOM of the site changes during execution so the bindings break after not too long so I was hoping that some sort of pub-sub mechanism might be more sensible.

EDIT

As noted in my response to @ChrisNZL's answer, I've tried .live() instead of .bind() and see the same behavior.

Answer 1

How are you interacting between the site and the extension?

Note that content scripts you inject through the extension APIs can't access the JavaScript of the main page, so there's no way you can get at the custom events you export in your jQuery code.

A workaround to this is to use ordinary global scope script injection (ie. append a script tag to the main body). Have you tried doing this?

Answer 2

Have you looked at jQuery's .live()? Acts like .bind() but attaches "a handler to the event for all elements which match the current selector, now and in the future", meaning bindings shouldn't break.