I’m trying to load iframe.html inside an iframe and append that iframe to the DOM of the current page from my chrome extension. I have done so and I am able to handle click events, get the frame element values(input,select box). Everything is fine till here. Now the problem is I couldn’t modify the content inside the iframe.html once I have inserted it into the DOM(To be more specific, I have a input box in iframe.html[which is appended to the DOM] with value as “XXXX” and now I want to change it to “YYYY” when user clicks on context menu of my extension).
I tried to get the input box value by using
$('#iframe_id').contents().find('input#input_id').val('YYYY')
(or)
window.frames['iframe_id'].document.getElementId('input_id').value
in my content.js but of no help.
console.log($('#iframe_id'))
prints the iframe Object in the console but unable to get the iframe document content. Is this the right way to get/modify the iframe content inserted by a chrome extension? or am I missing something here from chrome.* APIs
Any pointers on how to resolve this would be more helpful.
TIA,
Jagadeesh
As Mike Grace mentioned, I have inserted html instead of iframe and constructed the css such that it would work in any of the web pages. This would be a better approach in the long run.