InicioHazlo Tu MismoCrear temas para Chrome manifest.json

Crear temas para Chrome manifest.json

Hazlo Tu Mismo•2/26/2013
Bienvenidos a mi post.

Aqui os voy a explicar como crear temas como este para el Chrome.




Para descargar este tema

Para la correcta visualizacion la resolucion del escritorio ha de ser 1920x1080

Para descargar este y otros temas similares visita mi otro post


Para descargar el manifest.json de este tema


Para descargar el manifest.json general con comentarios


Primero: Necesitamos un editor de texto para crear el archivo manifest.json.

Yo utilizo el recomendado por Google que lo podéis descargar desde aquí:

Link del autor
http://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exe

Segundo:Tras instalar el programa pegar el texto de abajo e ir poniendo los valores que queráis.

Tercero : Guardar el archivo en la carpeta que queráis, junto a las imágenes que necesita el tema. (Recordad que tienen que ser .PNG)

Cuarto: Ir a chrome://extensions/ , marcar "Modo desarrollador"

Quinto: Para probar el tema darle a "Cargar extensión descomprimida" y buscáis la carpeta que habéis creado y que contiene el archivo manifest.json con las imágenes y clic en "Aceptar"

Sexto: Cuando tengáis un tema que os guste en chrome://extensions/ darle a empaquetar extensión y seleccionáis el manifest.json


{
"manifest_version": 2,
/* Este archivo a sido creado por BYLokura el 26/02/2013 para http://www.taringa.net/ como tutorial para crear temas en Google Chrome*/
"version": "1.0",
/*La version que querais*/
"name": "BY Lokura & Barriera XX",
/*El nombre que querais*/
"theme": {
"images" : {
/*En esta seccion se definen los nombres de las imagenes para cada elemento en formato, .PNG */
"theme_frame":".png",
/*El marco del navegador de chrome y el área que está detrás de las pestañas. ++ x 80 */
"theme_frame_inactive" :".png",
/*El área igual al anterior, sólo que esta representa el estado inactivo. ++ x 80 */
"theme_frame_incognito" :".png",
/*La misma zona en el modo incógnito, cuando la ventana está activa. ++ x 80 */
"theme_frame_incognito_inactive" :".png",
/* La misma zona, pero en el modo de incógnito, cuando la ventana está inactiva. ++ x 80 */
"theme_toolbar":".png",
/* Esto representa tanto la pestaña actual y la barra de herramientas. ++ x 120 */
"theme_tab_background":".png",
/*Esta es la zona que cubre las pestañas que no son activos. ++ x 65 */
"theme_tab_background_incognito" :".png",
/*Lo mismo que arriba, pero que se utilizan para el modo incógnito. ++ x 65 */
"theme_tab_background_v" :".png",
/*Pendiente de confirmacion, sin uso*/
"theme_ntp_background":".png",
/*La imagen de detras de las aplicaciones de google minimo. 800 x 600 */
"theme_frame_overlay" :".png",
/*La imagen de la parte superiror izquierda del marco. 1100 x 40 */
"theme_frame_overlay_inactive" :".png",
/*Igual que el anterior pero aparece cuando la ventana está inactiva. 1100 x 40 */
"theme_button_background" :".png",
/*Este es el área que cubre los botones de la barra de herramientas. */
"theme_ntp_attribution" :".png",
/*Esta es la imagen que se mostrará en la seccion "tema creado por" */
"theme_window_control_background" :".png"
/*El fondo para los botones de control de la ventana: cerrar, maximizar, minimizar... */
},
"colors" : {
/*Aqui se definen los colores en formato RGB Dec va desde el 0, 0, 0 negro hasta el 255, 255, 255 blanco. */
"frame" : [0, 0, 0],
/*El color del marco exterior más pequeño. */
"frame_inactive" : [0, 0, 0],
/*El color del mismo elemento, pero en modo inactivo. */
"frame_incognito" : [0, 0, 0],
/*El color del mismo elemento, pero en modo incógnito*/
"frame_incognito_inactive" : [0, 0, 0],
/*El color del mismo elemento, pero en incógnito, el modo inactivo. */
"toolbar" : [0, 0, 0],
/*El color del fondo de la barra de herramientas (visible pulsando Ctrl + B) */
"tab_text" : [0, 0, 0],
/*El color del texto, en el título de la pestaña activa. */
"tab_background_text" : [0, 0, 0],
/*El color del texto, en el título de todas las pestañas inactivas. */
"bookmark_text" : [0, 0, 0],
/*El color del texto de los marcadores. */
"ntp_background" : [0, 0, 0],
/*El color de fondo del tema. */
"ntp_text" : [0, 0, 0],
/*El color de todo el texto que se presenta en el fondo. */
"ntp_link" : [0, 0, 0],
/*El color de los links que aparecen en el fondo del área. */
"ntp_link_underline" : [0, 0, 0],
/*El color del subrayado de todos los enlaces de la zona de fondo. */
"ntp_header" : [0, 0, 0],
/*El color de los marcos de sección cuando el puntero del ratón esta encima. */
"ntp_section" : [0, 0, 0],
/*El color de la zona cerrado recientemente y otros dispositivos. */
"ntp_section_text" : [0, 0, 0],
/*El color del texto de la misma zona que el anterior. */
"ntp_section_link" : [0, 0, 0],
/*El color de los enlaces de la misma zona que el anterior. */
"ntp_section_link_underline" : [0, 0, 0],
/*El color del subrrayado de la misma zona que el anterior. */
"button_background" : [0, 0, 0],
/*Sin confirmar aún: el color de los botones de control de la ventana (cerrar, maximizar, etc) */
"control_background" : [0, 0, 0]
/*El color de fondo de todos los botones de la barra de herramientas. */
},
"tints" : {
/*Cambiar el tono, la saturacion y la luminosidad de las imagenes los valores van de 0 a 1. */
"buttons" : [0.0, 0.0, 0.0],
/*El tono de los botones atras adelante recargar etc. */
"frame" : [0.0, 0.0, 0.0],
/*El tono del marco*/
"frame_inactive" : [0.0, 0.0, 0.0],
/*El tono que se aplica cuando la ventana esta inactiva. */
"frame_incognito" : [0.0, 0.0, 0.0],
/*El tono del marco cuando esta en modo incognito. */
"frame_incognito_inactive" : [0.0, 0.0, 0.0],
/*El tono del marco cuando esta en incognito y inactivo*/
"background_tab" : [0.0, 0.0, 0.0]
/*El tono de las pestañas inactivas. */
},
"properties" : {
"ntp_background_alignment" :"",
/*La propiedad que indica la alineación de la imagen de fondo. (top, bottom, left, right) */
"ntp_background_repeat" :"",
/*La propiedad que indica si se repite la imagen de fondo para abarcar todo el area (repeat, no-repeat, repeat-x, repeat-y. */
"ntp_logo_alternate" :""
/*Puede ser 0 o 1 */
}
}
}
/* Este archivo a sido creado por BYLokura el 26/02/2013 para http://www.taringa.net/ como tutorial para crear temas en Google Chrome*/

PD: Para las imágenes he utilizado el Gimp e descargado fotos de Internet y he recortado cada una arreglo a la resolución de mi pantalla para que todo quede bien, en mi caso 1920x1080:
images
"Frame" : Todos de 1920x85
"theme_ntp_background" : 1920x956
"theme_ntp_attribution" : 150x150


Y para la imagen en las pestañas en lugar de un color solido:
Tints
"frame_inactive" : [0.6, 0.5, 0.5],
"frame" : [0.6, 0.5, 0.5],



Espero os haya servido de ayuda, cuidado con las comas y los corchetes si os da error, seguramente sea por eso.
Saludos



Datos archivados del Taringa! original
28puntos
732visitas
0comentarios
Actividad nueva en Posteamelo
0puntos
5visitas
0comentarios
Dar puntos:

Dejá tu comentario

0/2000

Autor del Post

b
bylokura🇦🇷
Usuario
Puntos0
Posts2
Ver perfil →
PosteameloArchivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.

CONTACTO

18 de Septiembre 455, Casilla 52

Chillán, Región de Ñuble, Chile

Solo correo postal

© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.

Contenido preservado con fines históricos y culturales.