[INFO]This tutorial was designed for users with a Chromebook, but the end result -- the web app -- will work on Chrome in Windows, Mac or Linux as well. The process is the same, only the tools we are using to write the manifest file are different.[/INFO]
I love ChromeOS. I'm always connected, and other than editing RAW image files and video, I use my Pixel for everything. One of the tricks I've found is to build custom "apps" that are launchers to open something in a new tab or window without digging through bookmarks or favorites. If you have a Chromebook, or even if you're curious and like using Chrome browser on your desktop, here's how to do it.
In this thread we're going to make a custom app (really a website launcher) for Chrome. The benefit of doing this, is that you'll have a direct shortcut right in your apps drawer, and can also place one in your launcher bar if you like. I'm making one for Android Central forums, because every other operating system has an AC forums app so us Chromies need one, too
Follow along, follow carefully, and when you're done you'll have a Chrome app you built yourself installed on your Chromebook or in Chrome on Windows, Linux or Mac.
I. Make the folders
You'll need to create a few nested folders to use for your app. Open the Files app, and browse to the Downloads folder. Inside Downloads, create a folder named EXTENSIONS.
Open the EXTENSIONS folder, and create another folder inside of it named AC-forums. I have several extra folders there, because I've made a couple already. You wont have these extra folders right now, but soon you'll have your own list
Open the AC-forums folder, and make a new folder inside of it named img. This is where you're going to place the icons you need for this project.
Download the icons.zip file attached to this post. Inside, you'll find three different size icons that your app will use. The only icon you have to include in this type of app is a single 128x128 pixel .png file, but then Chrome will scale it automatically when it needs other sizes. For this reason, I've found it's best to include 128x128, 48x48, and 16x16 pixel sized icons. Extract the Zip file you just downloaded, and place the three icons in the Downloads/EXTENSIONS/AC-forums/img folder you just created.
[TIP]For this tutorial, use these names exactly as written. By the time we're done, you'll know how to build your own and will be able to set the next one up any way you like[/TIP]
II. Create the manifest.json file
[INFO]Every Chrome app or extension needs a manifest file. This is where you tell Chrome what to do with the files you're supplying. The syntax of these files must be correct or your extension won't load. For this sort of app, the manifest file is pretty simple. Making it using ChromeOS is simple, too![/INFO]
Click this link to open Edit Pad in a new tab. Edit Pad is an online Notepad equivalent, where you can type anything and save it back to your Chromebook with any name. After you're done with this tutorial, making a app launcher for Edit Pad is a great idea.
You'll need to copy and paste (or type it in by hand -- sometimes that's the best way to learn) into Edit Pad. Here's that code, and we'll talk about each section individually afterwards.
Once you have your test entered correctly in Edit Pad, it's time to save it. Click the Download and Save button in the bottom left of your Edit Pad window, and save the file as manifest.json in your Downloads/EXTENSIONS/AC-forums folder.
Once you have your manifest.json file saved, all the programming is done. Next we need to tell Chrome about our new app.
III. Loading your custom app (you're a Developer)
Chrome can install and run your new app right from the folder you made it in. We just need to let the system know it's there. Open your Extensions page, either from the settings or by typing chrome://extensions/ in your omnibar. Once you have it open, we need to do two things: tell Chrome to put you into Developer mode, and to load your app to the system. Both these are done at the top of the Extensions page.
Next, a file browser window will open, Browse to the Downloads/EXTENSIONS/AC-forums/ folder, and click the Open button
If all goes well, your new app will appear at the top of the list, complete with our new icon. If you get a syntax error, check your manifest.json file for mistakes. What it posted here will work, as it's copied and pasted from the app I'm using to post this thread
Now your new app is in the applications drawer, and will whisk you straight to AC Forums with just a click!
IV. Adding a shortcut to your launcher bar
This is why I take the time to create these apps on my Chrome devices. By putting them right in the launcher bar, I have instant access to the things I use the most. Of course I need to put the AC Forums app there!
[INFO]You might have noticed there are other launch options in the right click menu. I like to leave things be and run everything in tabs, but you may not. Explore those different options and see how you like it.[/INFO]
Practice making some apps, and have some fun. I'll try to answer any questions I can, because the next tutorials are about creating extensions instead of apps, and finally opening a Chrome developer account and publishing things to the Chrome store.
I love ChromeOS. I'm always connected, and other than editing RAW image files and video, I use my Pixel for everything. One of the tricks I've found is to build custom "apps" that are launchers to open something in a new tab or window without digging through bookmarks or favorites. If you have a Chromebook, or even if you're curious and like using Chrome browser on your desktop, here's how to do it.
In this thread we're going to make a custom app (really a website launcher) for Chrome. The benefit of doing this, is that you'll have a direct shortcut right in your apps drawer, and can also place one in your launcher bar if you like. I'm making one for Android Central forums, because every other operating system has an AC forums app so us Chromies need one, too
Follow along, follow carefully, and when you're done you'll have a Chrome app you built yourself installed on your Chromebook or in Chrome on Windows, Linux or Mac.
I. Make the folders
You'll need to create a few nested folders to use for your app. Open the Files app, and browse to the Downloads folder. Inside Downloads, create a folder named EXTENSIONS.
Open the EXTENSIONS folder, and create another folder inside of it named AC-forums. I have several extra folders there, because I've made a couple already. You wont have these extra folders right now, but soon you'll have your own list
Open the AC-forums folder, and make a new folder inside of it named img. This is where you're going to place the icons you need for this project.
Download the icons.zip file attached to this post. Inside, you'll find three different size icons that your app will use. The only icon you have to include in this type of app is a single 128x128 pixel .png file, but then Chrome will scale it automatically when it needs other sizes. For this reason, I've found it's best to include 128x128, 48x48, and 16x16 pixel sized icons. Extract the Zip file you just downloaded, and place the three icons in the Downloads/EXTENSIONS/AC-forums/img folder you just created.
[TIP]For this tutorial, use these names exactly as written. By the time we're done, you'll know how to build your own and will be able to set the next one up any way you like
[/TIP]II. Create the manifest.json file
[INFO]Every Chrome app or extension needs a manifest file. This is where you tell Chrome what to do with the files you're supplying. The syntax of these files must be correct or your extension won't load. For this sort of app, the manifest file is pretty simple. Making it using ChromeOS is simple, too![/INFO]
Click this link to open Edit Pad in a new tab. Edit Pad is an online Notepad equivalent, where you can type anything and save it back to your Chromebook with any name. After you're done with this tutorial, making a app launcher for Edit Pad is a great idea.
You'll need to copy and paste (or type it in by hand -- sometimes that's the best way to learn) into Edit Pad. Here's that code, and we'll talk about each section individually afterwards.
Code:
{
"name": "AC Forums",
"description": "The best damn Android forums anywhere.",
"version": "1.0.0",
"manifest_version": 2,
"app": {
"urls": [
"http://forums.androidcentral.com/"
],
"launch": {
"web_url": "http://forums.androidcentral.com/"
}
},
"icons": {
"16": "img/icon-16.png",
"48": "img/icon-48.png",
"128": "img/icon-128.png"
}
}- name: The name of the app, and the name that's displayed in your app drawer or launcher bar. This must be included in every app or extension.
- description: A short (135 characters or less) plain text string that describes your app. This is visible in the Extensions panel in Chrome, and the description the Chrome store uses if you ever publish an app. This must be included in every app or extension.
- version: The version of your app or extension. To make things easy, start with 1.0.0. Whenever you make any changes and want to run a new version, you must change this number. Make the next version 1.0.1 or 1.1. This must be included in every app or extension.
- manifest_version: Used to specify which version of the manifest specification your package targets. The current version is 2, and version 1 will not work for Chrome 27 or above. When the Chromium team updates the manifest specification (adds more functions that apps and extensions can do) this number will change. For now, always use version 2. This must be included in every app or extension.
- app: Specifies that this is an application and not an extension. Apps get installed and can run without the browser open, extensions don't. We're using two parameters for this function as follows:
- urls: What URLs our application is allowed to open. If we skipped this, only the forum index would load because our app doesn't have permission to load any other pages in the http://forums.androidcentral.com domain.
- launch: Tells our app what to launch, in this case a web_url. You can also launch a local file or a script. This example tells Chrome to launch http://forums.androidcentral.com/ in a new tab when the app is loaded. If AC Forums is already loaded in an existing tab, that tab will get focus.
- icons: Tells Chrome the path to our apps icon resources. These images must be .png files. Each size we want Chrome to be able to use must be defined. Be sure you have the full path to your image files.
Once you have your test entered correctly in Edit Pad, it's time to save it. Click the Download and Save button in the bottom left of your Edit Pad window, and save the file as manifest.json in your Downloads/EXTENSIONS/AC-forums folder.
Once you have your manifest.json file saved, all the programming is done. Next we need to tell Chrome about our new app.
III. Loading your custom app (you're a Developer)
Chrome can install and run your new app right from the folder you made it in. We just need to let the system know it's there. Open your Extensions page, either from the settings or by typing chrome://extensions/ in your omnibar. Once you have it open, we need to do two things: tell Chrome to put you into Developer mode, and to load your app to the system. Both these are done at the top of the Extensions page.
- Find the Developer mode setting and check the box.
- Click the Load unpacked extension ... button.
Next, a file browser window will open, Browse to the Downloads/EXTENSIONS/AC-forums/ folder, and click the Open button
If all goes well, your new app will appear at the top of the list, complete with our new icon. If you get a syntax error, check your manifest.json file for mistakes. What it posted here will work, as it's copied and pasted from the app I'm using to post this thread
Now your new app is in the applications drawer, and will whisk you straight to AC Forums with just a click!
IV. Adding a shortcut to your launcher bar
This is why I take the time to create these apps on my Chrome devices. By putting them right in the launcher bar, I have instant access to the things I use the most. Of course I need to put the AC Forums app there!
- Open your application drawer and find your new app.
- Right click it.
- Choose Pin to Launcher
- Profit
[INFO]You might have noticed there are other launch options in the right click menu. I like to leave things be and run everything in tabs, but you may not. Explore those different options and see how you like it.[/INFO]
Practice making some apps, and have some fun. I'll try to answer any questions I can, because the next tutorials are about creating extensions instead of apps, and finally opening a Chrome developer account and publishing things to the Chrome store.
Last edited:
Facebook
Twitter
Instagram