Chrome扩展：如何提前加载用户自定义CSS避免视觉闪烁？

核心限制说明 #

manifest.json里直接引用的CSS是静态资源，无法直接加载基于用户chrome.storage动态生成的规则——因为manifest在扩展安装/加载时就固定了，没法实时读取用户设置来修改引用的CSS内容。

可行的解决方案 #

1. 优化document_start阶段的内联CSS注入 #

你之前尝试的runAt: document_start可能是注入方式不对，要在DOM开始构建前就把CSS插入到文档最前端：

// content-script.js（已配置runAt: document_start）
(async () => {
  // 读取用户存储的设置
  const { hideTopBar } = await chrome.storage.sync.get('hideTopBar');
  
  // 创建style标签并插入到文档根元素最前面
  const style = document.createElement('style');
  style.textContent = hideTopBar ? '.top-bar { display: none !important; }' : '';
  document.documentElement.insertBefore(style, document.documentElement.firstChild);
})();

这里的关键是直接操作document.documentElement，此时DOM还未开始渲染，样式会被优先解析，从根源避免闪烁。

2. 用chrome.webNavigation提前注入CSS #

在background脚本里监听页面导航事件，在页面加载前就根据用户设置注入样式：

// background.js
chrome.webNavigation.onBeforeNavigate.addListener(async (details) => {
  // 只处理主页面框架
  if (details.frameId !== 0) return;
  
  const { hideTopBar } = await chrome.storage.sync.get('hideTopBar');
  if (hideTopBar) {
    chrome.tabs.insertCSS(details.tabId, {
      code: '.top-bar { display: none !important; }',
      runAt: 'document_start',
      cssOrigin: 'user' // 提升样式优先级，确保覆盖页面原有规则
    });
  }
});

// 监听用户设置变化，实时更新逻辑
chrome.storage.onChanged.addListener(async (changes) => {
  if ('hideTopBar' in changes) {
    // 可主动刷新当前页面或重新注入样式
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (tab) {
      chrome.tabs.reload(tab.id);
    }
  }
});

这种方式能让CSS在页面资源开始加载前就生效，完全消除闪烁，还能实时响应用户设置的变更。

3. 声明式内容规则（适合固定场景） #

如果你的隐藏规则是针对特定域名或页面的，可以用声明式规则让Chrome提前应用样式：

// background.js
chrome.runtime.onInstalled.addListener(async () => {
  const { hideTopBar } = await chrome.storage.sync.get('hideTopBar');
  if (hideTopBar) {
    chrome.declarativeContent.setRules([{
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: { hostContains: '.' } // 匹配所有页面，可自定义域名
        })
      ],
      actions: [
        new chrome.declarativeContent.AddCss({ css: '.top-bar { display: none !important; }' })
      ]
    }]);
  }
});

注意：这种方式的规则是静态的，用户修改设置后需要重新调用setRules更新。

关键注意事项 #

• 所有注入的CSS必须加!important，确保优先级高于页面原有样式，避免被覆盖。
• 读取storage优先用sync，比local读取速度更快，更适合页面加载初期的操作。
• 多个隐藏规则要合并成一个CSS字符串一次性注入，减少DOM操作开销。

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