> [!CAUTION]
> **Important:** Chrome will be removing support for Chrome Apps on all platforms. Chrome browser and the Chrome Web Store will continue to support extensions. [**Read the announcement**](https://blog.chromium.org/2020/08/changes-to-chrome-app-support-timeline.html) and learn more about [**migrating your app**](https://developer.chrome.com/apps/migration).
In this step, you will learn:
- The basic building blocks of a Chrome App, including the manifest file and background scripts.
- How to install, run, and debug a Chrome App.
*Estimated time to complete this step: 10 minutes.*
To preview what you will complete in this step, [jump down to the bottom of this page ↓](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#launch).
## Get familiar with Chrome Apps
A Chrome App contains these components:
- The **manifest** specifies the meta information of your app. The manifest tells Chrome about your app, how to launch it, and any extra permissions that it requires.
- The **event page** , also called a **background script**, is responsible for managing the app life cycle. The background script is where you register listeners for specific app events such as the launching and closing of the app's window.
- All **code files** must be packaged in the Chrome App. This includes HTML, CSS, JS, and Native Client modules.
- **Assets**, including app icons, should be packaged in the Chrome App as well.
### Create a manifest
Open your favorite code/text editor and create the following file named **manifest.json**:
```json
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
```
Notice how this manifest describes a background script named *background.js*. You will create that
file next.
```json
"background": {
"scripts": ["background.js"]
}
```
We'll supply you with an app icon later in this step:
```json
"icons": {
"128": "icon_128.png"
},
```
### Create a background script
Create the following file and save it as ***background.js***:
```javascript
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
```
This background script simply waits for the [chrome.app.runtime.onLaunched](https://developer.chrome.com/docs/extensions/reference/app_runtime#event-onLaunched) launch event for the
application and executes the callback function:
```javascript
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
```
When the Chrome App is launched, [chrome.app.window.create()](https://developer.chrome.com/docs/apps/reference/app/window.md.txt#method-create) will create a new window using a
basic HTML page (*index.html*) as the source. You will create the HTML view in the next step.
```javascript
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
```
Background scripts may contain additional listeners, windows, post messages, and launch data---all
of which are used by the event page to manage the app.
### Create an HTML view
Create a simple web page to display a "Hello World" message to the screen and save it as
***index.html***:
```html
Hello, let's code!
```
Just like any other web page, within this HTML file you can include additional packaged JavaScript,
CSS, or assets.
### Add an app icon
Right-click and save this 128x128 image to your project folder as **_icon*128.png***:
You will use this PNG as our application's icon that users will see in the launch menu.
### Confirm that you have created all your files
You should have these 4 files in your project folder now:
## Install a Chrome App in developer mode
Use **developer mode** to quickly load and launch your app without having to finalize your app as a
distribution package.
1. Access **chrome://extensions** from the Chrome omnibox.
2. Check off the **Developer mode** check box.
1. Click **Load unpacked extension**.
2. Using the file picker dialog, navigate to your app's project folder and select it to load your app.
## Launch your finished Hello World app
After loading your project as an unpacked extension, click **Launch** next to your installed app. A
new standalone window should open up:
Congratulations, you've just created a new Chrome App!
## Debug a Chrome App with Chrome DevTools
You can use the [Chrome Developer Tools](https://developer.chrome.com/devtools) to inspect, debug, audit, and test your app just like
you do on a regular web page.
After you make changes to your code and reload your app (**right-click \> Reload App** ), check the
DevTools console for any errors (**right-click \> Inspect Element**).
(We'll cover the **Inspect Background Page** option in [Step 3](https://developer.chrome.com/docs/app_codelab_alarms) with alarms.)
The DevTools JavaScript console has access to the same APIs available to your app. You can easily
test an API call before adding it to your code:
## For more information
For more detailed information about some of the APIs introduced in this step, refer to:
- [Manifest File Format](https://developer.chrome.com/apps/manifest "Read 'Manifest File Format' in the Chrome developer docs") [↑](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#manifest "This feature mentioned in 'Create a manifest'")
- [Manifest - Icons](https://developer.chrome.com/apps/manifest/icons "Read 'Manifest - Icons' in the Chrome developer docs") [↑](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#app-icon "This feature mentioned in 'Add an app icon'")
- [Chrome App Lifecycle](https://developer.chrome.com/docs/app_lifecycle "Read 'Manifest File Format' in the Chrome developer docs") [↑](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#background-script "This feature mentioned in 'Create a background script'")
- [chrome.app.runtime.onLaunched](https://developer.chrome.com/docs/extensions/reference/app_runtime#event-onLaunched "Read 'chrome.app.runtime.onLaunched' in the Chrome developer docs") [↑](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#background-script "This feature mentioned in 'Create a background script'")
- [chrome.app.window.create()](https://developer.chrome.com/docs/extensions/reference/app_window#method-create "Read 'chrome.app.window.create()' in the Chrome developer docs") [↑](https://developer.chrome.com/docs/apps/app_codelab_basics.md.txt#background-script "This feature mentioned in 'Create a background script'")
Ready to continue onto the next step? Go to [Step 2 - Import an existing web app \>\>](https://developer.chrome.com/docs/app_codelab_import_todomvc)