GMail：在每个附件下载链接旁边添加一个链接

Question

我正在开发一个 chrome 扩展，其目的是为 gmail 中的每个附件添加一个“导出到 gdocs”链接。

我已经实现了成功在“下载”链接旁边添加链接的部分代码，但我遇到了一个我不知道如何解决的问题。

问题是：在一个邮件线程（有多个回复）中，折叠的邮件不受我的脚本的影响 - 当它们展开时，链接（如预期的那样）未添加。

发生这种情况的原因是折叠的邮件在展开时会在运行时加载 - 所以当我的脚本在页面加载时执行时，由于邮件内容尚未加载，因此没有要添加的链接。

我尝试使用原型框架和我在此处找到的示例代码添加更新处理程序：

http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/5ad539212ea07716?pli=1（最后发帖）

http://jsbin.com/utuvu

但它不起作用 - 尽管解决方案本身是有效的并且可以使用 gmail。

部分工作的解决方案是使用 chrome.tabs onUpdate 监听器（在后台文件中注册）和一些 jquery（作为内容脚本注入）实现的：

选择具有“cr hf”css 类的表（用于包含附件链接的表）

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

对于每一个，查找下载链接，从下载 url 中提取一些参数， 创建一个新链接并添加到最后一个链接旁边

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>");
}

有人实现了与 gmail 交互的 chrome 扩展吗？有什么提示可以让我弄清楚如何进行吗？

更新

最新版本的代码是这样的：

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

但我尝试了几种“组合”——这是“最接近预期”的结果。 canvas_frame 是包含整个 gmail 界面的 iframe。具有 css 类cr hf 的表包含附件链接。

谢谢 安东尼奥

Answer 1

.live() 只有在您捕捉事件时才会有所帮助。

您可以使用live query jquery 插件检测元素创建。

纯 javascript 解决方案将监听 DOMSubtreeModified 或 DOMNodeInserted events，只要 DOM 更改就会触发（只需要小心，因为一次可能有数百个）。