Creando Themes para Google Chrome/Chromium

En el muy buen blog de Ubuntu Life a travez del blog Soft-Libre encontré un post en el cual explica como realizar nuestro propio theme para el navegador Google Chrome/Chromium.

Aqui les dejo una pequeña reseña de como hacerlo:

  • Creamos el directorio contenedor del theme
  • Dentro de este creamos otro directorio que se va a llamar “Images”
  • Y dentro del primer directorio creamos un archivo llamado “manifest.json” con algo parecido a este código:
<code>{
 "name": "Nombre_del_theme",
 "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"
 }

Basicamente el archivo debe contener la ubicación de las imágenes que va incluir nuestro theme, además de las especificación de los colores que va a manejar donde 0 o 1 es negro y 255 es blanco.  La combinación se da del color y la iluminación se da por:

El color se forma con 3 números de entre 0 y 255 separados por comas (RGB 255, 255, 255)

Y la luminosidad y la saturación se dan por la combinación de 4 números separados por comas (1 , 1, 1, 0.2)

Las imágenes se deben colocar dentro del directorio “Images”, y son las siguientes:

  • 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 hermoso lobo ibérico.
  • 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.

Con esto hecho solo falta crear el tema y eso lo podemos hacer directamente desde el navegador colocando:

chrome://extensions

Hacemos click en “Pack extension…” y en la ventana que aparece ya indicas la ruta de la carpeta donde se  creo el tema. Hacemos click en Aceptar y  ya te crea un tema con el nombre del directorio y con extención “.crx” que podras utilizar con tu Google Chrome. Tambien te creara un archivo .pem que sera el archivode permisos que se deberá usar si se quiere editar el tema.

Visto en: Soft-Libre

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s