Crea tu primera app

Este tutorial te guiará para crear tu primera aplicación de Chrome. Las Apps de Chrome tienen una estructura similar a las extensiones para que los desarrolladores actuales reconozcan el manifiesto y los métodos de empaquetado. Cuando estés Solo debes generar un archivo ZIP con tu código y recursos para publicar tu .

Una app de Chrome contiene estos componentes:

  • El manifiesto le indica a Chrome cuál es tu app, qué es, cómo iniciarla y la información adicional los permisos que requiere.
  • La secuencia de comandos en segundo plano se usa para crear la página del evento responsable de administrar la vida útil de la app. ciclo.
  • Todo el código debe incluirse en el paquete de la aplicación de Chrome. Esto incluye HTML, JS, CSS y Native Client módulos.
  • El paquete también debe incluir todos los íconos y demás elementos.

Paso 1: Crea el manifiesto

Primero, crea tu archivo manifest.json (Formats: Manifest Files 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. Integra Luego, inmediatamente abre una ventana para la app del ancho y la altura especificados. Tu fondo de comandos puede contener objetos de escucha, ventanas, mensajes de publicación y datos de inicio adicionales, los cuales usada por la página del evento para administrar la aplicación.

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 app:

Paso 5: Inicia la app

Habilitar marcas

Muchas de las API de Chrome Apps aún son experimentales, por lo que deberías habilitar las APIs experimentales para que puedes probarlos:

  • Ve a chrome://flags.
  • Busca la opción "Experimental Extension APIs" y haz clic en la opción "Habilitar". enlace.
  • Reinicia Chrome.

Carga la app

Para cargar tu aplicación, abre la página de administración de aplicaciones y extensiones haciendo clic en el ícono de configuración de Chrome. y eligiendo Herramientas > Extensiones.

Asegúrate de que esté seleccionada la casilla de verificación Modo de desarrollador.

Haz clic en el botón Cargar extensión sin empaquetar, navega hasta la carpeta de tu aplicación y haz clic en Aceptar.

Abrir nueva pestaña y abrir

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

O cargar e iniciar 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. lo 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 reiniciar cualquier app que se haya ejecutado anteriormente, pero sí lanza la nueva con el contenido actualizado.