How To Create A Basic Chrome App

Anyone who has a Chromebook or just uses Chrome almost definitely uses Chrome apps to some extent. There are several types of Chrome apps from simple links to full fledged video games. The most common app is basically a link. When clicked on the app takes you to a website, a good example of this would be YouTube, Gmail, or the Google app. While most websites have been smart enough to create a Chrome app for their site, many have not or simply don’t know how to. It’s actually not as hard as you might think especially if you use this tutorial. While Chrome apps are made with code, you don’t need an extensive knowledge of code to make a Chrome app. All you need is the right software and the code I provide to you.

Since there is no Twitter app in the Chrome Web Store, I’ll use that for the demo. The first thing you to do is create a folder with the name of your app. If you are using Twitter, name the folder Twitter. If you are creating an app for Yahoo, call it Yahoo.

Before I get into the actual creation of the app, it might help if you have the software needed to create it. A Chrome app simply called “Text” available in the Chrome Web Store allows you to do just this on any platform including Chrome OS. The app does work offline if you plan on doing other types of coding or even just some writing.



Once you have “Text” installed you next need to paste the code you see below into the new document it automatically creates.

{

      “name”: “Twitter”,

      “version”: “1”,

      “icons”: {“128”: “128.png” },

      “app”: {

        “urls”: [

          “http://www.twitter.com/”

        ],

        “launch”: {

          “web_url”: “http://www.twitter.com/”

        }

      },

      “manifest_version”: 2

    }

Once you have this code in Text, you can start modifying it for what you need. Let’s say you don’t want Twitter but your favorite tech blog, iTechTriad. You would, in short, want to change all occurrences of “Twitter” to iTechTriad. You would also change occurrences of http://www.twitter.com to http://www.itechtriad.com .

Once you have the code where you need it, you need to save the file. You have to save it as “manifest.json”. It is very important that you save it exactly as so as it is how Chrome defines an app. Save it in the folder you made earlier for your app.

 

That’s the simple part. The next one is a bit more tricky, specifically if you are on a Chromebook. As with all Chrome apps, you need to set an image for the icon. This icon displays on the app launcher and everywhere else you would launch the app. This needs to be a .png image with at least 128 pixels high and 128 pixels wide. The image needs to maintain a 1:1 aspect ratio (a square). Transparency is up to you. I recommend that you create an image that is 400×400 with a transparent background as it usually looks good everywhere. If you are creating a Twitter app you can simply download the image above.

If you decide to use your own image you need to rename it “128.png”. It is crucial that the file is a .png and is named 128 otherwise it will not work. Now you are nearly done.

Make sure that you have both your manifest.json file and your 128.png file in the folder that you created at the start. You are about to package them into an app.

Open the Chrome browser. Navigate to chrome://extensions. Look for the “Developer Mode” check box and make sure it is checked. Next click the “Load Unpacked Extension” button. A window will open up. Find the folder you created contain the 128.png and manifest.json files. Select that folder and click open. Chrome will automatically pack the app and add it to your apps. From there you can test it to ensure that everything works correctly. Enjoy your new app! If you want to publish your app to the Chrome Web Store, first ensure that it is an app for your own property since I doubt Twitter would appreciate you creating one for them, then make a Chrome Developer account (costs $5 USD) and follow the directions to submit your app.

If you have any questions let us know in the comments and if you want to see any other tutorials, from Apple, Android, Chrome, or Mac, let us know!