CRX Themes

CREACION DEL ARCHIVO MANIFEST.JSON
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:\tema crx

les recomiendo crearla en el directorio principal del disco (sea c:\, d:\ o el que deseen), debido a que
despues les va a darcomplicaciones si lo colocan en un directorio largo.

Eso lo acabo de escribir tachado por que con la version dev del chrome (no estoy
seguro si en las versiones stable y beta tambien) hay una forma mucho mas facil,
o sino pueden usar mi miniaplicacion para embalarlo. ​
(mas adelante lo detallo
bien)
bueno, continuo...

2º: abrir el bloq de notas...

, y pegar este codigo:
"version": "2.6",
"name": "camotheme",
"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.

bueno, decia: [71, 105, 91]
entonces 71 es R (red = rojo)
105 es G (green =verde)
y 91 es B (blue = azul)
en tints explico el codigo hsl
--en el tutorial original ahora decia como embalarlo, pero en este voy a explicarles
primero el codigo...
Bien, volvamos al codigo:
teniamos esto:

{
"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"
}
}
}
"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, asegurense de tenerno tener la ventana
totalmente maximizada, presionen Ctrl+F, y tomen una captura de la pantalla (en
mi teclado: "Impr Pant Pet Sis")

como puede observarse en la imagen, el alto de su "theme_frame" debe ser el que
esta marcado en rojo; y el ancho deberia ser el ancho de la resolucion de sus
monitores. (aunque puede ser cualquier ancho, solo recuerden que la imagen no
se redimensiona, asi que siquieren que se vea toda la imagen, nunca deberan
pasarse del ancho de su resolucion).
"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

(para los que no saben descargarla)
(solo descargarla, porque es una imagen transparente y blanca, asi que no vana
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.
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",

esta imagen es el fondo de una nueva pestaña, cambienlo si lo desean.
"theme_frame_overlay" : "images/theme_frame_stripe.png",
realmente este no lo he editado, pero supongo que es la imagen...