how to inject iframe with popup.html from content script

Question

I want to inject popup.html to web content. Below is my think

... page content

<div> <--! injected content !-->
   <iframe src="chrome-extension:/21jk32j11k3kj11/popup.html">
   </iframe>
</div>

Is it possible to show popup.html in web content?

Answer 1

That's possible. When manifest version 2 is active (introduced in Chrome 18, required in Chrome 23), you have to include the page in the "web_accessible_resources" section of the manifest file though:

{ ...
    "web_accessible_resources": ["popup.html"],
  ...
}

The frame itself can be injected via a Content script, see the documentation for usage and examples:

// Within a content script:
var f = document.createElement('iframe');
f.src = chrome.extension.getURL('popup.html');
document.body.appendChild(f); // Append to body, for example.

chrome.extension.getURL returns the absolute URL of popup.html, eg chrome-extension://...32 letters.../popup.html.