无法更改Chrome扩展程序生成的iframe中的元素

我正在开发Chrome扩展程序。 目前，有一个内容脚本返回一个点击元素的XPath 。 另一个内容脚本将iframe添加到当前的html页面中。 在这个iframe有一个textarea字段，当用户点击它时，它应该显示该element的xpath 。

不幸的是它不起作用。 正确生成xpath （使用console.log(path)测试但命令：

$('#xh-bar').contents().find('#product-path').val('some_val');

不改变textarea 。 你知道问题出在哪里吗？ 我试图改变bar.js和xpathget.js的顺序，但它没有帮助。

的manifest.json

 { "manifest_version": 2, "name": "Product", "description": "This is a plugin collaborating with product.com", "version": "1.0", "browser_action": { "default_icon": "spy-icon.png", "default_popup": "popup.html", "default_title": "Click here!" }, "icons":{ "64":"spy-icon.png" }, "background": { "scripts": ["authentication.js"] }, "content_scripts": [ { "matches": [""], "js": ["jquery-3.1.1.min.js","xpathget.js","bar.js"] } ], "permissions": [ "activeTab", "https://ajax.googleapis.com/", "cookies", "" ], "web_accessible_resources": [ "bar.html", ], "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'" } 

xpathget.js

 document.onclick = function (event) { if (event === undefined) event = window.event; // IE hack var target = 'target' in event ? event.target : event.srcElement; // another IE hack var root = document.compatMode === 'CSS1Compat' ? document.documentElement : document.body; var mxy = [event.clientX + root.scrollLeft, event.clientY + root.scrollTop]; var path = getPathTo(target); var txy = getPageXY(target); alert(path); $('#xh-bar').contents().find('#product-spy-price').val('some_val'); # THIS SHOULD ALTER THE TEXTAREA } function getPathTo(element) { if (element.id !== '') return 'id("' + element.id + '")'; if (element === document.body) return element.tagName; var ix = 0; var siblings = element.parentNode.childNodes; for (var i = 0; i < siblings.length; i++) { var sibling = siblings[i]; if (sibling === element) return getPathTo(element.parentNode) + '/' + element.tagName + '[' + (ix + 1) + ']'; if (sibling.nodeType === 1 && sibling.tagName === element.tagName) ix++; } } function getPageXY(element) { var x = 0, y = 0; while (element) { x += element.offsetLeft; y += element.offsetTop; element = element.offsetParent; } return [x, y]; } 

bar.js

 $(document).ready(function () { $('body').append(''); }); 

生成的iframe是：

 HERE IS THE BAR.HTML 

这是bar.html ，以防它有帮助：

                     
 
Product Client - Select the product price
 
 
 
  
Form Name
  
 Product Name 
  
 
  
 Price 
 This will show the price 
 
  
 Send product 
 Send 
 
 
 
 
   

这是在控制台之后： console.log($('#xh-bar').contents());

未捕获的SecurityError：无法从’HTMLIFrameElement’读取’contentDocument’属性：阻止具有原点“ http://stackoverflow.com ”的框架访问具有源“chrome-extension：// haifbndknpepdhjlcnmpoemlmomnidpe”的框架。 请求访问的帧具有“http”协议，被访问的帧具有“chrome-extension”协议。 协议必须匹配。

Answer 1

正如上面已经回答的那样 – 由于某些原始策略，您无法从不同于iFrame的URL加载的页面访问iFrame的DOM。

但是您可以向iFrame发送消息并在那里处理它以设置textarea的值。

你可以这样做：

从xpathget.js发送消息

 ... // Replace your setter // $('#xh-bar').contents().find('#product-spy-price').val('some_val'); //# THIS SHOULD ALTER THE TEXTAREA // with var win = document.getElementById("xh-bar").contentWindow win.postMessage( {"command":"click","value":path}, chrome.extension.getURL('') ); ... 

在bar.html中包含js文件，该文件侦听您的消息并设置textarea值：

 ... function listener(event){ if("command" in event.data && event.data.command=='click') { console.log(document.getElementById('product-spy-price').value=event.data.value); } } if (window.addEventListener){ addEventListener("message", listener, false) } else { attachEvent("onmessage", listener) } ... 

就这样 ：）

PS>最好使用chrome.extension.getURL('bar.html')获取chrome页面的路径而不是硬编码 – 在这种情况下，您可以毫无问题地更改应用程序ID，并在支持您的应用程序时避免许多麻烦。