Creacion de temas crx para chrome

Esto lo escribi para mi blog, cualquier duda pregunten.
Primera Parte

me gustaria enseñarles como se crean temas para chrome en formato *.crx.
antes que nada, aclaro que solo servirian desde la version 3.0 (...en adelante)
bueno, comienzo:

1º: crear la carpeta del tema, por ejemplo:
C:   ema crx
les recomiendo crearla en el directorio principal del disco (sea c:, d: o el que deseen), debido a que despues les va a dar complicaciones si lo colocan en un directorio largo.

2º: abrir el bloq de notas, y pegar este codigo:
 
"version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

veran, donde dice (por ej.):
...[71, 105, 91]
 es el codigo RGB del color , solo cambienlo por el que deseen.

PD: mas adelante explico a que corresponde cada punto

3ºcuando creen las imagenes, y terminen de editar el manifest.json, llega la hora de embalar el tema, para eso debemos abrir una ventana de comandos [tecla windows + R y escribir "cmd"]

y primero debemos ir al directorio donde se encuentra el ejecutable del chrome:
en mi caso:
cd c: [presionar enter]
cd C:Documents and SettingsFlipperHksConfiguración localDatos de programaGoogleChromeApplication [presionar enter]
ahora a embalar, escribir:
 chrome.exe --pack-extension=c:   ema crx [presionar enter]
reemplazar tema crx por el nombre de la carpeta donde se encuentran el archivo manifest.json y la carpeta con las imagenes.

luego aparece una ventanita, presionar aceptar, y ya tienen el archivo crx en "c:" (o en donde se encuentre la carpeta tema crx [o como le hayan llamado])

luego si desean actualizarlo deben hacer lo mismo pero escribir:
chrome.exe --pack-extension=c:   ema crx --pack-extension-key=c:   ema crx.pem
reemplazando "tema crx.pem" por el nombre de el archivo pem creado.

Segunda Parte

ahora explico:
en:
     
"theme_frame" : "images/theme_frame_camo.png",

deben colocar la localizacion de la imagen que corresponde a el frame del tema, osea, a el fondo de la parte "superior de la ventana hasta debajo de el cuadro de busqueda"; para crear el archivo "theme_frame_came.png" (o como quieran llamarle)
solo abran una instancia del chrome, maximicen la misma, presionen Ctrl+F, y tomen una captura de la pantalla (en mi teclado: "Impr Pant Pet Sis")
 Luego con un editor de imagenes, pegan la captura, y cortan la seccion antes mencionada, con el ancho deseado (maximo su resolucion de pantalla).


en:

     
"theme_toolbar" : "images/theme_toolbar_camo.png",

esto es el fondo de la barra de marcadores, yo uso esta imagen para editarla:
http://www.fileden.com/files/2008/11/2/2169693/theme_toolbar_default.png
(solo descargarla, porque es una imagen transparente y blanca, asi que no van a ver nada)
para editarla, solo editar la parte blanca, la cual corresponde a la zona de la barra de marcadores y la barra de busqueda.


en:
     
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",

esta imagen es el fondo de una nueva pestaña, cambienlo si lo desean

en:
     
"theme_frame_overlay" : "images/theme_frame_stripe.png",

realmente este no lo he editado, pero supongo que es la imagen correspondiente a la ventana inactiva.
overlay significa superposicion, de modo que (solo estoy suponiendo, no se realmente) si tienen el fondo rojo, y a esta imagen la hacen amarrilla, la ventana inactiva seria naranja. Nuevamente, solo SUPONGO.

ahora, vamos a     "colors" : {
en:
     
"frame" : [71, 105, 91],

esto es el color del frame (ya explique lo que es el frame), el cual es tapado por la imagen, pero igualmente pongan un color similar al color principal de la imagen que creen.

en:      
     
    "toolbar" : [207, 221, 192],

este es el color de la toolbar (tambien ya la explique)

en:
     
"button_background" : [255, 255, 255]

este es el fondo de los botones cerrar, maximizar y minimizar
deben editarlo debido a que el frame no lo cambia

ahora a     "tints" : {
en:
     
"buttons" : [0.33, 0.5, 0.47]
(que es el unico en tints)
corresponde al color de los botones: atras, adelante, actualizar, home, favoritos, "controla la pagina actual" y "personaliza y controla google chrome".
Este no es RGB, es HSL (Hue-Saturation- Lightness)

hasta aca estamos.

pueden entrar a "Creating a theme" para ver la explicacion oficial:
"http://dev.chromium.org/developers/design-documents/themes"

y a "Packaging an extension" para ver como embalar una extension
"http://dev.chromium.org/developers/design-documents/extensions/packaging"

tambien pueden entrar a "theme resources"
en donde encontraran todos los puntos que pueden utilizar en el archivo manifest.json
"http://src.chromium.org/viewvc/chrome/trunk/src/chrome/app/theme/theme_resources.grd"

si desean pueden visitar chromespot.com
y tambien chromeplugins.org



espero les haya gustado mi tutorial, hasta luego...


todo copiado de mi blog, si quieren verlo, solo ingresen a mi perfil en sitio web.