Turn A Web Site Into A Chrome App

I’ve been using my new Chromebook, the Acer C720, since Christmas day, and so far I am enjoying the experience very much. As you may know, Chrome OS is designed to run web apps, and you can either run them within the Chrome web browser or in a separate window. When you run a web app in a window, it appears as you see in the screenshot below and looks very much like a “regular” app.

Fargo on Chromebook

A web app is a web site that provides application like functionality by running Javascript. One of the web apps that I use the most is Fargo, which is an outline editor that I am using to write my blog posts. I decided that I wanted to run Fargo in a window on my Chromebook.

By default, the apps in the Chrome OS app launcher are all configured to run in the browser, but you can change that by right clicking the icon in the app launcher and then clicking Open As Window. If you like, you can configure the Window to open maximized by also selecting Open Maximized.

You would think that Google would make it easy for users to specify that they want any web site they have open in Chrome to open in a window just by right clicking on the tab and selecting the options above. Unfortunately, it is not possible to just turn a Chrome tab into a windows “app”, probably because when you do so the app icon appears in the app launcher and Google only officially wants users to add items to the launcher via the Chrome Web Store. (Perhaps a developer could make an app for this?)

The solution involves creating your own Chrome extension, which is pretty easy to do once you find the instructions. A Google search yielded an article on How To Geek that provides the instructions. The process involves creating a folder on your computer, putting two files in that folder, and then telling Chrome to load the contents of the folder as an unpacked extension.

In order to follow the instructions, which involves creating a text file and an image file, on my Chromebook, I needed to install a text editor and a photo editor. I found Text and Pixlr Editor in the Chrome Web Store that did the trick.

At first I simply copied and pasted the contents of the manifest.json file from the How To Geek web site into Text and saved the file, but I kept getting an error when trying to load the extension saying that the file was not a valid json file. It turned out that the double quotes being copied where causing a problem and so because the file was not very large, I simply typed in the information in a new file.

After you follow the instructions, the icon, based on the 128 x 128 PNG image file you provided, appears in the app launcher. By default the icon is created to launch the site in Chrome, but right click the icon to configure it to open in a window.

Extensions that you load locally in Chrome do not sync via your Chrome account to web browsers on other computers, so if you want the extension to appear on multiple computers, you will need to copy the files to a folder on that computer and load it as an unpacked extension.

You can use the Pack Extension option on the Chrome extensions page to bundle up the two files into a .CRX file which you could then distribute. Again, Chrome appears to be configured to only load extensions via the Chrome Web Store but you can manually load a CRX file by manually dragging and dropping the file onto the Chrome extensions page.

It might seem the only reason to configure a web site to open in a window is for cosmetics, but I have found two advantages. One is that the windows can be re-sized and therefore placed side by side on a screen. One reason why I may want to place windows side by side is to write in Fargo while looking at a web page on the same screen at the same time.

Another advantage is that with a web site in a window, you can press Alt-Tab to quickly jump between windows, just like you do between apps on any other computer. I know there are keyboard commands to move between Chrome tabs, but my muscle memory knows alt-tab better than the Chrome keyboard commands.

Google seems to make it easy to add an extension like I created for Fargo to the Chrome Web Store, it only costs $5 to create a developer account, however, it appears only the site owners can provide the apps. Dave Winer would have to submit the extension to the app store in order for it to be legitimately included for Fargo.

I think it is pretty straight forward to follow the instructions on How To Geek, but if you want to add the Fargo extension that I created you can download the manifest.json and 128.png files from my public Dropbox folder by downloading the two files via the links I have provided for each file name.

About Frank

Mobile enthusiast and author
This entry was posted in How. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s