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, incluidos 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 a 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. El manifiesto 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. ciclo. La secuencia de comandos en segundo plano es donde registras objetos de escucha para eventos específicos de la app, como iniciar y cerrar la ventana de la app.
  • Todos los archivos de código deben estar empaquetados en la app de Chrome. Esto incluye HTML, CSS, JS y código nativo Módulos cliente.
  • Los recursos, incluidos los íconos de las aplicaciones, 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 esa a continuación.

"background": {
  "scripts": ["background.js"]
}

Más adelante en este paso, te proporcionamos un ícono de la app:

"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 el y ejecuta la función de devolución de llamada:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Cuando se inicie la aplicación 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 siguiente paso.

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. de las cuales la página del evento las utiliza para administrar la aplicación.

Crea una vista HTML

Crea una página web sencilla para mostrar “Hello World” mensaje en la pantalla y guardarlo como index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Al igual que en cualquier otra página web, en este archivo HTML puede incluir JavaScript empaquetado adicional, CSS, es decir, los recursos.

Cómo agregar 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 archivo PNG como ícono de la aplicación que los usuarios verán en el menú de inicio.

Confirma que creaste todos tus 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 e iniciar rápidamente tu app sin tener que finalizarla como 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.

Habilita el modo de desarrollador

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

Cargar extensiones sin empaquetar

Inicia tu app de Hello World finalizada

Después de cargar tu proyecto como una extensión sin empaquetar, haz clic en Iniciar junto a la app instalada. R Se debería 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.

Cómo depurar 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, tal como en una página web normal.

Después de realizar cambios en el código y volver a cargar la aplicación (hacer clic con el botón derecho > Volver a cargar la aplicación), verifica las Consola de Herramientas para desarrolladores en busca de errores (clic derecho > Inspeccionar elemento).

Cuadro de diálogo Inspect Element

(Analizaremos la opción Inspeccionar la página en segundo plano en el paso 3 con alarmas).

La consola de JavaScript de Herramientas para desarrolladores tiene acceso a las mismas APIs disponibles para tu app. Puedes prueba 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:

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