每当在 Gmail 中收到新电子邮件时，都会删除自定义 DOM 元素图标、CSS

问题描述

我有一项任务是更改 Gmail 收件箱的行 UI 并添加图标以使其看起来更好，但是每当我使用 javascript 通过 DOM 添加时，它都会显示。

但是当收到新电子邮件时，DOM 会消失我当前的 CSS 和所有行中的图标（我用红色突出显示）。每当我收到新电子邮件时，Google 都会刷新整个表格，并将我当前的更改从 DOM 中删除。

有什么办法不会在 Gmail 重新加载时更改不会在 DOM 中消失？

更新

每当收到新电子邮件时，我都可以向该行添加更改，因为 Mutation 观察者观察到添加了一个带有 TR 的节点。但问题是，每当收到新电子邮件时，Gmail 都会替换一大块 5-10 行并删除我的所有更改，而我无法捕捉到在 DOM 中所做的更改。

    function getChildrenById(node,id) {
    for (const child of node.children) {
        if(child.id === id) {
            return child;
        }
    }
    return null;
}
function onMutation(mutations) {
    const found = [];
    for (const { removednodes } of mutations) {
        for (const node of removednodes) {
            if (!node.tagName) continue; // not an element
            // debugger
            if (node.tagName === 'TR') {
                console.log(node);
                debugger
                if (node.getElementsByClassName("yX xY") && !getChildrenById(node,'place_icon')){
                    node.getElementsByClassName("yX xY")[0].insertAdjacentHTML("beforeend","<div id='place_icon'>hello&nbsp;</div>");
                }
            }
            if (node.id === 'place_icon') {
                debugger
            }
            if (node.classList.contains('yX') && node.classList.contains('xY')) {
                node.insertAdjacentHTML("beforeend","<div id='place_icon'>hello&nbsp;</div>");
                console.log(node);
            }
        }
    }
}
tableDivContainer = $('.BltHke.nH.oy8Mbf.aE3.S4');
const observer = new MutationObserver(onMutation);
observer.observe(tableDivContainer,{
    childList: true,attributes: true,characterData: true,subtree: true,attributeOldValue: true,characterDataOldValue: true
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）