Crea tu primera app

En este instructivo, se explica cómo crear tu primera app de Chrome. Las apps de Chrome se estructuran de manera similar a las extensiones para que los desarrolladores actuales reconozcan el manifiesto y los métodos de empaquetado. Cuando hayas terminado, solo necesitarás generar un archivo ZIP con el código y los elementos para publish la app.

Una app de Chrome contiene estos componentes:

  • El manifiesto le informa a Chrome sobre tu app, qué es, cómo iniciarla y los permisos adicionales que requiere.
  • La secuencia de comandos en segundo plano se usa para crear la página del evento responsable de administrar el ciclo de vida de la app.
  • Todo el código debe estar incluido en el paquete de aplicaciones de Chrome. Esto incluye los módulos HTML, JS, CSS y Native Client.
  • Todos los íconos y otros recursos también se deben incluir en el paquete.

Paso 1: Crea el manifiesto

Primero, crea tu archivo manifest.json (en Formatos: Archivos de manifiesto, se describe este manifiesto en detalle):

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

Paso 2: Crea la secuencia de comandos en segundo plano

A continuación, crea un archivo nuevo llamado background.js con el siguiente contenido:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

En el código de muestra anterior, el evento onLaunched se activa cuando el usuario inicia la app. Luego, se abre inmediatamente una ventana para la app del ancho y la altura especificados. La secuencia de comandos en segundo plano puede 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.

Paso 3: Crea una página de ventana

Crea tu archivo window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Paso 4: Crea los íconos

Copia estos íconos en la carpeta de tu aplicación:

Paso 5: Inicia la app

Cómo habilitar marcas

Muchas de las APIs de las Apps de Chrome todavía son experimentales, por lo que debes habilitar las APIs experimentales para poder probarlas:

  • Ve a chrome://flags.
  • Busca "APIs de extensiones experimentales" y haz clic en el vínculo "Habilitar".
  • Reinicia Chrome.

Carga la app

Para cargar tu app, abre la página de administración de apps y extensiones. Para ello, haz clic en el ícono de configuración de Chrome y selecciona Herramientas > Extensiones.

Asegúrate de que se haya seleccionado la casilla de verificación Modo de desarrollador.

Haga clic en el botón Cargar extensión sin empaquetar, navegue a la carpeta de su aplicación y haga clic en Aceptar.

Abrir una pestaña nueva y lanzarla

Una vez que hayas cargado tu aplicación, abre una página Nueva pestaña y haz clic en el ícono de la nueva aplicación.

O bien, carga e inicia desde la línea de comandos

Estas opciones de línea de comandos para Chrome pueden ayudarte a iterar:

  • --load-and-launch-app=/path/to/app/ instala la aplicación desempaquetada desde la ruta determinada y la inicia. Si la aplicación ya se está ejecutando, se vuelve a cargar con el contenido actualizado.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll inicia una app que ya está cargada en Chrome. No reinicia ninguna app que se haya ejecutado anteriormente, pero inicia la app nueva con el contenido actualizado.