GMail: Add a link next to each attachment download link

I'm working on a chrome extensions whose purpose is to add a "export to gdocs" link to each attachment in gmail.

I've already implemented part of the code which successfully adds the link next to the "download" link, but I'm facing with a problem I don't know how to solve.

The problem is: in a mail thread (with several replies), collapsed mails aren't affected by my script - and when they are expanded, the link is (as expected) not added.

The reason why that occurs is that collapsed mails are loaded at runtime when expanded - so when my script is executed on page load there's no link to add as the mail content hasn't been loaded yet.

I tried adding an update handler using the prototype framework and the sample code I found here:

http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/5ad539212ea07716?pli=1 (last post)

http://jsbin.com/utuvu

but it doesn't work - although the solution itself is valid and working out of gmail.

The partially working solution is implemented using a chrome.tabs onUpdate listener (registered in the background file), and some jquery (injected as content script) which:

selects tables having the "cr hf" css classes (which are the ones used to contain the attachment links)

$('table.cf.hr').each(function() {
    injectLink($(this));
});

for each one, looks up the download link, extracts some parameters from the download url, create a new link and adds next to the last link

function injectLink(table) {
    var downloadLink = table.find("td:last a:last");
    var exportToGdocsLink = downloadLink.clone().attr(...)...
    ...
    downloadLink.after(exportToGdocsLink).after("<span>&nbsp;&nbsp;&nbsp;</span>");
}

Has anybody implemented chrome extensions interacting with gmail? Any hint for me to figure out how to proceed?

UPDATE

The latest version of the code is this:

$('#canvas_frame').ready(function() { 
    var doc = frames['canvas_frame'].contentDocument; 
    $(doc).find('table.cf.hr').livequery(function() { 
        injectLink($(this)); 
    }); 
}); 

but 开发者_运维问答I've tried several "combinations" - this is the "closest to what expected" result. The canvas_frame is the iframe containing the entire gmail interface. The table having css classes cr hf contains the attachment links.

Thanks Antonio

.live() would be helpful only if you are catching events.

You can detect element creation with live query jquery plugin.

Pure javascript solution would be listening to DOMSubtreeModified or DOMNodeInserted events which fire whenever DOM changes (just need to be careful as there might be few hundreds of those at a time).