javascript - Chrome Extension - Access iframe Elements - Stack Overflow

admin管理员组

文章数量:1414605

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 . 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"]

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./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"]

• javascript
• google-chrome
• iframe
• google-chrome-extension

Share Improve this question Follow edited Jul 12, 2012 at 7:38 NaveenBhat asked Jul 9, 2012 at 12:37 NaveenBhatNaveenBhat 3,32644 gold badges4040 silver badges4848 bronze badges 6

• is the code to get the element running in the content script, or background/popup.js? – Dan Smith Commented Jul 9, 2012 at 12:57
• its running in content script. – NaveenBhat Commented Jul 9, 2012 at 13:01
• Is the html file listed as web accessible in the manifest? code.google./chrome/extensions/… – Dan Smith Commented Jul 9, 2012 at 13:09
• @Bulk - yes it is listed in web_accessible_resources. – NaveenBhat Commented Jul 9, 2012 at 13:14
• @NaveenBhat Hi Naveen - Just wondering if you ever found the answer to this question. Thanks . David – David Dehghan Commented Sep 22, 2015 at 9:23

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： javascriptChrome ExtensionAccess iframe ElementsStack Overflow