Create a Custom Chrome OS/Chromebook "App"

Introduction: Create a Custom Chrome OS/Chromebook "App"

In this write up I will describe how to create a custom Chromebok/Chrome OS app. I can't take full credit info was obtained from http://www.omgchrome.com. Just thought it would be good info to share and may the instructables crew would actually want to make a Chrome app available in the web store.

Step 1: Set Up

Create a folder on your Chromebook, name the folder after your web app. In this example I’m naming it ‘Instructables' because I’m creating a Instructables web app.

Step 2: Create Web App Icon

In this folder, download/create an icon for the app (it needs to be a 128×128 PNG file), rename it “icon_128.png”.

Step 3: Code the App

Now you’ll need to create a plain text file with the following contents. Rename/edit the contents as per your web app.


{
"name": "Instructables",
"description": "App description (132 characters or less, no HTML)",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"128": "icon_128.png"
},
"app": {
"urls": [
"http://instructables.com/"
],
"launch": {
"web_url": "http://instructables.com/"
}
}
}

Step 4: Rename Txt File

Saved the file, renaming it to “manifest.json” (make sure the .txt file extension is gone).

Step 5: Enable Chromebook to Test App

Once you have the icon and json file in the folder you should test that it works.

Open the ‘Extensions’ page from Chrome’s Settings menu.  Tick “Developer Mode”. Click “Load Unpacked Extension” and select the web app folder.

The Web App should now be installed on your New Tab page.

Step 6: See You App in Action and Notes!

Please note, you can not delete the web app folder, since Chrome will load the web app from this folder.

To publish your web app to the Chrome Web Store you will need to be the owner of the domain used by the web-app. If you do not own the domain of the web app, you can not publish it to the Chrome Web Store.

2 People Made This Project!

Recommendations

  • Rice & Grains Challenge

    Rice & Grains Challenge
  • Lamps Challenge

    Lamps Challenge
  • CNC and 3D Printing Contest

    CNC and 3D Printing Contest

16 Comments

0
sosoemeka
sosoemeka

Question 11 months ago

how can i make an app for recording

0
jts163
jts163

Question 1 year ago

how do you creat a game

0
27lwilde
27lwilde

1 year ago

I can't figure out how to make my own app

0
EthanC20
EthanC20

7 years ago

ill help ya girl

0
jaspirlee.watson
jaspirlee.watson

Question 1 year ago

hi do you know how to make a file

0
Account__
Account__

4 years ago

when you make a plain text file are you using the text app?

0
733657
733657

Reply 2 years ago

im makeing one!

1
Casey-PixiePaladin
Casey-PixiePaladin

Reply 2 years ago

You can make a plain text file using the text editor installed on the chromebook

1
simonhorner1975
simonhorner1975

Question 2 years ago

Hi is it possible to get saved chome password in the username and password fields in apps

0
Casey-PixiePaladin
Casey-PixiePaladin

Question 2 years ago

for the url portion what do you put if it is supposed to open an html file?

0
Eckadoodle
Eckadoodle

Question 2 years ago

How did you make a plain text file on chromebook?

0
MahendraPrasadsm
MahendraPrasadsm

4 years ago

Hi, i want to display this icon(icon_128.png) in gmail pdf attachments open with below?

How to do this?

check this below attachment. I have to display this icon in place of pdffiller

OpenWithPreview.png
0
MahendraPrasadsm
MahendraPrasadsm

Reply 4 years ago

How to write a script for this

0
MurphyD
MurphyD

7 years ago on Introduction

I get everything to work except the icon...help please?