Question

so I’m creating this chrome extension by injecting a content script into the body:

this is my javascript:

test.js:

$(document).ready(function(){
   Url = chrome.extension.getURL('etc.html');
   link = '<iframe src="' + Url + '" id="frame" scrolling="no" frameborder="0px"></iframe>';
   $('body').prepend(link);
   alert($('.test').html());   
});

this is the content of etc.html which is supposed to go to the iframe

etc.html:

<div class="test">An html</div>

and this is my manifest.json

manifest.json:

{
   "content_scripts": [ {
      "all_frames": true,
      "js": [ "js/jquery.js", "js/test.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ],
   "description": "Testing",
   "name": "test",
   "permissions": [ "tabs", "http://*/*", "https://*/*", "notifications", "management", "unlimitedStorage", "bookmarks", "contextMenus", "cookies", "geolocation", "history", "idle" ],
   "version": "2.0.0.53"
}

the iframe was successfully inserted to the body, the iframe content appears, and I saw it through the chrome inspector…

but then when the js ran the alert($('.test').html()); line, it returned null instead of returning the html….how exactly do I access the contents inside the iframe when developing such extensions

I also tried $('#frame').contents().find('.test').html(); to no avail

Answer 1

I’m pretty sure you can’t do that.
Right now I can’t find anything online to support this but I remember having this issue. I think the reason for it being so is that other scripts and extensions wouldn’t mess with your etc.html.

What you can do is have javascript inside etc.html access and modify its DOM. If you then need it to communicate with the content script that injected the iframe you can do so by passing messages through your background page: http://code.google.com/chrome/extensions/messaging.html

For example you can do this with simple one-time requests:

etc.html

chrome.extension.sendRequest(msg)

backround.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    chrome.tabs.sendRequest(sender.tab.id, request);
});

contentscript.js

chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
    //do stuff
}

You could do similarly with postMessage and onMessage.
Let me know if you need more help. I use this technique extensively in my extension.