无法从 Chrome 扩展生成的 iframe 更改元素答案

【问题标题】：Can't change element from iframe generated by Chrome Extension无法从 Chrome 扩展生成的 iframe 更改元素
【发布时间】：2017-02-10 16:29:09
【问题描述】：

我正在开发 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": ["<all_urls>"],
      "js": ["jquery-3.1.1.min.js","xpathget.js","bar.js"]
    }
  ],
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "cookies",
    "<all_urls>"
  ],
  "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 src="chrome-extension://some_id/bar.html" id="xh-bar" class=""></iframe>');

});

而生成的iframe是：

<iframe src="chrome-extension://haifbndknpepdhjlcnmpoemlmomnidpe/bar.html" id="xh-bar" class="">HERE IS THE BAR.HTML</iframe>

这是bar.html，以防万一：

<!doctype html>
<html>
<head>
    <title>Product Client</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="bootstrap/html5shiv.js"></script>
    <script src="bootstrap/respond.min.js"></script>
    <script src="bootstrap/usebootstrap.js"></script>

    <script src="popup.js"></script>
    <script src="productspy.js"></script>
    <script src="xpathget.js"></script>
    <script src="jsplugins/jquery.cookie.js"></script>
    <script src="authentication.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

    <link href="theme/bootstrap.css" rel="stylesheet">
    <link href="theme/usebootstrap.css" rel="stylesheet">
</head>
<body>
<div class="smaller">
    <h1>Product Client - Select the product price</h1>
    <hr>
    <form class="form-horizontal">
        <fieldset>

            <!-- Form Name -->
            <legend>Form Name</legend>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Product Name</label>
                <div class="col-md-4">
                    <input id="textinput" name="textinput" type="text" placeholder="Nissan Patrol"
                           class="form-control input-md" required="">

                </div>
            </div>

            <!-- Textarea -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="price">Price</label>
                <div class="col-md-4">
                    <textarea class="form-control" id="product-spy-price" name="price" readonly>This will show the price</textarea>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="submit">Send product</label>
                <div class="col-md-4">
                    <button id="submit" name="submit" class="btn btn-primary">Send</button>
                </div>
            </div>

        </fieldset>
    </form>


</div>
</body>
</html>

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

未捕获的安全错误：无法读取“contentDocument”属性来自“HTMLIFrameElement”：阻止了具有原点的框架 “http://stackoverflow.com”来自访问具有原点的框架 “铬扩展：//haifbndknpepdhjlcnmpoemlmomnidpe”。框架请求访问具有“http”协议，被访问的帧有一个“chrome-extension”协议。协议必须匹配。

【问题讨论】：

我的猜测可能是'same origin policy'问题。 $('#xh-bar').contents() 登录到控制台时返回什么？
@charlietfl 试图记录它并返回 Ucaught SecurityError - 我在问题的底部添加了整个错误。我在 SO 上试过了。
与'同源策略'基本相同。您将需要一种不同于不需要访问 iframe 的方法。或许可以使用postMessage API。还要查看在 iframe 中设置 document.domain

标签： javascript jquery html iframe google-chrome-extension

【解决方案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)
}
...

就是这样:)

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

【讨论】：