I am making a chrome extension (content script), and I have a json file I would like to include (and read from main js file).

Inside the manifest.json file, I have

"web_accessible_resources": [{
    "resources": ["data/info.json"],
    "matches": ["<all_urls>"]
}]

And in my main js file, I have

const jsonUrl = chrome.runtime.getURL('data/info.json');
console.log(jsonUrl);
fetch(jsonUrl)

Console prints out the path as expected chrome-extension://<extension-UUID>/data/info.json

However, upon fetch is called, I get error

GET chrome-extension://invalid/ net::ERR_FAILED

I also get TypeError: Failed to fetch, but I believe that is because of the URL issue listed above.

Also tried jQuery but no luck.

$.getJSON(jsonUrl), function(data) {
    console.log(data);
})

Why am I passing invalid chrome-extension url to fetch method?