如何跟踪页面上iframe的更改？

Question

我需要跟踪iframe内div元素的更改。我可以访问的iframe内容，但这是整个附加页面（〜80-150 kb）。因此，我想达到所需的元素而不必每次都加载整个iframe内容进行比较。

$('#getTheElement').click(function(e) {
    var iframe = getIframe('#feed_iframe');
    var div = getDiv('photo');
});


function getIframe(iframe){
chrome.tabs.executeScript(null,{code: "document.querySelector(iframe).contentDocument.body.innerHTML"},function (results){
    var iframe = results[0];
    return iframe;
});
};

function getDiv(div){
chrome.tabs.executeScript(null,{code: 'Array.from(document.getElementsByClassName(div)).map(element => element.innerHTML)'},function (results){
    var div = results[0];
    return div;
});
};

在该iframe中，有一个 div 元素，其类别为照片。如果用户单击该div，则 img 标记将附加为该子标记并带有 src 链接。

所以想法是每次div中的孩子出现时都获得图像链接。