Results 1 to 7 of 7
Like Tree5Likes
  • 3 Post By Jerry Hildenbrand
  • 1 Post By Jerry Hildenbrand
  • 1 Post By Jacques
  1. Thread Author  Thread Author    #1  

    Default [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    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.

    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.



    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


    II. Create the manifest.json file

    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!

    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.

    Pay very close attention to brackets, colons, and commas. If you don't get these exactly right, your extension won't load.

    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






    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.

    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.
    Attached Files Attached Files
    Last edited by Jerry Hildenbrand; 07-15-2013 at 02:41 PM.
    ಠ_ಠ
    제리
    Thanked by 6:
    hodan, shadybean and Squintyclops like this.
  2. #2  

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    Nice to know Jerry
    Thanks. Im getting my new chromebook this week and will be adding my new AC app. Doesn't seem too complicated.
    Samsung GS4 GPE | LG Nexus 4 - Sold | GNexus - Sold | HTC One S - Broke | Vibrant - Retired
    Spread some love, Like/Thanks button -->
  3. Thread Author  Thread Author    #3  

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    Quote Originally Posted by Ryandroid86 View Post
    Nice to know Jerry
    Thanks. Im getting my new chromebook this week and will be adding my new AC app. Doesn't seem too complicated.
    Awesome. I love to tinker with this sort of thing, and plan on working in a few more tutorials like this. Glad to know they help someone
    ಠ_ಠ
    제리
    Thanked by:
    IzRey 
    Ryandroid86 likes this.
  4. #4  
    gollum18's Avatar

    Posts
    1,510 Posts
    Global Posts
    1,532 Global Posts
    ROM
    Stock Rooted Mk3

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    Hmm nice tut jerry. Just a question though. Would this also work on linux or would I need a Chromebook to do the actual developing? As I see you mentioned the extensions should work on all the major platforms.

    Sprint GS3 Running TN's Msg and Chubbs
    Current Laptop - Samsung Ativ 4 Book, Ivy Bridge I7 @ 2.00GHz per Core, 8GB DDR3 Ram, Intel HD 4000, 750GB SATA

    Please don't thank me unless I have helped you in some way, if you like my post then click like not thanks.

    Check out my github @ https://github.com/gollum18 or My Android Applications @ http://lrdev.net76.net
  5. Thread Author  Thread Author    #5  

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    Quote Originally Posted by gollum18 View Post
    Hmm nice tut jerry. Just a question though. Would this also work on linux or would I need a Chromebook to do the actual developing? As I see you mentioned the extensions should work on all the major platforms.

    Sprint GS3 Running TN's Msg and Chubbs
    Will work just fine in the latest Chrome stable for Linux. Will put an app icon in your new tab page.
    ಠ_ಠ
    제리
    Thanked by:
  6. #6  
    Jacques's Avatar
    Greetings, program!

    Posts
    397 Posts
    Global Posts
    1,223 Global Posts
    ROM
    rooted Nexus 5

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    This is awesome, Jerry! I've been itching to do some tinkering with my Chromebook, so this may do the trick. :-)
    Google Nexus 5--rooted
    HTC Nexus One--my first Android (still alive and kicking)
    HP TouchPad--dual-boot and ported CM10.1
    Pebble smartwatch
    Nike+ SportWatch GPS
    MacBook Pro--guilty pleasure
  7. #7  

    Default Re: [How-To] Build a custom web app (launcher) for Chrome right on your Chromebook (IMAGE HEAVY)

    Jerry, just want to say this inspired me to create a 1Password launcher app for Chromebook. Thanks so much. Here's my 1Password app.

Similar Threads

  1. Not able to make any calls - Dialer searches for Skype
    By Vishal Malik in forum Samsung Galaxy S3
    Replies: 21
    Last Post: 03-16-2014, 08:52 AM
  2. Smart Remote for Galaxy S4 no longer available on play store
    By David B79 in forum Samsung Galaxy S4
    Replies: 15
    Last Post: 08-16-2013, 06:05 PM
  3. Help me pick a good sprint android phone to use over seas
    By djjeffa in forum General Help and How To
    Replies: 8
    Last Post: 08-01-2013, 11:56 AM
  4. Newbie to android needs some advice.
    By Aesthete18 in forum Samsung Galaxy S4
    Replies: 18
    Last Post: 07-14-2013, 07:20 PM
  5. How do I UNroot / revert to factory settings for an s4 Active?
    By Miamitj in forum Samsung Galaxy S4 Active
    Replies: 0
    Last Post: 07-12-2013, 09:31 PM

Posting Permissions

B