Personaliza tu Chrome/Chromium, crea tu propio tema .crx

Sigo en mi tarea de crear un tema personalizado y a mi gusto (ventajas que tiene el usar Linux, que te permite cambiar muchos aspectos del sistema operativo). ahora le ha tocado el turno al navegador Google Chrome / Chromium. Seguramente si usas este navegador conoceras los temas .crx con los que puedes cambiar el aspecto del navegador. Aqui por ejemplo, puedes encontrar una buena seleccion. Pues bien, ahora veremos como crear nuestro propio tema, ademas que no es nada complicado.

Lo primero es crear una carpeta con el nombre de nuestro tema, por ejemplo creamos una carpeta nueva y la llamamos “Wolf” (o el nombre que quieras usar para el tema). Dentro de esa carpeta creas una carpeta llamada “Images” que es donde iras dejando los ficheros graficos que utilizaras para crear el tema. En la carpeta principal tendras que crear un fichero nuevo llamado “manifest.json“, con un contenido similar al siguiente:

{
   "name": "nombre_de_vuestro_tema",
   "theme": {
      "colors": {
         "bookmark_text": [ 255, 255, 255 ],
         "frame": [ 255, 255, 255 ],
         "ntp_background": [ 45, 42, 41 ],
         "ntp_header": [ 0, 0, 0, 1 ],
         "ntp_link": [ 255, 255, 255 ],
         "ntp_section": [ 68, 68, 68, 0.3 ],
         "ntp_section_link": [ 255, 255, 255 ],
         "ntp_section_text": [ 255, 255, 255 ],
         "ntp_text": [ 255, 255, 255 ],
         "tab_background_text": [ 0, 0, 0 ],
         "tab_text": [ 255, 255, 255 ],
         "toolbar": [ 0, 0, 0 ]
      },
      "images": {
         "theme_frame": "Image/theme_frame.png",
         "theme_ntp_attribution": "Image/theme_ntp_attribution.png",
         "theme_ntp_background": "Image/theme_ntp_background.png",
         "theme_tab_background": "Image/theme_tab_background.png",
         "theme_toolbar": "Image/theme_toolbar.png"
      },
      "properties": {
         "ntp_background_alignment": "bottom",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "buttons": [ 1, 1, 1 ]
      }
   },
   "version": "0.1"
}

Si examinas el contenido del fichero veras que basicamente defines las imagenes que formaran parte del tema y estableces los colores de los diferentes elementos.

Ahora añadiremos las imagenes. Las tienes que colocar dentro de la carpeta “Images”, 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.

Aqui puedes ver una captura de como iria quedando la estructura de carpetas en el tema que estoy creando en mi caso:

Y ya esta todo!! solo nos hace falta crear el tema y eso lo podemos hacer directamente desde el browser usando los herramientas de desarrollo que lleva incorporadas. Para ello, abre el navegador y pon en la barra de direcciones la siguiente URL:

chrome://extensions/

Te aparecera una ventana similar a la siguiente:

Pues ahi haces click en “Pack extension…” y en la ventana que aparece ya indicas la ruta de la carpeta donde estas creando el tema. Pulsas en “Aceptar” y automaticamente ya te crea un tema nombre_de_la_carpeta.crx que podras utilizar con tu navegador. Tambien te creara un fichero con extension .pem que sera un fichero de clave de permisos que tendras que usar si quieres volver a editar el tema.

Para usar el tema .crx puedes arrastrarlo y soltarlo sobre una ventana vacia del browser o tambien poner en la barra de de direcciones file:///ruta_a_la_carpeta/donde/tengas/el/tema/.crx

Nota: si no te carga el tema .crx (p.ej desde Google Chrome) usa el boton “Load Unpacked Extension…” y pasandole la ruta del directorio donde has creado el tema, no la ruta del fichero .crx

Como ejemplo os dejo mi tema Wolf2.crx (nota: wordpress no me permite subir directamente ficheros .crx asi que esta como .doc, una vez descargado renombralo de .doc a .crx)

Espero vuestros temas, si creas uno realmente interesante, no dudes en dejarme el enlace en los comentarios, si es de lobos le dare +1 punto mas ^^

Mas informacion | Como hacer Google Chrome themes | CasitaWeb

31 Responses to “Personaliza tu Chrome/Chromium, crea tu propio tema .crx”


  1. 1 Marito diciembre 4, 2009 en 7:31 am

    felicidades piwi, veo q ahora si que te estas poniendo las pilas (en realidad siempre haz aportado a la comunidad) en el aspecto de hacer tus temas. La verdad es q son de muy buen gusto! sigue así. xD

  2. 2 ldd diciembre 4, 2009 en 3:06 pm

    piwi en tu screenshot de nautilus como logras poner en esa posicion la la barra de navegacion de archivos ?

  3. 3 mams.827 diciembre 4, 2009 en 6:57 pm

    buen tutorial, lo estaba buscando hace rato, ahora si puedo dedicarme a personalizar el chrome, gracias. Espera que en unos dias te envio un tema para que lo evalues (Estoy pensando si le coloco lobos, para ganar la bonificacion¿?)

  4. 4 Feri diciembre 6, 2009 en 4:32 am

    Man bueno el tutorial solo una duda, el fichero .json en que programa lo creas o con que programa lo editas??

  5. 6 jProgr diciembre 7, 2009 en 4:58 am

    Excelente, gracias por el dato =D

    Por cierto,eres el mejor post de la semana en mi blog http://bit.ly/8MAIAb :3

  6. 7 lavidalinux diciembre 7, 2009 en 1:13 pm

    Te ha quedado muy bueno y lo estoy usando. Hace rato estoy haciendo uno, pero no lo he terminado. Ahora me animo de nuevo y cuando lo termine te lo mando. ¡Saludos!

  7. 8 Mario enero 7, 2010 en 4:21 pm

    No puedo instalar ningún tema con extensión .crx
    Tengo el Chrome y el Chromium para Linux ambos actualizados y me es imposible instalar los temas de la forma que dices.
    Alguna sugerencia??

  8. 9 Luciano mayo 30, 2010 en 8:21 pm

    Hye gente! tengo una duda, y necesito ayuda con urgencia, me volvere maricon si nadie me ayuda .. T.T si alguien ha echo temas los ha instalado sin problemas, por fin k me agregue al msn (luci257@gmail.com) y que me responda a 3 preguntitas..

    Gracias antisipadas al que se aventure ! xD

  9. 10 Misaki Aomesita Phantomhive agosto 12, 2010 en 2:08 am

    Hola!

    Primero, muchas gracias por el tutorial ^w^ y bueno, estoy intentando hacer mi tema y al darle en Pack extension y seleccionar mi carpeta al dar aceptar me aparece: “no se ha podido cargar la ruta “C:\Documents and Settings\Aome\Escritorio\Sebastian/theme_frame.pgn” del tema ” ké hago en este caso??

    Gracias de antemano

  10. 11 Malejita Ospina septiembre 24, 2010 en 11:01 pm

    Hola,
    Gracias por la información, me ha tenido loca toda esta semana lo del tema para el Chrome, es que no encuentro uno que me agrade de veras.
    La verdad no entiendo mucho lo de los códigos pero tengo la ventaja de que mi novio si, entonces le voy a pedir que me enseñe y me ayude.
    De nuevo gracias

  11. 12 José Carlos marzo 24, 2011 en 8:36 pm

    muy bueno pero yo tengo una duda aver si alguien me la sabe responder, es que cuando le doy a empaquetar extensión, le pongo la ruta y le doy a aceptar me dice: Manifest is not valid JSON.Line:1, column:1, Root value must be an array or object.
    Cracias

    • 13 Lobo marzo 24, 2011 en 9:22 pm

      Revisa el JSON de tu manifest fichero, tienes algo mal.
      puede que te falte cerrar una llava } o algo similar.

      • 14 José Carlos marzo 25, 2011 en 3:51 pm

        Gracias y disculpa por las molestias pero ahora me pone que no puede cargar la imagen theme_frame.png
        Qué debo hacer? y gracias de nuevo :S

      • 15 Lobo marzo 25, 2011 en 6:13 pm

        tienes que tener la imagen o la ruta a la imagen en el mismo directorio del fichero de manifiesto, tambien ten cuidado con que no haya bailado algun caracter en el nombre, debe llamarse exactamente igual.

  12. 16 RockyRock julio 2, 2011 en 2:55 am

    Está genial!!! Por fin encontré un sitio en el que pueda crear un tema de Google Chrome!!!

  13. 17 RockyRock julio 2, 2011 en 3:05 am

    Por cierto… Cuando pongo pack extension… y pongo la direccion del fichero me pone: Manifest is missing or unreadable. Qué hago???

  14. 19 sol septiembre 10, 2011 en 2:18 am

    hola! hice un tema siguiendo todas tus instrucciones, pero cuando lo quise instalar me sale un alerta q dice “could not decode theme image”.
    porq puede ser?

  15. 20 jeorge marzo 24, 2012 en 9:06 pm

    Lo acabo de probar siguiendo todas tus instrucciones pero cuando lo abro en el chrome, en la parte de las pestañas es como si se superpusieran unas con otras, te pongo una imagen a ver si me puedes ayudar a solucionar el problema, gracias de antemano ;-) :

  16. 22 Jonathan enero 29, 2013 en 10:33 pm

    al empaquetar me sale un mensaje q dice:

    error de empaquetado de extension
    Ya existe una clave privada para la extensión especificada. Vuelve a utilizar esa clave o elimínala primero.

    ayuda plisssssssss

    • 23 Lobo marzo 12, 2013 en 7:58 pm

      lo mismo, que ya generaste un empaquetado para tu extensión y ya se creo un fichero con la clave. para generar de nuevo tienes que darle a abrir y seleccionar ese fichero con la clave, o simplemente borrar la que ya se te creo. Prueba a las malas a generar la extensión en otro directorio distinto.

  17. 24 Jonathan enero 29, 2013 en 10:39 pm

    ME SALE =(
    The ‘manifest_version’ key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.
    AYUDA PLISS


  1. 1 Tema para Google Chrome « Weapp’s Trackback en diciembre 6, 2009 en 9:02 pm
  2. 2 Chrome crx theme Creator « Ubuntu Life Trackback en diciembre 9, 2009 en 9:07 pm
  3. 3 Chrome crx theme Creator | el Blog de Dertin Trackback en diciembre 11, 2009 en 9:29 pm
  4. 4 Crear tus propios Themes para Chromium/Chrome + Yapa « Soft-Libre Trackback en diciembre 23, 2009 en 11:43 pm
  5. 5 Creando nuestra propia extensión para Chrome « Ubuntu Life Trackback en febrero 4, 2010 en 8:02 pm
  6. 6 Unixmen » Chrome crx theme Creator Trackback en diciembre 26, 2011 en 6:40 pm

Deja un comentario

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





The next version of Ubuntu is coming soon


¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
diciembre 2009
L M X J V S D
« nov   ene »
 123456
78910111213
14151617181920
21222324252627
28293031  

Blog Stats

  • 26,730,702 hits

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.040 seguidores

%d personas les gusta esto: