Load html file from my firefox extension's directory

Question

TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?

I'm working on my first Firefox extension, for personal use.

So I setup my manifest.json to load /script/panel.js when any page of the site loads.

In panel.js, I would like to do something like:

const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);

But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.

Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.

Answer 1

Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages. https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources