Fetch inside content script fails with chrome-extension://invalid

Inside my content script, I resolve a URL and execute a fetch on it:

let url = chrome.runtime.getURL('/hints/heart.html')

console.log("url = " + url)

fetch(url)
    .then(r => r.text())
    .then(injectedContent => {
        // do stuff with injectedContent
    });

The URL is resolved correctly. I can see that from printing it to the console. The file there also exists.

However, fetch is returning an error saying that it's trying to call the URL chrome-extension://invalid.

I already added the path the web_accessible_resource in the manifest:

"web_accessible_resources": [
    {
      "resources": [ "/hints/*" ],
      "matches": [ "https://*.myurl.com/*" ]
    }
  ]

What am I missing?

Always reload your extension from chrome://extensions/ when you modify files like background.js or the manifest.json.

You can use the normal page refresh when you only modify html files and the js files linked to them (popup.html and popup.js for example).