如何推迟HTML渲染，避免内容脚本执行前页面出现偏移？

你的问题核心在于：虽然设置了run_at: "document_start"，但代码中依赖异步回调_get_current_tab_domain_selectors获取选择器，等回调执行时，DOM已经开始渲染，导致目标元素短暂显示后被移除，出现偏移。

可行的解决方案 #

1. 先通过CSS提前隐藏目标元素（最简便有效）

在content_scripts中添加CSS文件，让目标元素在渲染前就被隐藏，彻底避免闪烁偏移：

• 修改Manifest V2配置：

"content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["css/hide_ads.css"], // 新增CSS注入
    "js": ["background_scripts/ad_blocker_by_selectors.js"],
    "run_at": "document_start"
}],

• 创建hide_ads.css文件，把你需要移除的元素选择器全部加入：

/* 替换成你的实际选择器，多个用逗号分隔 */
.ad-banner, .sidebar-ad, #sponsored-content {
    display: none !important;
}

这样CSS会在页面渲染前生效，元素不会被渲染出来，之后JS再执行移除操作即可。

2. 改用MutationObserver实时拦截元素

利用MutationObserver监听DOM变化，目标元素一被添加到DOM就立刻移除，比异步回调后的querySelectorAll更及时：
修改你的JS代码：

obj._remove_ads_elements = function(){
    obj._get_current_tab_domain_selectors(function(selectors){
        const selectorString = selectors.join(', ');
        
        // 处理已存在的元素（如果有的话）
        const existingElements = document.querySelectorAll(selectorString);
        existingElements.forEach(el => el.remove());
        
        // 监听DOM新增节点
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType !== 1) return; // 只处理元素节点
                    
                    // 检查当前节点是否匹配选择器
                    if (node.matches(selectorString)) {
                        node.remove();
                    } else {
                        // 检查子节点中是否有匹配的元素
                        const childMatches = node.querySelectorAll(selectorString);
                        childMatches.forEach(el => el.remove());
                    }
                });
            });
        });
        
        // 启动监听，覆盖整个DOM树
        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });
    });
};

3. 优化选择器获取的异步逻辑

如果_get_current_tab_domain_selectors是从Chrome存储或后台获取数据，尽量缩短等待时间：

• 可以把常用选择器直接内置到content script中，避免异步请求；
• 如果必须异步，考虑在扩展启动时提前把选择器缓存到内存，减少content script的等待时间。

关于延迟HTML渲染 #

Chrome不支持直接延迟整个页面的渲染，但通过上述方法，要么提前隐藏元素，要么实时拦截移除，都能达到“元素不被渲染”的效果，等同于避免了渲染偏移。

内容的提问来源于stack exchange，提问作者mohammad