Crear tus propios Themes para Chromium/Chrome + Yapa

Bueno, hace unos días me vino en ganas tener todo al estilo de Mac, pero al decir verdad, desde hace rato estoy buscando un theme para Chromium/Chrome similar al theme original de la versión del navegador de Google para Mac OS.

Siguiendo un tutorial me dispuse a crearme el mio propio y el resultado es este:

Click para agrandar

Tal como se ve, ha quedado bastante parecido, principalmente por los botones de ventana (minimizar, maximizar y cerrar que hacen que haya quedado bastante y no totalmente). La imagen dentro de Chromium corresponde a la versión de Chromium para Mac OS.

La forma de hacerlo desde GNU/Linux la encontré en Ubuntu Life y hacerlo es realmente muy sencillo.

• Lo primero que vamos a necesitar es crearnos una carpeta contenedora, le asignamos el nombre del Theme que querramos.
• Dentro de ella creamos otra carpeta que se va a llamar Images.
• Dentro de la carpeta contenedora vamos a crear un archivo de texto que se llamará manifest.json y su contenido será similar a este:

{
"name": "Mac OS X",
"theme": {
"colors": {
"bookmark_text": [ 1, 1, 1 ],
"frame": [ 255, 255, 255 ],
"ntp_background": [ 255, 255, 255 ],
"ntp_header": [ 255, 255, 255, 255 ],
"ntp_link": [ 0, 0, 0 ],
"ntp_section": [ 1, 1, 1, 0.2 ],
"ntp_section_link": [ 1, 1, 1 ],
"ntp_section_text": [ 1, 1, 1 ],
"ntp_text": [ 0, 0, 0 ],
"tab_background_text": [ 0, 0, 0 ],
"tab_text": [ 0, 0, 0 ],
"toolbar": [ 200, 200, 200 ]
},
"images": {
"theme_frame": "Images/theme_frame.png",
"theme_ntp_attribution": "Images/theme_ntp_attribution.png",
"theme_ntp_background": "Images/theme_ntp_background.png",
"theme_tab_background": "Images/theme_tab_background.png",
"theme_toolbar": "Images/theme_toolbar.png"
},
"properties": {
"ntp_background_alignment": "bottom",
"ntp_background_repeat": "no-repeat",
"ntp_logo_alternate": 1
},
"tints": {
"buttons": [ 118, -11, -1 ]
}
},
"version": "1.0"
}

Las variables no son muchas, respecto a los valores de color RGB saber que 0 o 1 son oscuros y el 255 es el blanco, a partir de ahí podemos jugar con las combinaciones. Una buena forma de ayudarnos es utilizar cualquier editor gráfico y modificar los colores para ver los valores. Los valores RGB son aquellos que están identificados con [ 255, 255, 255 ]; luego los valores identificados con ya 4 variables [ 1, 1, 1, 0.2 ] pertenecen a lo que a iluminación, saturación y demás se refiere.. La excepción está con los “buttons” que tiene 3 variables pero que hace referencia a saturación luminosidad y demás.

Muy buena información y cómo hacerlo en Windows encontramos en CasitaWeb. Ahora bien, respecto de las imágenes, son 5 las que necesitamos:

• theme_frame.png: Es el color o imagen de fondo que veremos tras las pestañas del navegador.
• theme_ntp_attribution.png: La firma del tema que aparece en la esquina inferior derecha de las pestañas vacías. Conviene que tenga el fondo transparente.
• theme_ntp_background.png: la imagen de fondo en la pestaña vacía, en nuestro caso un la dejé transparente totalmente.
• theme_tab_background.png: el color en el que aparecerán las pestañas no activas. Conviene que no sea opaco, sino una capa que incluya blanco sobre el color de fondo sin perder del todo la transparencia.
• theme_toolbar.png: El color de la barra de navegación y la pestaña activa.

Lo demás es ya cuestión de imaginación y sobre todo prueba y error con las variables.

Una vez que tengamos todo listo, la forma de compilarlo es:

• En Chromium/Chrome (desde Ubuntu hablo) vamos a Herramientas > Extensiones, o lo que es igual tipear en la barra de direcciones chrome://extensions/
• En la ventana de Extensiones, vamos a expandir el Modo de Programador y vamos a clickear sobre Extensión de empaque..
• En la ventana que se nos abre vamos a indicarle donde está la dirección de la carpeta contenedora, en mi caso fue /home/casco/Escritorio/Mac OS X Chromium. El segundo rectángulo hace referencia a la ubicación de la clave para editar dicho theme en el futuro.

NOTA: Ingresar la dirección de la clave a mi no me funcionó, cada prueba tuve que borrar el .crx y la clave y empaquetar de nuevo hasta llegar a buen puerto ¬¬.

Quienes deseen descargar el theme, acá el enlace, descargar, descomprimir y arrastrar al browser.

Saludos!