Can't load html file from Chrome extension file system - google-chrome-extension

Question

I'm trying to load an HTML file from the file system of my Chrome extension. I've added "modal.html" as a web accessible resource in my manifest:
{
"name": "Test Extension",
"action": {},
"manifest_version": 3,
"version": "0.1",
"description": "Just learning for now",
"permissions": [
"activeTab",
"scripting",
],
"background": {
"service_worker": "background.js"
},
"web_accessible_resources": [
{
"resources": [ "modal.html" ],
"matches": [ "https://mypage.co.uk/*" ]
}
]
}
My background.js file tries to load modal.html with an xhr:
function initPage() {
let node = document.createElement("div");
node.setAttribute("id", "mySpecialId");
document.body.appendChild(node);
var xhr = new XMLHttpRequest();
xhr.open("GET", chrome.runtime.getURL('modal.html'), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("mySpecialId").innerText = xhr.responseText;
}
}
xhr.send();
}
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: initPage
});
});
I get the error:
Denying load of chrome-extension://lmdjgmkmficfccbahcpgnmaplajdljid/modal.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I'm sure this is a really basic problem, but I just can't figure it out.

Answer 1

I got this working by adding the use_dynamic_url key in the web_accessible_resources declaration:
"web_accessible_resources": [
{
"resources": [ "modal.html" ],
"matches": [ "https://www.mypage.co.uk/*" ],
"use_dynamic_url": true
}
]
I don't yet understand why this worked though!
Edit: This was a bug in Chrome. The original code was correct and worked after a reboot.