You can use user scripts to achieve your goal. I made an examle siteone.com - a page that has input, button, iframe(looks at sitetwo.com). On a button click a value of the input from siteone.com shows in input from sitetwo.com. To install userscript you may use browser extensions Tampermonkey for Chrome and Safari, or Greasemonkey for Firefox. For communication between page and iframe I used Window.postMessage look documentation. If you need javascript libraries, you can use @require meta block link.
siteone.com index.html
<html>
<head>
</head>
<body>
<input id="parent-input" type="text"/>
<button id="send-data-to-iframe">Send data to iframe</button>
<br /><br />
<iframe id="my-iframe" style="border:1px solid red; height:50px; width:200px;" src="http://sitetwo.com:8080">
</iframe>
<script>
var win = document.getElementById("my-iframe").contentWindow;
document.getElementById("send-data-to-iframe").onclick = function(){
win.postMessage(
document.getElementById("parent-input").value,
"http://sitetwo.com:8080" // target domain
);
return false;
}
</script>
</body>
sitetwo.com index.html
<html>
<head>
</head>
<body>
<input id="iframe-input" type="text"/>
</body>
myUserJS.user.js
// ==UserScript==
// @name myUserJS
// @license MIT
// @version 1.0
// @include http://sitetwo.com*
// ==/UserScript==
(function (window, undefined) {
var w;
if (typeof unsafeWindow != undefined) {
w = unsafeWindow
} else {
w = window;
}
// extended check, sometimes @include section is ignored
if (/http:\/\/sitetwo.com/.test(w.location.href)) {
function listener(event){
document.getElementById("iframe-input").value = event.origin + " send: " + event.data;
}
if (w.addEventListener){
w.addEventListener("message", listener,false);
} else {
w.attachEvent("onmessage", listener);
}
}
})(window);
