Can't change element from iframe generated by Chrome Extension
<p>I'm working on a Chrome Extension. For now, there is one content script which returns an <strong>XPath</strong> of clicked element. Another content script adds an <code>iframe</code> into the current <code>html</code> page. In this <code>iframe</code> there is a <code>textarea</code> field which should show the <code>xpath</code> of the <code>element</code> when user clicks on it. </p>

<p>Unfortunately it does not work. The <code>xpath</code> is correctly generated (tested using <code>console.log(path)</code> but the command:</p>

<p><code>$('#xh-bar').contents().find('#product-path').val('some_val');</code></p>

<p>Doesn't alter the <code>textarea</code>. Do you know where is the problem? I've tried to change the order of <code>bar.js</code> and <code>xpathget.js</code> but it did not help.</p>

<p><strong>manifest.json</strong></p>

<pre><code>{
  "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": ["&lt;all_urls&gt;"],
      "js": ["jquery-3.1.1.min.js","xpathget.js","bar.js"]
    }
  ],
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "cookies",
    "&lt;all_urls&gt;"
  ],
  "web_accessible_resources": [
    "bar.html",
  ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
</code></pre>

<p><strong>xpathget.js</strong></p>

<pre><code>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 &lt; siblings.length; i++) {
        var sibling = siblings[i];
        if (sibling === element)
            return getPathTo(element.parentNode) + '/' + element.tagName + '[' + (ix + 1) + ']';
        if (sibling.nodeType === 1 &amp;&amp; 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];
}
</code></pre>

<p><strong>bar.js</strong></p>

<pre><code>$(document).ready(function () {
    $('body').append('&lt;iframe src="chrome-extension://some_id/bar.html" id="xh-bar" class=""&gt;&lt;/iframe&gt;');

});
</code></pre>

<p>And the generated iframe is:</p>

<pre><code>&lt;iframe src="chrome-extension://haifbndknpepdhjlcnmpoemlmomnidpe/bar.html" id="xh-bar" class=""&gt;HERE IS THE BAR.HTML&lt;/iframe&gt;
</code></pre>

<p>This is the <code>bar.html</code> in case it helps:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Product Client&lt;/title&gt;

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

    &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;script src="productspy.js"&gt;&lt;/script&gt;
    &lt;script src="xpathget.js"&gt;&lt;/script&gt;
    &lt;script src="jsplugins/jquery.cookie.js"&gt;&lt;/script&gt;
    &lt;script src="authentication.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;

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

            &lt;!-- Form Name --&gt;
            &lt;legend&gt;Form Name&lt;/legend&gt;

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

                &lt;/div&gt;
            &lt;/div&gt;

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

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

        &lt;/fieldset&gt;
    &lt;/form&gt;


&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This is in console after: <code>console.log($('#xh-bar').contents());</code></p>

<blockquote>
  <p>Uncaught SecurityError: Failed to read the 'contentDocument' property
  from 'HTMLIFrameElement': Blocked a frame with origin
  "<a href="http://stackoverflow.com">http://stackoverflow.com</a>" from accessing a frame with origin
  "chrome-extension://haifbndknpepdhjlcnmpoemlmomnidpe".  The frame
  requesting access has a protocol of "http", the frame being accessed
  has a protocol of "chrome-extension". Protocols must match.</p>
</blockquote>