omarstreak · June 8, 2016 18:55
diff --git a/content.js b/content.js
 /* this file is the "app" file that loads the sdk and brings up the iframe */

 function log() {
 	console.log.apply(console, ['iframe-test'].concat(Array.prototype.slice.call(arguments)));
 }

 InboxSDK.load(1, 'iframe-test').then(function(sdk) {
 	sdk.Compose.registerComposeViewHandler(function(composeView) {
 		composeView.addButton({
 			title: "iframe test",
 			type: 'MODIFIER',
 			onClick: function() {
 				var iframe = document.createElement('iframe');
 				iframe.onload = function() {
 					iframe.contentWindow.postMessage("greeting", "*");
 				};
 				function modalMessageHandler(event) {
 					if (event.origin.match(/^chrome-extension:\/\//)) {
 					  //make sure that the message is coming from an extension and you can get more strict that the
 					  //extension id is the same as your public extension id
 						if (event.data === 'close') {
 							console.log('got close event from iframe');
 							//modal.close();
 						} else if (/* other event data */) {
 							
 						}
 					}
 				}
 				window.addEventListener('message', modalMessageHandler, false);
 				iframe.src = chrome.runtime.getURL('iframe.html'); //load the iframe.html that is in the extension bundle

 				var modal = sdk.Modal.show({
 					el: iframe
 				});
 				modal.on('destroy', function() {
 					window.removeEventListener('message', modalMessageHandler, false);
 				});
 			}
 		});
 	});
 });
diff --git a/iframe.html b/iframe.html
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="iframe.js"></script>
 </head>
 <body>
  <p>iframe.html
 </body>
 </html>
diff --git a/iframe.js b/iframe.js
 /* 
 this script is in the bundle and gets loaded by iframe.html
 it acts as a bridge between the extension javascript and the actual remote iframe 
 we want to load
 */
 function main() {
  var iframe = document.createElement('iframe');

  iframe.onload = function() {
    iframe.contentWindow.postMessage("greeting", 'https://www.streak.com');
  };

  window.addEventListener('message', function(event) {
    //verify message is from an origin we trust
    if (event.data === 'close' && event.origin === 'https://www.streak.com') {
      // The remote iframe said to close, so relay that upwards.
      window.parent.postMessage('close', parentOrigin);
    }
  }, false);

  iframe.src = ''; //set the url of the remote iframe here
  iframe.style.width = "660px"; //other iframe options
  iframe.style.height = "440px";

  document.body.appendChild(iframe);
 }

 var parentOrigin;

 window.addEventListener('message', function greetingHandler(event) {
  // This iframe only allows a gmail page to talk to it. Note that other pages
  // on the internet could create an iframe with a url to this page and work for
  // people with this extension installed, so this check is still important.
  if (event.data === 'greeting' && event.origin.match(/^https:\/\/\w+\.google\.com$/)) {
    window.removeEventListener('message', greetingHandler, false);
    parentOrigin = event.origin;
    main();
  }
 }, false);
	/* this file is the "app" file that loads the sdk and brings up the iframe */

	function log() {
	console.log.apply(console, ['iframe-test'].concat(Array.prototype.slice.call(arguments)));
	}

	InboxSDK.load(1, 'iframe-test').then(function(sdk) {
	sdk.Compose.registerComposeViewHandler(function(composeView) {
	composeView.addButton({
	title: "iframe test",
	type: 'MODIFIER',
	onClick: function() {
	var iframe = document.createElement('iframe');
	iframe.onload = function() {
	iframe.contentWindow.postMessage("greeting", "*");
	};
	function modalMessageHandler(event) {
	if (event.origin.match(/^chrome-extension:\/\//)) {
	//make sure that the message is coming from an extension and you can get more strict that the
	//extension id is the same as your public extension id
	if (event.data === 'close') {
	console.log('got close event from iframe');
	//modal.close();
	} else if (/* other event data */) {

	}
	}
	}
	window.addEventListener('message', modalMessageHandler, false);
	iframe.src = chrome.runtime.getURL('iframe.html'); //load the iframe.html that is in the extension bundle

	var modal = sdk.Modal.show({
	el: iframe
	});
	modal.on('destroy', function() {
	window.removeEventListener('message', modalMessageHandler, false);
	});
	}
	});
	});
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="iframe.js"></script>
	</head>
	<body>
	<p>iframe.html
	</body>
	</html>
	/*
	this script is in the bundle and gets loaded by iframe.html
	it acts as a bridge between the extension javascript and the actual remote iframe
	we want to load
	*/
	function main() {
	var iframe = document.createElement('iframe');

	iframe.onload = function() {
	iframe.contentWindow.postMessage("greeting", 'https://www.streak.com');
	};

	window.addEventListener('message', function(event) {
	//verify message is from an origin we trust
	if (event.data === 'close' && event.origin === 'https://www.streak.com') {
	// The remote iframe said to close, so relay that upwards.
	window.parent.postMessage('close', parentOrigin);
	}
	}, false);

	iframe.src = ''; //set the url of the remote iframe here
	iframe.style.width = "660px"; //other iframe options
	iframe.style.height = "440px";

	document.body.appendChild(iframe);
	}

	var parentOrigin;

	window.addEventListener('message', function greetingHandler(event) {
	// This iframe only allows a gmail page to talk to it. Note that other pages
	// on the internet could create an iframe with a url to this page and work for
	// people with this extension installed, so this check is still important.
	if (event.data === 'greeting' && event.origin.match(/^https:\/\/\w+\.google\.com$/)) {
	window.removeEventListener('message', greetingHandler, false);
	parentOrigin = event.origin;
	main();
	}
	}, false);