How to build a Chrome extension, Part 3: Loading any web page in a popup

Chrome allows extensions that use its page action or browser action API to show popups when clicked. To add this popup, you’d add a popup.html file to your extension and the following to the manifest.json for browser actions:

{
	"name": "My Extension",
	...
	"browser_action": {
		"default_icon": "myicon.png",
		"popup": "popup.html"
	}
	...
}

Or for page actions:

{
	"name": "My Extension",
	...
	"page_action": {
		"default_icon": "myicon.png",
		"popup": "popup.html"
	}
	...
}

However, the popup page is static and cannot be changed while the extension is running. Also, only a local extension page can be put into a popup; you can’t load an external page.

So how can you fix this? Using a relatively old web technique called an iframe. Inline frame, or iframe, is an HTML element that can load any web page inside another in a type of box. So, even though you can’t load an external web page as your popup, you can load it within it.

A simple example for a Bing search extension would be:

<html>
<head>
	<style type="text/css">
	body {width:200; height:300;}
	</style>
</head>
<body>
	<iframe src="http://m.bing.com" width="100%" height="100%" frameborder="0">
	</iframe>
</body>
</html>

As you can see, I have loaded the mobile version of Bing, http://m.bing.com. Because of the small amount of screen real estate available on the popups, loading mobile versions of a page is a good idea as they are minimalistic and require less space.

I’ve also explicitly declared the size of the page (200 by 300) and the iframe (100% of the page). You can change this to what fits your extension best.

(Yeah, I know it is ironic to build a Chrome extension centered on Bing, but I couldn’t get Google’s mobile search to load correctly in an iframe.)

On Chrome, the Bing search extension would look like this:

image

You can download the completed Bing extension from the Chrome Extensions Gallery and the source code (under the GPLv2) from Mediafire.

Now, what if you want to load a different page depending on an extension option? You can easily do this by constructing the iframe element dynamically when the page loads, like this code excerpt from ChromeMilk:

$(document).ready(function() {
	var popup = localStorage.popup || 'igoogle';

	var frame = document.createElement('iframe');

	frame.setAttribute('width', '100%');
	frame.setAttribute('height', '100%');
	frame.setAttribute('frameborder', '0');
	frame.setAttribute('id', 'rtmframe');

	if (popup == 'gmail') {
		// open gmail gadget
		$('body').height(300).width(200);
		frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/gmail/');
	}
	else if (popup == 'iphone') {
		// open iphone web app
		$('body').height(480).width(320);
		frame.setAttribute('src', 'http://i.rememberthemilk.com/');
	}
	else if (popup == 'mobile') {
		// open mobile web app
		$('body').height(300).width(200);
		frame.setAttribute('src', 'http://m.rememberthemilk.com/');
	}
	else {
		// igoogle and default
		$('body').height(400).width(400);
		frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/googleig/');
	}

	document.body.appendChild(frame);
});

This way, the extension sets the popup size and the iframe location based on a setting saved by the user.

There are a few limitations of this method. Most importantly, you can’t manipulate the iframe once it is loaded, as this is cross-side scripting and is prevented by the browser for security reasons.

That’s about it on loading external web sites in popups. You can use this for a number of things. I’ve mentioned mobile sites, but things like iGoogle widgets also work well.

Do you have any tips on building Chrome extensions based on popups? Or are you having trouble building your extension? Leave a comment!

  • Pingback: Cómo hacer una extensión de Chrome, Parte 3: Carga cualquier página en un popup | Hogargeek()

  • kamikaze

    Why doesn't the mobile version of google search load up in an iframe in Chrome? It works in FireFox.

  • I'm not sure. Google seems to be doing something server-side to prevent loading in iframes. I actually think this is a bug in Firefox that is not respecthing this server-side configuration. The iframe does not work in Chrome or Internet Explorer.

  • Neetesh

    I am trying to do the same thing in a background page but it doesn't work. Basically what im trying to do is load a external html page (which plays a song or video) in a background page. So even when the popup is closed the songs keeps playing in the background. Any ideas ?

  • Hi!

    I have an extension that loads an external web page (mine). It works so well except the input file. If I made the same extension to load in a new tab works well but fails if it´s a popup.

    I can´t leave the extension as a new tab because the external page is a mobile version and it´s weird to have a new tab with only 200×300 px

    I´ve been reading and google doesn´t say anything about any popup limitation. Do you know anything about that problem?

    Thanks a lot and excuse my english.

  • This is a known bug in Chrome: http://code.google.com/p/chromium/issues/detail
    File input forms will not work in browser action popups.

  • Hi!

    I have an extension that loads an external web page (mine). It works so well except the input file. If I made the same extension to load in a new tab works well but fails if it´s a popup.

    I can´t leave the extension as a new tab because the external page is a mobile version and it´s weird to have a new tab with only 200×300 px

    I´ve been reading and google doesn´t say anything about any popup limitation. Do you know anything about that problem?

    Thanks a lot and excuse my english.

  • This is a known bug in Chrome: http://code.google.com/p/chromium/issues/detail?id=28829
    File input forms will not work in browser action popups.

  • abc

    use ajax laod content,then render it.

  • Dahe_1980

    Thanks it is really close to what I am trying to do except I need to open the pop pragmatically instead a user clicks the extension icon. Do you have any suggestion?

    • As far as I know there is no way to open the popup programmatically. Have you tried using the icon badge to notify the user when the content has changed instead?

  • Luisvid

    Hola Juliana, muy bueno tu blog, llegué buscando info de como hacer un una extension para Chrome y es lo que necesitaba.
    Te hago una consulta, cómo debería hacer para llamar a un web service desde la extension? necesito pasarle la url y un id de usuario. Te agradezco si me puedes orientar.

    Muchas gracias

    Luis

  • Eli

    hi, i don’t know if anyone would reply to me because it’s been a long time since someone commented here but i have this question

    http://stackoverflow.com/questions/7760438/how-to-display-a-section-of-the-page

  • ~Z~

    Hello Juliana,
     
    Thanks a lot for such informative tutorial!
    Web is full of help, but this was what I needed.
    Also this page is very beautiful too. Nice design!
     
    I followed the instructions here and everything worked well. But now I want that when I click some link in the popup, the page should open in a new tab.
    Can you help me with this? : )
     

  • Neetesh

    I am trying to do the same thing in a background page but it doesn’t work. Basically what im trying to do is load a external html page (which plays a song or video) in a background page. So even when the popup is closed the songs keeps playing in the background. Any ideas ?

  • james

    cant get this to work without task milk! ie trying to just have it so the options file loads a different page in the iframe!

  • nils

    How can I load the iframe on a ‘new’ page within the extension? Thus overwriting the popup.

  • MrCreeper1008

    thx a lot!!!!

  • Jeff

    Nice. How would I go on to auto populate the title of the website you’re currently viewing into the search bar. This would need to happen when the extension app is loaded. I am stuck on that one.

  • Jeff

    cont… into the search bar of the Bing popup I mean

  • Alex Mills

    Is there a way to run/execute a Chrome Extension in a new tab/window by loading the extension’s code in that new tab or window?
    https://stackoverflow.com/questions/48048617/load-run-execute-chrome-extension-in-new-tab