Esta página forma parte de la documentación de la plataforma de las Apps de Chrome, que dejó de estar disponible en 2020. Todavía se admite para los clientes de Enterprise y Education en ChromeOS hasta enero de 2025. Obtén más información sobre cómo migrar tu app.

Se usó la API de Cloud Translation para traducir esta página.

Crea apps con AngularJS

Esta guía te ayudará a comenzar a compilar Apps de Chrome con el framework de MVC AngularJS. Para ilustraremos Angular en acción, haremos referencia a una app real compilada con el framework, Google Drive Uploader El código fuente está disponible en GitHub.

Acerca de la aplicación

Cargador de Google Drive

Google Drive Uploader permite a los usuarios ver rápidamente los archivos almacenados en su Google Drive y subir archivos nuevos con las APIs de HTML para arrastrar y soltar. Es un un excelente ejemplo de creación de una app que se comunica con una de las APIs de Google; En este caso, el bucket de Google API de Drive

El cargador usa OAuth2 para acceder a los datos del usuario. La API de chrome.identity controla la recuperación de un token de OAuth para el usuario que accedió. Ya está listo el trabajo. Una vez que tengamos un plan token de acceso, las apps usan la API de Google Drive para acceder a los datos del usuario.

Funciones clave que usa esta app:

Detección automática de AngularJS para CSP
Procesar una lista de los archivos recuperados de la API de Google Drive
API de HTML5 Filesystem para almacenar íconos de archivo sin conexión
Arrastrar y soltar HTML5 para importar o subir nuevos archivos desde el escritorio
XHR2 para cargar imágenes, multidominio
API de chrome.identity para la autorización OAuth
Marcos sin bordes para definir la apariencia de la barra de navegación de la app

Cómo crear el manifiesto

Todas las Apps de Chrome requieren un archivo manifest.json que contenga la información que Chrome necesita para iniciarse la aplicación. El manifiesto contiene metadatos relevantes y enumera los permisos especiales que la app necesita para cuando se ejecute.

Una versión simplificada del manifiesto del Uploader se ve así:

{
  "name": "Google Drive Uploader",
  "version": "0.0.1",
  "manifest_version": 2,
  "oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  },
 ...
  "permissions": [
    "https://docs.google.com/feeds/",
    "https://docs.googleusercontent.com/",
    "https://spreadsheets.google.com/feeds/",
    "https://ssl.gstatic.com/",
    "https://www.googleapis.com/"
  ]
}

Las partes más importantes de este manifiesto son el archivo "oauth2" y "permisos" secciones.

El comando “oauth2” define los parámetros que requiere OAuth2 para hacer su magia. Para crear un "client_id", sigue las instrucciones que aparecen en Cómo obtener tu ID de cliente. Los “alcances” enumera los permisos de autorización para los que el token de OAuth será válido (por ejemplo, las API que la aplicación quiera acceso).

Los “permisos” incluye las URL a las que la aplicación accederá a través de XHR2. Los prefijos de URL son necesarios para que Chrome sepa qué solicitudes entre dominios permitir.

Creando la página del evento

Todas las Apps de Chrome requieren una página o secuencia de comandos en segundo plano para iniciar la app y responder a los eventos del sistema.

En la secuencia de comandos background.js, el cargador de Drive abre una ventana de 500 × 600 px en la página principal. También especifica un alto y un ancho mínimos para la ventana, de modo que el contenido no se acorte demasiado:

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create('../main.html', {
    id: "GDriveExample",
    bounds: {
      width: 500,
      height: 600
    },
    minWidth: 500,
    minHeight: 600,
    frame: 'none'
  });
});

La ventana se crea como una ventana sin bordes (marco: "ninguna"). De forma predeterminada, las ventanas se renderizan con el Barra de cerrar, expandir/minimizar predeterminada del SO:

Google Drive Uploader sin marco

El cargador usa frame: 'none' para renderizar la ventana como un "en blanco" y crea un cierre personalizado botón en main.html:

Google Drive Uploader con marco personalizado

Toda el área de navegación está rodeada

(consulta la siguiente sección). Para ordenar un poco la aplicación, el botón de cierre personalizado queda oculto hasta que el usuario interactúa con esta área:

<style>
nav:hover #close-button {
  opacity: 1;
}

#close-button {
  float: right;
  padding: 0 5px 2px 5px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
</style>

<button class="btn" id="close-button" title="Close">x</button>

En app.js, este botón está conectado a window.close().

Diseña la app con el método de Angular

Angular es un framework de MVC, así que debemos definir la app de tal manera que un modelo, una vista y de forma lógica. Por suerte, esto es insignificante cuando se usa Angular.

La vista es la más fácil, así que empecemos por ahí.

Cómo crear la vista

main.html es la “V” en MVC en el que definimos las plantillas HTML en las que podemos renderizar los datos. En Angular, las plantillas son bloques simples de HTML con un poco de salsa especial.

En definitiva, queremos mostrar la lista de archivos del usuario. Para eso, una sencilla

<ul>
  <li data-ng-repeat="doc in docs">
    <img data-ng-src=""> <a href=""></a>

    <span class="date"></span>
  </li>
</ul>

Tal como se ve: Estampa una

para cada documento en nuestros “documentos” de nuestro modelo de datos. Cada artículo contiene un ícono de archivo, un vínculo para abrir el archivo en la Web y la fecha de última actualización.

Nota: Para que la plantilla sea un HTML válido, usaremos los atributos data-* para el ngRepeat, pero no es necesario. Puedes escribir fácilmente el repetidor como <li ng-repeat="doc in docs">

A continuación, debemos indicarle a Angular qué controlador supervisará la renderización de esta plantilla. Para eso, Usa la directiva ngController para indicarle a DocsController que controle la plantilla. :
```
<body data-ng-controller="DocsController">
<section id="main">
  <ul>
    <li data-ng-repeat="doc in docs">
      <img data-ng-src=""> <a href=""></a> 
      <span class="date"></span>
    </li>
  </ul>
</section>
</body>
```
Ten en cuenta que lo que no ves aquí es que vinculamos objetos de escucha de eventos o propiedades para los datos la vinculación. Angular se encarga del trabajo pesado por nosotros.

El último paso es hacer que Angular ilumine nuestras plantillas. La forma típica de hacerlo es incluir ngApp hasta el final :
```
<html data-ng-app="gDriveApp">
```
Si lo deseas, también puedes reducir el alcance de la aplicación a una parte más pequeña de la página. Solo tenemos un controlador en esta app, pero si después agregamos otros, colocaríamos ngApp en la parte superior hace que toda la página esté lista para Angular.

El producto final de main.html será similar al siguiente:
```
<html data-ng-app="gDriveApp">
<head>
  …

  <base target="_blank">
</head>
<body data-ng-controller="DocsController">
<section id="main">
  <nav>
    <h2>Google Drive Uploader</h2>
    <button class="btn" data-ng-click="fetchDocs()">Refresh</button>
    <button class="btn" id="close-button" title="Close"></button>
  </nav>
  <ul>
    <li data-ng-repeat="doc in docs">
      <img data-ng-src=""> <a href=""></a>  
      <span class="date"></span>
    </li>
  </ul>
</section>
```
Información sobre la Política de Seguridad del Contenido

A diferencia de muchos otros frameworks JS MVC, Angular v1.1.0+ no requiere modificaciones para funcionar dentro de un CSP Funciona de inmediato.

Sin embargo, si usas una versión anterior de Angular entre las versiones 1.0.1 y 1.1.0, deberás indicarle Angular se ejecutará en un “modo de seguridad del contenido”. Para ello, se debe incluir la directiva ngCsp junto con ngApp:
```
<html data-ng-app data-ng-csp>
```
Administra autorizaciones

La app no genera el modelo de datos. En cambio, se propaga desde una API externa (la API de Google Drive). Por lo tanto, se necesita un poco de trabajo para completar los datos de la app.

Antes de poder realizar una solicitud a la API, necesitamos recuperar un token de OAuth para la Cuenta de Google del usuario. Para ello, creamos un método para unir la llamada a chrome.identity.getAuthToken() y almacenar el accessToken, que podemos volver a usar para llamadas futuras a la API de Drive.
```
GDocs.prototype.auth = function(opt_callback) {
  try {
    chrome.identity.getAuthToken({interactive: false}, function(token) {
      if (token) {
        this.accessToken = token;
        opt_callback && opt_callback();
      }
    }.bind(this));
  } catch(e) {
    console.log(e);
  }
};
```
Nota: Pasar la devolución de llamada opcional nos da la flexibilidad de saber cuándo se listo.

Nota: Para simplificar un poco las cosas, creamos una biblioteca, gdocs.js, que administra las tareas de la API.

Una vez que tengamos el token, es momento de realizar solicitudes a la API de Drive y propagar el modelo.

Esqueleto del controlador

El «modelo» para el Uploader es un array simple (llamado docs) de objetos que se renderizará como aquellos

en la plantilla:

var gDriveApp = angular.module('gDriveApp', []);

gDriveApp.factory('gdocs', function() {
  var gdocs = new GDocs();
  return gdocs;
});

function DocsController($scope, $http, gdocs) {
  $scope.docs = [];

  $scope.fetchDocs = function() {
     ...
  };

  // Invoke on ctor call. Fetch docs after we have the oauth token.
  gdocs.auth(function() {
    $scope.fetchDocs();
  });

}

Ten en cuenta que se llama a gdocs.auth() como parte del constructor DocsController. Cuando se agrega los usuarios internos crean el controlador, estamos seguros de tener un token de OAuth nuevo esperando al usuario.

Obteniendo datos

Se diseñó la plantilla. Control andamiado. Token de OAuth a mano. ¿Qué sigue?

Es hora de definir el método del controlador principal, fetchDocs(). Es la torpe del control, Es responsable de solicitar los archivos del usuario y de archivar el array de documentos con datos de las respuestas de la API.

$scope.fetchDocs = function() {
  $scope.docs = []; // First, clear out any old results

  // Response handler that doesn't cache file icons.
  var successCallback = function(resp, status, headers, config) {
    var docs = [];
    var totalEntries = resp.feed.entry.length;

    resp.feed.entry.forEach(function(entry, i) {
      var doc = {
        title: entry.title.$t,
        updatedDate: Util.formatDate(entry.updated.$t),
        updatedDateFull: entry.updated.$t,
        icon: gdocs.getLink(entry.link,
                            'http://schemas.google.com/docs/2007#icon').href,
        alternateLink: gdocs.getLink(entry.link, 'alternate').href,
        size: entry.docs$size ? '( ' + entry.docs$size.$t + ' bytes)' : null
      };

      $scope.docs.push(doc);

      // Only sort when last entry is seen.
      if (totalEntries - 1 == i) {
        $scope.docs.sort(Util.sortByDate);
      }
    });
  };

  var config = {
    params: {'alt': 'json'},
    headers: {
      'Authorization': 'Bearer ' + gdocs.accessToken,
      'GData-Version': '3.0'
    }
  };

  $http.get(gdocs.DOCLIST_FEED, config).success(successCallback);
};

fetchDocs() usa el servicio $http de Angular para recuperar el feed principal mediante XHR. El acceso de OAuth el token se incluye en el encabezado Authorization junto con otros encabezados y parámetros personalizados.

El successCallback procesa la respuesta de la API y crea un objeto de documento nuevo para cada entrada en la feed.

Si ejecutas fetchDocs() en este momento, todo funciona y se muestra la lista de archivos:

Lista recuperada de archivos en Google Drive Uploader

¡Bravo!

Nos faltan esos fantásticos íconos de archivo. ¿Para qué me sirve esto? Una verificación rápida de la consola muestra muchas de errores relacionados con la CSP:

Errores de CSP en Play Console

Esto se debe a que intentamos configurar los íconos img.src en URLs externas. Esto infringe la CSP. Por ejemplo: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. Para solucionar esto, necesitas extraer estos recursos remotos de manera local a la app.

Importa recursos de imagen remota

A fin de que la CSP deje de gritarnos, usamos XHR2 para “importar” los íconos de archivo como BLOB y, luego, configura los img.src a un blob: URL creado por la app.

Este es el elemento successCallback actualizado con el código XHR agregado:

var successCallback = function(resp, status, headers, config) {
  var docs = [];
  var totalEntries = resp.feed.entry.length;

  resp.feed.entry.forEach(function(entry, i) {
    var doc = {
      ...
    };

    $http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
      console.log('Fetched icon via XHR');

      blob.name = doc.iconFilename; // Add icon filename to blob.

      writeFile(blob); // Write is async, but that's ok.

      doc.icon = window.URL.createObjectURL(blob);

      $scope.docs.push(doc);

      // Only sort when last entry is seen.
      if (totalEntries - 1 == i) {
        $scope.docs.sort(Util.sortByDate);
      }
    });
  });
};

Ahora que CSP está conforme nuevamente con nosotros, obtenemos íconos de archivo atractivos:

Google Drive Uploader con íconos de archivo

Sin conexión: almacenamiento en caché de recursos externos

La optimización obvia que se debe realizar: no se deben hacer cientos de solicitudes XHR para cada ícono de archivo en cada llamada a fetchDocs(). Verifica esto en la consola de Herramientas para desarrolladores presionando "Actualizar" varias veces. Cada vez, se recuperan n imágenes:

Modifica successCallback para agregar una capa de almacenamiento en caché. Las adiciones aparecen destacadas en negrita:

$scope.fetchDocs = function() {
  ...

  // Response handler that caches file icons in the filesystem API.
  var successCallbackWithFsCaching = function(resp, status, headers, config) {
    var docs = [];
    var totalEntries = resp.feed.entry.length;

    resp.feed.entry.forEach(function(entry, i) {
      var doc = {
        ...
      };

      // 'https://ssl.gstatic.com/doc_icon_128.png' -> 'doc_icon_128.png'
      doc.iconFilename = doc.icon.substring(doc.icon.lastIndexOf('/') + 1);

      // If file exists, it we'll get back a FileEntry for the filesystem URL.
      // Otherwise, the error callback will fire and we need to XHR it in and
      // write it to the FS.
      var fsURL = fs.root.toURL() + FOLDERNAME + '/' + doc.iconFilename;
      window.webkitResolveLocalFileSystemURL(fsURL, function(entry) {
        doc.icon = entry.toURL(); // should be === to fsURL, but whatevs.

        $scope.docs.push(doc); // add doc to model.

        // Only want to sort and call $apply() when we have all entries.
        if (totalEntries - 1 == i) {
          $scope.docs.sort(Util.sortByDate);
          $scope.$apply(function($scope) {}); // Inform angular that we made changes.
        }

      }, function(e) {
        // Error: file doesn't exist yet. XHR it in and write it to the FS.

        $http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
          console.log('Fetched icon via XHR');

          blob.name = doc.iconFilename; // Add icon filename to blob.

          writeFile(blob); // Write is async, but that's ok.

          doc.icon = window.URL.createObjectURL(blob);

          $scope.docs.push(doc);

          // Only sort when last entry is seen.
          if (totalEntries - 1 == i) {
            $scope.docs.sort(Util.sortByDate);
          }
        });

      });
    });
  };

  var config = {
    ...
  };

  $http.get(gdocs.DOCLIST_FEED, config).success(successCallbackWithFsCaching);
};

Ten en cuenta que, en la devolución de llamada webkitResolveLocalFileSystemURL(), llamamos a $scope.$apply() cuando se ve la última entrada. Por lo general, no es necesario llamar a $apply(). Angular detecta cambios en los datos automáticamente. Sin embargo, en nuestro caso, tenemos una capa adicional de devolución de llamada asíncrona Angular no está al tanto. Debemos indicarle explícitamente a Angular cuándo se actualizó nuestro modelo.

En la primera ejecución, los iconos no estarán en el sistema de archivos HTML5 y las llamadas a window.webkitResolveLocalFileSystemURL() hará que se invoque la devolución de llamada de error. Para eso caso, podemos reutilizar la técnica anterior y recuperar las imágenes. Esta vez, la única diferencia es que cada BLOB se escriba en el sistema de archivos (consulta writeFile()). La consola verifica que comportamiento:

En la próxima ejecución (o al presionar el botón "Actualizar"), la URL pasó a webkitResolveLocalFileSystemURL() existe porque el archivo se almacenó en caché anteriormente. La app establece doc.icon al filesystem: URL del archivo y evita que se genere el XHR costoso para el ícono.

Subir y soltar

Una aplicación que sube contenido es falsa si no puede subir archivos.

app.js controla esta función mediante la implementación de una pequeña biblioteca sobre la función arrastrar y soltar de HTML5 llamada DnDFileController Permite arrastrar archivos desde el escritorio y subirlos. a Google Drive.

Tan solo agregar esto al servicio gdocs hace el trabajo:

gDriveApp.factory('gdocs', function() {
  var gdocs = new GDocs();

  var dnd = new DnDFileController('body', function(files) {
    var $scope = angular.element(this).scope();
    Util.toArray(files).forEach(function(file, i) {
      gdocs.upload(file, function() {
        $scope.fetchDocs();
      });
    });
  });

  return gdocs;
});