Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gmail iframes
/* this file is the "app" file that loads the sdk and brings up the iframe */
function log() {
console.log.apply(console, ['iframe-test'].concat(;
InboxSDK.load(1, 'iframe-test').then(function(sdk) {
sdk.Compose.registerComposeViewHandler(function(composeView) {
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 ( === 'close') {
console.log('got close event from iframe');
} 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 ={
el: iframe
modal.on('destroy', function() {
window.removeEventListener('message', modalMessageHandler, false);
<!doctype html>
<meta charset="utf-8">
<script src="iframe.js"></script>
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", '');
window.addEventListener('message', function(event) {
//verify message is from an origin we trust
if ( === 'close' && event.origin === '') {
// 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 = "660px"; //other iframe options = "440px";
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 ( === 'greeting' && event.origin.match(/^https:\/\/\w+\.google\.com$/)) {
window.removeEventListener('message', greetingHandler, false);
parentOrigin = event.origin;
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.