Friday, April 25, 2014

Allow External Content in Google Chrome Apps

We've all experienced it before. You find yourself needing to know how to do something so you Google it. However, your search is so specific that the results don't quite line up with what you're looking for. You need to know something advanced, but the top results only tell you what you already know.

Case in point. I have been developing a Google Chrome app, App for, which allows you to use the web service as a Chrome App. It gives you the ability to pin it to your favorite application launcher, keeps you logged in, and otherwise integrates it with the OS as if it were a native app.

Microsoft provided an official "Chrome App" for, but this was merely a shortcut that opens the site in a new tab. I wanted to run as if it were Outlook itself, particularly on my Mac where I can't use Outlook to connect and get the full experience ( can only be accessed via POP or IMAP on Mac OSX). Although I had never developed a Chrome app before, I decided to write one to give a proper desktop experience!

After doing some research, I quickly learned the Chrome App APIs and discovered that writing apps for Chrome is pretty easy. A Chrome App is simply comprised of CSS, HTML, and JavaScript code stored locally in your browser. Before I knew it, I had a shell of an app made out of a few .HTML and .JS files.

However, Chrome's security model posed some challenges. The security model requires you to use a special, Chrome specific HTML tag, called a webview, to embed external HTML in the app. It didn't take me way too long to figure that out; a few easy Google searches pointed me directly to the documentation. Soon I had displaying in my app and I thought I was pretty close to done. I didn't even write much code to pull it off!

I was wrong. I soon realized that I couldn't open any external links in The Chrome app security model prevents external links from redirecting the current page in a webview. Google wasn't helping much either as the top search results only pointed to Google's page about external content. Sadly that page doesn't explain how to handle links embedded in a web view.

After spending a long time trying to solve the problem, I finally found a solution. I created a 'newwindow' event listener to detect when a link was clicked in the webview. When a link is clicked, the listener intercepts the target URL and then opens a new window with the name "_blank", pointing to the target URL. This tells the Chrome app to open the external link outside the application in a new browser window (or tab, depending on your configuration). Here's the JavaScript code I used to pull it off.

function openNewBrowserWindow(newWindowEvent) {,"_blank");

webview = document.getElementById('webview');
webview.addEventListener('newwindow', openNewBrowserWindow);

This is exactly how the full Microsoft Outlook desktop client behaves when you click an external link in an e-mail, which is exactly what I wanted to replicate with App for

Of course, this only handles external links in a webview. Adding an external link to your app's internal HTML files won't work either. What if you want to provide an external link your app's support page?

Thankfully you don't even need JavaScript for that. Simply add a link to your HTML file and set the target attribute to "_blank".

<a href="Support" target="_blank"></a>

Sadly this was not offered as a workaround in any documentation I managed to find. I hope this posts helps another poor soul who found Google's documentation (and search results) lacking. If this post has helped you, please feel free to leave a comment!


  1. Do you know how to allow html content from one specific internal server to display properly without clicking "display images" in the outlook client? Both the exchange server and the web server are in the same domain, I tried to add the URL for the web server in the IE trusted sites but it still prompts me to download images.

    I'd like to keep the security feature intact, but just have this one URL as an exception.

    1. It sounds like you might be talking about the Outlook desktop client. This post is actually about the Google Chrome app I wrote to connect to the e-mail service. However, I do have some desktop Outlook expertise. There is an option in the Outlook client to automatically download images for websites in the trusted zone. Here's an article that might help you:

  2. nice post! however, instead of an anchor tag and mentioning target=_blank, how can i use ng-click and call and function? in that function, i'll have to pass both url and target attribute?

    1. I haven't dabbled in AngularJS yet so I'm not entirely sure. If you're simply wanting to have an element respond to a click with ng-click, you should just be able to add that attribute to your element and have it call your function as normal. Then if you want that function to send you to a URL in a new window / tab, use, "_blank") in your function. You may have to experiment with it.

    2. Or, "_blank") rather (made a typo in the previous post)