24 diciembre, 2011 a las 14:26

Y llegamos al final del curso, con lo que hemos aprendido hasta ahora somos capaces de crear extensiones completamente funcionales, que modifiquen sitios, alteren el comportamiento del navegador, puedan configurarse, etc. Falta por tanto darle las últimas pinceladas: Hacer que nuestra extensión se actualice automáticamente, empaquetarla y publicarla en la Chrome Web Store.

Como siempre te aconsejamos que si no has leído alguno de las anteriores entregas lo hagas ahora:

Actualizar automáticamente nuestra extensión

Cuando hayamos preparado nuestra extensión seguramente cada día se nos ocurriran nuevas mejoras o características que añadirle por eso chrome tiene un sistema de actualizaciones realmente sencillo tanto para el usuario que no tiene que realizar ninguna acción como para el programador que con solo unas pocas líneas de código podrá configurarlo. Pasamos a ver nuestro manifest.json

{
"name": "Mi extensión",
"version": "1.0",
"description": "Extensión que se autoactualiza",
"browser_action": {
"default_icon": "icono.png"
},
"update_url": "http://blogdemigueldiaz.com/actualizaciones.xml"
}

Cómo veis lo único nuevo es la línea “update_url”, esta linea lo que hace es definir una URL la cual leerá Chrome para averiguar cual es la última versión de la extensión y si no es la misma que la instalada en el equipo actualizarla.

Ahora pasamos a ver la estructura del archivo actualizaciones.xml

<!--?xml version='1.0' encoding='UTF-8'?-->
<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
  <app appid='ID_DE_NUESTRA_EXTENSION'>
    <updatecheck codebase='http://www.blogdemigueldiaz.com/extension.crx' version='VERSION_DE_LA_EXTENSION' />
  </app>
</gupdate>

Como podéis imaginar en la línea updatecheck deberéis cambiar la URL por la que contenga el paquete de vuestra extensión y donde dice VERSION_DE_NUESTRA_EXTENSION deberemos poner la última versión publicada.
Además hay que cambiar la línea “” poniendo la ID de nuestra extensión, este dato podéis conseguirlo desde el menú de extensiones, desplegando la información acerca de nuestra extensión:

Una vez hecho el navegador comprobará automáticamente el fichero XML y si la versión no corresponde con la instalada la volverá a descargar e instalar automáticamente desde la URL que hemos proporcionado, por tanto cuando saquemos una nueva versión deberemos modificar el fichero XML.

Creando un paquete de nuestra extensión

Otra cosa realmente sencilla, simplemente vamos a nuestro menú de extensiones y seleccionamos “Empaquetar extensión”, seleccionamos el directorio donde tenemos la extensión y pulsamos empaquetar.

Una vez empaquetada nos creará el archivo de la extensión “.crx” y una clave privada, esta clave la necesitaremos cuando saquemos actualizaciones de nuestra extensión ya que al volverlo a empaquetar nos la pedirá.

Publicando nuestra extensión en la Chrome Web Store

Cuando hemos creado nuestra extensión lo que queremos es que sea descargada por todo el mundo, para ello una de las cosas mas eficaces es publicarlo en la Chrome Web Store, para ello:

  1. Elimina la línea de autoupdate de tu manifest.json (Las extensiones publicadas se actualizan automaticamente desde la propia Web Store.
  2. Comprime la carpeta de tu extensión en .zip
  3. Accede a https://chrome.google.com/webstore/developer/dashboard y sigue el asistente.

Ya sabemos todo acerca de las extensiones para Chrome y ahora ¿A que esperas para crear tu extensión?

Acerca de Miguel Díaz

Informático, enamorado de la programación, diseño Web y el deporte.
Categorías: Chrome, Programación. Etiquetas: , , , , , , , , , , .

5 comentarios en Crear una extensión para Chrome (VI) – Actualización automática, paquetización y publicación en la Chrome Web Store

  1.  nentab dice:

    ¡Gracias por este capítulo!

  2.  Leandro Trucco dice:

    Miguel, estuve viendo tus 6 tutoriales para crear extensiones para crome y lo que quiero hacer es nada mas que me avise por notificación de escritorio cuando se haya agregado una fila mas a una tabla html echa por MYSQL y la verdad que se me quemaron los libros. Me ayudarías?
    Si es así por favor envíame un mail. Gracias.

  3.  Kenlos dice:

    Bueno, me he revisado los 6 tutos igual que Leadro Trucco :D pero no consigo saber varias cosas:
    quisiera tener en la parte de configuracion algo para que escriban sencillamente su nombre de usuario… y que este se añada al popup.html SOLO ESO! mas nada para configuracion
    tambien quisiera saber como poner texto ENCIMA de una imagen, saber esto e llenaria de alegría, tambien:
    si ves puse en web un link para enviarme un mp a mi cuenta de taringa, quisiera saber si hay una forma de incuir en el popup (como sea) un link que me lleve a este y de una vez tenga un asunto y/o un mensaje ya predeterminado
    Esto es lo que mas nesecito para terminar mi extension :( y lo ultimo es: a donde puedo subir mi archivo .xml para tener mi extension autoactualizable, espero su respuesta y muchas gracias por sus aportes que me han servido muchisimo. *pulgar up*

    •  Miguel Díaz dice:

      Deberías crear un input de texto, dale de id por ejemplo “usuario”, en la función para guardar haces esto:

      localStorage[“usuario”] = document.getElementById(“usuario”).value

      Para poner texto encima de una imagen debes ponerle en el estilo z-index: 10,posición absoluta y definirle la posición con top y left, por ejemplo.

      Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *