Question

I want to trigger an event when a specific element appears on a page (I don’t control the source page – this isa Chrome extension)

I have read the docs about JQuery 1.7’s on() method. However it seems to be about waiting for a specific event to be triggered on the selector – click events – rather than just generally when an element matching the selector is added.

Equivalent in the now-unmaintained livequery plugin:

$('a').livequery(function () {
  console.log('yaay a link was added');
})

Answer 1

If this is a chrome extension designed for Chrome 18+ then you can use a feature from the DOM4 specification called Mutation Observers. This assigns a callback that is fired when ever the DOM is changed, which you can then use to do what ever you want. It’s still pretty new, but there is a bit more info here

Code sample from that page:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

Update: Also just noticed a library based on this API, which might be easier to use.