loading
This little guide will teach you how to build a very simple little app that takes you to a specified websites.

I originally wanted this to do away with the bookmark bar and replace it with cleaner, more eye-pleasing apps.

No prior knowledge to coding needed!

Step 1: Let's Get Started

To begin, simply create a folder, its title being the name of your app.

Place this folder somewhere where it won't be moved or changed - maybe the Google Chrome Program files folder?

The site I wanted to access with my app is called "Vula" (My university's online student center), thus my folder is called Vula.

Step 2: Create a Logo for the App

At this point, we need a logo for the app.

Create (by any means - it's up to you how you go about it) a 128x128px logo and save it as "128.png". Save it in the folder you've just created.

This will be the logo you see on Chrome's home page.

Step 3: Create the Code

For the code, we'll use a bit of JSON code. Open up plain old notepad and, to make your day a little better, you can just use my code:

{
"manifest_version": 2,
"name": "Vula",
"description": "Quick link to Vula",
"version": "1.0",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"https://vula.uct.ac.za"
],
"launch": {
"web_url": "https://vula.uct.ac.za"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}


Copy and paste this into notepad. Change the name, description and URLs to suit your app.

Now save this file as manifest.json in your app folder.

Make sure windows actually turns it into a .json file! You may have to tell windows to show know file extensions to do this (a little googling will tell you more on that if you require)

Step 4: Finishing Up

Now in the app folder, you should have "128.png" and  "manifest.json".

Next, go into Chrome, and click the menu button, then "tools", then "extensions".

In the extension window, make sure you enable developer mode. 

After enabling dev mode, a button should appear saying "load unpacked extension". Hit that, and locate your app folder and select it.

Then, if your code is up to scratch, it should install, and tadaa, you're done! Your shiny new link app should appear on your home page.
<p>Wow, you made that look really simple. </p>
what is the link app for?
It simply takes you to a website (which you specify). It's slightly redundant now, however, because Chrome has changed its new tab/home page layout not to show the apps natively.
yeah that could be an issue but is there a browser like chrome that will show apps natively
Your explanation is very clear.Appreciate your work.Since iam a <a href="http://www.contus.com/windows-application-development.php" rel="nofollow">windows phone 8 developer</a> , i would like to know all platform techniques and implement it on my creation.At this beginner stage iam longing to learn more things.
Great tutorial I have been wondering how to do this Forever:)

About This Instructable

2,801views

11favorites

License:

Bio: Cape Town based maker and Geoinformatics student
More by MrShambles:Projection mapped audio visualization Lego Spybotics with Arduino The Ghetto Chair 
Add instructable to: