Load iframe into the page, using Chrome Extension content script

Question

I am able to add HTML/CSS dynamically into the page using a content script. But I tried adding an iframe tag, and ran into a little bit of trouble.

Here is my code:

  const myIFrame = `
    <iframe src="${modalIFrameURL}"></iframe>
  `;
  let div = document.createElement('div');
  div.style.zIndex = 9999999;
  div.innerHTML = myIFrame;
  document.body.insertBefore(div, document.body.firstChild);

note the modalIFrameURL value is:

chrome-extension://omelijcoklpokoeobkpepoipjpbakoeo/modal-iframe.html

This is what I get at the top left of the page:

If I hover over the gray fail box, it says:

Requests to the server have been blocked by an extension.

Does anyone know how to load an iframe from a content-script? What I am looking to do is load an HTML file from my Chrome Extension codebase into that iframe.

Answer 1

I ran into this a few weeks ago. I found that adding a "web_accessible_resources" section to my manifest.json file resolved it.

From what you are calling out, it should look like:

"web_accessible_resources": [
    "modal-iframe.html"
],

https://developer.chrome.com/extensions/manifest/web_accessible_resources

Just make sure that you are including "modal-iframe.html" in your extension build directory.

Hope that helps.