En este paso, aprenderás lo siguiente:
- Los componentes básicos de una app de Chrome, como el archivo de manifiesto y las secuencias de comandos en segundo plano
- Cómo instalar, ejecutar y depurar una app de Chrome
Tiempo estimado para completar este paso: 10 minutos
Para obtener una vista previa de lo que completarás en este paso, ve hacia la parte inferior de esta página ↓.
Familiarízate con las apps de Chrome
Una app de Chrome contiene estos componentes:
- El manifiesto especifica la metainformación de tu app. Además, le informa a Chrome sobre tu app, cómo iniciarla y cualquier permiso adicional que requiera.
- La página del evento, también llamada secuencia de comandos en segundo plano, es responsable de administrar el ciclo de vida de la app. La secuencia de comandos en segundo plano es donde registras objetos de escucha para eventos específicos de la app, como el inicio y el cierre de la ventana de la app.
- Todos los archivos de código deben estar empaquetados en la app de Chrome, incluidos los módulos HTML, CSS, JS y Native Client.
- Los recursos, incluidos los íconos de las apps, también deben empaquetarse en la app de Chrome.
Crea un manifiesto
Abre tu editor de código o texto favorito y crea el siguiente archivo llamado manifest.json:
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
Observa cómo este manifiesto describe una secuencia de comandos en segundo plano denominada background.js. Crearás ese archivo a continuación.
"background": {
"scripts": ["background.js"]
}
Te proporcionará un ícono de la app más adelante en este paso:
"icons": {
"128": "icon_128.png"
},
Cómo crear una secuencia de comandos en segundo plano
Crea el siguiente archivo y guárdalo como background.js:
/**
* 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 }
});
});
Esta secuencia de comandos en segundo plano simplemente espera el evento de inicio chrome.app.runtime.onLaunched para la aplicación y ejecuta la función de devolución de llamada:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
Cuando se inicie la app de Chrome, chrome.app.window.create() creará una ventana nueva con una página HTML básica (index.html) como fuente. Crearás la vista HTML en el paso siguiente.
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
Las secuencias de comandos en segundo plano pueden contener objetos de escucha, ventanas, mensajes de publicación y datos de inicio adicionales, que la página del evento utiliza para administrar la app.
Cómo crear una vista HTML
Crea una página web simple para mostrar el mensaje "Hello World" en la pantalla y guárdala como index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Al igual que con cualquier otra página web, en este archivo HTML puedes incluir elementos JavaScript, CSS o elementos adicionales empaquetados.
Agrega un ícono de la app
Haz clic con el botón derecho y guarda esta imagen de 128 x 128 en la carpeta de tu proyecto como _icon128.png:
Usarás este PNG como el ícono de nuestra aplicación que los usuarios verán en el menú de inicio.
Confirma que creaste todos los archivos
Ahora deberías tener estos 4 archivos en la carpeta de tu proyecto:
Cómo instalar una app de Chrome en modo de desarrollador
Usa el modo de desarrollador para cargar y, luego, iniciar tu app de manera rápida sin tener que finalizarla como un paquete de distribución.
- Accede a chrome://extensions desde el cuadro multifunción de Chrome.
- Marca la casilla de verificación Modo de desarrollador.
- Haga clic en Cargar extensión sin empaquetar.
- En el diálogo del selector de archivos, navega a la carpeta del proyecto de tu app y selecciónala para cargarla.
Inicia la app de Hello World terminada
Después de cargar tu proyecto como una extensión sin empaquetar, haz clic en Launch junto a la app instalada. Se abrirá una nueva ventana independiente:
¡Felicitaciones! Acabas de crear una nueva aplicación de Chrome.
Depura una app de Chrome con las Herramientas para desarrolladores de Chrome
Puedes usar las herramientas para desarrolladores de Chrome para inspeccionar, depurar, auditar y probar tu app como lo haces en una página web normal.
Después de realizar cambios en el código y volver a cargar la app (haz clic con el botón derecho > Volver a cargar la app), verifica si hay errores en la consola de Herramientas para desarrolladores (haz clic con el botón derecho > Inspeccionar elemento).
(Cubriremos la opción Inspeccionar página en segundo plano en el Paso 3 con alarmas).
La consola de JavaScript de las Herramientas para desarrolladores tiene acceso a las mismas APIs disponibles para tu app. Puedes probar fácilmente una llamada a la API antes de agregarla a tu código:
Más información
Para obtener información más detallada sobre algunas de las APIs presentadas en este paso, consulta lo siguiente:
- Formato de archivo de manifiesto ↑
- Manifiesto: Íconos ↑
- Ciclo de vida de las apps de Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
¿Todo listo para continuar con el siguiente paso? Ve al Paso 2: Importa una aplicación web existente »