Content script receives messages from background script only after page refresh

Question

The background script is triggered perfectly based on onHistoryStateUpdated.
The issue is that once the extension is installed, the content script only receives the message sent by chrome.tabs.sendMessage after I refresh the page.

If I install the extension and don't reload the page, the background script calls sendMessage on every page navigation, but the message doesn't arrive to the content script - no matter how many many times I navigate between different pages.

I guess it means the content script is not running. Is this correct?
If so, how can I make it run so it will work?

---

background.js

chrome.webNavigation.onHistoryStateUpdated.addListener(onNavigation, { url: [{ website.com }] });

async function onNavigation(details) {
    const { url, tabId } = details;
    const message = { id: 'abc', url };
    console.log(message); // prints on every navigation without page reload
    chrome.tabs.sendMessage(tabId, message);
}

content.js

chrome.runtime.onMessage.addListener(onTriggerReceived);

async function onTriggerReceived(message, sender, sendResponse) {
    console.log(message); // only prints after page reload
    ...
}

manifest.json

  "permissions": [
    "storage",
    "cookies",
    "webNavigation",
    "tabs",
    "https://website.com/*"
  ],
  "background": {
    "scripts": [
      "build/background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "https://website.com/*"
      ],
      "js": [
        "build/content.js"
      ],
      "css": [
        "build/css/content.css"
      ]
    }
  ],