Chrome extension only working after a refresh of the page

Im making my first ever chrome extension, the idea is: when a table in my salesforce cases contain any word i give in, it goes in a color i chose for that word.

The whole things works like i want to, the only problem im having is that i first need te press refresh when i open a new tab. After clicking refresh once, it keeps working in that tab.

This is my 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 });
});

This is manifest.js:

{
"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"
  }
}

}

my 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
    }
  });

Then i have a html page for the popup when its clicked, but i wont share that bcs its not important i think.

If anyone would be able to help i would be really greatful!

Thank you for your time!

Robbe