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.