Paso 1: Crea y ejecuta una app de Chrome

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:

Ícono de la app de Chrome para este codelab

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:

Captura de pantalla de la carpeta de archivos

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.

  1. Accede a chrome://extensions desde el cuadro multifunción de Chrome.
  2. Marca la casilla de verificación Modo de desarrollador.

Cómo habilitar el modo de desarrollador

  1. Haga clic en Cargar extensión sin empaquetar.
  2. En el diálogo del selector de archivos, navega a la carpeta del proyecto de tu app y selecciónala para cargarla.

Cargar extensiones sin empaquetar

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:

La app de Hello World finalizada después del paso 1

¡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).

Cuadro de diálogo 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:

Registro de la consola de Herramientas para desarrolladores

Más información

Para obtener información más detallada sobre algunas de las APIs presentadas en este paso, consulta lo siguiente:

¿Todo listo para continuar con el siguiente paso? Ve al Paso 2: Importa una aplicación web existente »