Imansible modificare l’elemento da iframe generato dall’estensione di Chrome

Sto lavorando su un’estensione di Chrome. Per ora, c’è uno script di contenuto che restituisce un XPath di elemento cliccato. Un altro script di contenuto aggiunge un iframe alla pagina html corrente. In questo iframe c’è un campo textarea che dovrebbe mostrare il percorso xpath element quando l’utente fa clic su di esso.

Sfortunatamente non funziona. xpath è generato correttamente (testato usando console.log(path) ma il comando:

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

Non altera la textarea . Sai dov’è il problema? Ho provato a cambiare l’ordine di bar.js e xpathget.js ma non è stato d’aiuto.

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(''); }); 

E l’iframe generato è:

 HERE IS THE BAR.HTML 

Questo è il bar.html nel caso in cui aiuti:

    Product Client                 

Product Client - Select the product price


Form Name

Questo è in console dopo: console.log($('#xh-bar').contents());

Uncaught SecurityError: Imansible leggere la proprietà ‘contentDocument’ da ‘HTMLIFrameElement’: Bloccato un frame con origine ” http://stackoverflow.com ” dall’accesso a un frame con origine “chrome-extension: // haifbndknpepdhjlcnmpoemlmomnidpe”. Il frame che richiede l’accesso ha un protocollo di “http”, il frame a cui si accede ha un protocollo di “chrome-extension”. I protocolli devono corrispondere.

Come già indicato sopra, non puoi accedere al DOM di iFrame da una pagina caricata da URL diversi da iFrame a causa di alcuni criteri di origine.

Ma puoi inviare un messaggio al tuo iFrame e elaborarlo lì per impostare il valore di textarea.

Puoi farlo in questo modo:

Invia un messaggio da 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('') ); ... 

In bar.html include il file js, che ascolta il tuo messaggio e imposta il valore 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) } ... 

È tutto 🙂

PS> È meglio ottenere il percorso verso le tue pagine di Chrome con chrome.extension.getURL('bar.html') invece di codificarlo: in questo caso puoi cambiare l’ID dell’applicazione senza problemi ed evitare molti problemi mentre supporti la tua applicazione.