Chrome扩展仅在页面刷新后生效的问题求助

大家好，我正在开发我的第一个Chrome扩展，核心功能是：当Salesforce案例列表的表格中出现我预设的关键词时，给对应的行（或列）应用我指定的颜色。目前功能本身是符合预期的，但遇到一个棘手的问题——每次打开新标签页进入目标页面时，必须手动刷新一次，扩展才会开始生效；而刷新之后，在当前标签页内就可以正常工作了。

我的代码文件 #

content.js #

chrome.storage.local.get(['preferences'], function (result) {
  const preferences = result.preferences || [];
  console.log('Opgeslagen voorkeuren:', preferences);

  if (preferences.length === 0) {
    console.log('Geen voorkeuren ingesteld.');
    return;
  }

  // Functie om Shadow DOM te doorzoeken
  const traverseShadowDOM = (node, callback) => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      if (node.shadowRoot) {
        callback(node.shadowRoot);
        node.shadowRoot.childNodes.forEach(child => traverseShadowDOM(child, callback));
      }
      node.childNodes.forEach(child => traverseShadowDOM(child, callback));
    }
  };

  // Pas kleuren toe op rijen, inclusief Shadow DOM
  const applyColorsToRows = () => {
    let rows = [];
    traverseShadowDOM(document.body, (root) => {
      const found = root.querySelectorAll('tr[data-row-key-value]');
      rows = rows.concat(Array.from(found));
    });

    if (rows.length > 0) {
      console.log('Case-rijen gevonden, toepassing gestart.');
      rows.forEach(row => {
        const statusCell = row.querySelector('td[data-label="Status"]');
        const statusSpan = statusCell?.querySelector('span[title]');
        if (statusCell && statusSpan) {
          preferences.forEach(preference => {
            if (statusSpan.textContent.trim() === preference.status) {
              if (preference.applyTo === 'column') {
                statusCell.style.backgroundColor = preference.bgColor;
                statusCell.style.color = preference.textColor;
              } else {
                row.style.backgroundColor = preference.bgColor;
                row.style.color = preference.textColor;
              }
            }
          });
        }
      });
    }
  };

  // Verbeterde retry-logica met backoff
  let retries = 0;
  const maxRetries = 10; // Maximaal 5 seconden (10 * 500ms)
  const retryInterval = setInterval(() => {
    applyColorsToRows();
    if (retries >= maxRetries) clearInterval(retryInterval);
    retries++;
  }, 500);

  // MutationObserver voor toekomstige wijzigingen
  const observer = new MutationObserver(applyColorsToRows);
  observer.observe(document.body, { childList: true, subtree: true });
});

manifest.js #

（注：文件内容为JSON格式，可能是笔误写成了manifest.js，实际应为manifest.json）

{
"manifest_version": 3,
"name": "BetterBetterLists for Salesforce",
"version": "1.0",
"permissions": [
  "storage"
],
"background": {
  "service_worker": "background.js"
},
"content_scripts": [
  {
    "matches": ["https://rogiers.lightning.force.com/lightning/o/Case/*"],
    "js": ["content.js"],
    "all_frames": true, 
    "run_at": "document_idle"
  }
],
"action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}
}

background.js #

chrome.runtime.onInstalled.addListener(() => {
    console.log('BetterLists for Salesforce is geinstalleerd!');
  });
  
  // Service worker ontvangt berichten van content scripts of popup
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'getPreferences') {
      chrome.storage.local.get(['status', 'color'], function(result) {
        sendResponse(result);
      });
      return true;  // Om te wachten op de async reactie
    }
  });

此外我还有一个用于扩展弹窗的HTML页面，但我认为它和当前问题无关，就不贴出来了。

希望有大佬能帮我找出问题所在，解决这个需要手动刷新才能生效的问题，非常感谢大家的时间！

备注：内容来源于stack exchange，提问作者robbe505