Chrome extension inject html to specific div

Question

Im trying to make an extension for chrome that injects html code to specific div on a specific page.

This is the example page I want to inject some code: http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

So far I have made this: manifest.json:

{
"manifest_version":         2,
"content_scripts":          [ {
    "js":       [ "iframeInjector.js" ],
    "matches":  [   "http://netdna.webdesignerdepot.com/*/*/*"
    ]
} ],
"description":              "Inject html",
"name":                     "Inject html",
"version":                  "1",
"web_accessible_resources": ["test.html"]
}

test.html:

Test html code

iframeInjector.js:

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
document.body.insertBefore (iframe, document.body.openModal);

On the example page there is div called "openModal", how do I inject my html code into that div ?

Another question: Is there way to read page title to variable and use that variable in my html code which Im infecting ?

Thank you..

Answer 1

So there is a div with id="openModal" to which you want to append the iframe?

iframeInjector.js

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("test.html");
var yourDIV = document.getElementById("openModal");
yourDIV.appendChild(iframe);