Chrome扩展程序 - 访问iframe元素 [英] Chrome Extension - Access iframe Elements

问题描述

我使用内容脚本将 iframe 附加到页面，其中 src 设为 chrome.extension.getURL（myPage）。稍后在某些事件中，我想从框架中检索一些元素。我在内容脚本中尝试了以下代码：

  var textFrame = document .getElementById（ 'iframeId'）; 
 var text =（textFrame.contentDocument || textFrame.contentWindow.document）.getElementById（'someDivId'）; 
  

但会抛出以下错误：

不安全的JavaScript尝试使用URL访问框架
chrome-extension：//ipkjfhkdgodpcgpjepdjhcbfcbbbcpee/TopBar.html从
框架使用URL http://theInjectedPage.com/xxx/xxx/xxx 。域
协议和端口必须匹配

在清单文件 all_frames 设置为 true 。

我解决这个问题。

---

更新：这是我的清单文件的一部分：

 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] 
  

解决方案

权限，但我只是想知道为什么你从页面TopBar.html尝试访问框架的铬的错误？
是否通过content_script创建iframe？
和你给iframe的网址是什么？

你可以检查它打开的iframe中每个页面注入的代码示例。 p>

manifest.json
$ b

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

和 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）; 
  

我也上传了这个扩展示例，您可以从链接

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

解决方案

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

这篇关于Chrome扩展程序 - 访问iframe元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！