使用iframe通过Chrome扩展程序将本地HTML文件注入网页？

Question

I have a HTML file that I want to inject next to each result of a Google search result page from a Chrome extension.

I was wondering if I could use an iframe to load the HTML file?

This is instead of my current implementation that uses insertAdjacentHTML() in my Content Script and a horrible long string of HTML and inline CSS. Would much prefer to have a separate HTML file with its own CSS that I can just insert instead.

I tried:

chosenElements[i].insertAdjacentHTML('afterbegin', `<iframe src="/inject.html"></iframe>`);

but just get an iframe with a 404 page because it is looking in the ' https://www.google.com/index.html ' directory rather than where the file sits.

The inject.html file is in the same place as the index.html file in my build folder for the extension. How do I access it? Can I access it?

Answer 1

Have you tried with

src="inject.html"

instead of

src="/inject.html"