Chrome Extension - Access iframe Elements

Question

I'm appending an iframe to a page using content script with src set to chrome.extension.getURL(myPage). Later on some event, I want to retrieve some element from the frame. I tried the following code in content script:

var textFrame = document.getElementById('iframeId');
var text = (textFrame.contentDocument || textFrame.contentWindow.document).getElementById('someDivId');  

but it throws the following error:

Unsafe JavaScript attempt to access frame with URL chrome-extension://ipkjfhkdgodpcgpjepdjhcbfcbbbcpee/TopBar.html from frame with URL http://theInjectedPage.com/xxx/xxx/xxx. Domains, protocols and ports must match.

In manifest file all_frames is set to true.

Please help me to resolve this.

---

Update: Here is a part of my manifest file:

 "permissions": [
   "tabs",
   "chrome://favicon/",
   "http://*/*", 
   "https://*/*"
 ],
 "background": {
    "scripts": ["Javascript/background.js"]
  },
 "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["Javascript/References/jquery-1.7.min.js","Javascript/content_script.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
  "web_accessible_resources": ["TopBar.html","Javascript/TopBar.js","Javascript/References/jquery-1.7.min.js"]

Answer 1

There is nothing wrong with your permissions, but i'm just wondering why you got this error from chrome that the page TopBar.html is trying to access the frame ?? are you creating the iframe via content_script? and what is the url you are giving to the iframe ?

you may check this code sample it injects in each page you are opening an iframe.

manifest.json

{
  "name":"example",
  "description": "",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [],
  "content_scripts": [
    {
      "all_frames": true,
      "matches": ["http://*/*","https://*/*"],
      "css": [],
      "js": ["content_script.js"]
    }]
}

and the content_script.js

var iframe= document.createElement("iframe");
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "200px;");
iframe.setAttribute("src", "http://gamalshaban.me/blog");
document.body.appendChild(iframe);

also I've uploaded this sample extension and you can download it from this link