LanguageExtensiones relacionadas:
Cómo crear tus propios temas para Chrome
Los temas de Google Chrome son complementos favoritos para sus usuarios y puedes encontrar miles de ellos en internet, siendo la fuente más grande la Chrome Web Store.
Pero muchos usuarios curiosos quisieran crear sus propios temas personales o incluso compartirlos con sus amigos y el mundo exterior.
Este pequeño tutorial te mostrará la estructura interna de los temas de Google y cómo puedes crear el tuyo a partir de cualquier imagen.
Estructura de los temas de Chrome
Un tema de Chrome no es más que un complemento que no contiene código fuente extenso ni scripts y básicamente consta de dos partes:
- imágenes usadas para el tema en sí
- un único archivo manifest.json que contiene parámetros y configuraciones para formar el tema
Estas dos partes se empaquetan en un solo archivo con la extensión de archivo CRX.
Cómo preparar manualmente un tema de Google
Ciertamente necesitarás un fondo de pantalla adecuado que quieras usar para tu tema y también una idea básica sobre tu tema en general. Pero también necesitarás varias herramientas de software para lograrlo:
- Un editor de imágenes. Usa cualquier programa que te guste, hay muchas herramientas de software disponibles para ti. Incluso el básico Microsoft Paint servirá, pero por supuesto puedes usar herramientas profesionales, como Adobe Photoshop o CorelDraw.
- Un editor de texto. El básico Notepad servirá, al igual que cualquier otro programa similar.
Una vez que tengas todo esto, solo sigue los pasos a continuación para crear tu propio tema de Google Chrome.
Paso 1: Crea un directorio con el nombre del tema
Una de las primeras cosas que harás es crear un nuevo directorio para tu tema y nombrarlo según tu tema. Digamos "my_new_theme". Dentro de esta carpeta crea otra llamada "images", que contendrá todas las imágenes usadas por tu nuevo tema.
Paso 2: Crea las imágenes para tu tema
Para crear un tema funcional necesitarás cuatro elementos básicos de imagen, o cinco, si quieres añadir tu propio logo personal al tema, pero eso es totalmente opcional. Todas las imágenes usadas en los temas de Google Chrome deben estar en formato de archivo PNG.
Si tienes tus imágenes en otro formato, primero tendrás que convertirlas a PNG con cualquier software o herramienta de conversión en línea disponible.
Aquí está la lista de cada elemento de imagen con los requisitos adecuados:
Marco del tema (frame.png)
Esta imagen se usa para el marco de tu nuevo tema de Google Chrome y como imagen de fondo de los botones "Cerrar", "Minimizar" y "Maximizar". Si no quieres usar esta imagen, entonces tu tema creado actuará como el tema predeterminado de Chrome y mostrará la barra de título nativa del sistema operativo.
La imagen del marco del tema necesita una altura mínima de 30px sin limitación en su ancho. Este elemento usualmente se hace con los colores más oscuros.
Barra de herramientas del tema (toolbar.png)
Este elemento del tema se muestra como fondo de los botones "Adelante", "Atrás" y "Actualizar" y también como la barra de herramientas de extensiones. Representa tanto la pestaña actual como la barra de herramientas.
Necesita una altura mínima de 120px sin limitación en su ancho.
Fondo de pestaña del tema (tab.png)
Se usa para pestañas inactivas si hay más pestañas abiertas al mismo tiempo. Tiene un requisito mínimo de altura de 65px y sin limitaciones en su ancho.
Fondo de la página de nueva pestaña (background.png)
Esta será la imagen principal que se muestra cuando se abre una nueva pestaña. El tamaño mínimo recomendado de la imagen es 800x600, pero para mejor apariencia, usa fondos de pantalla que coincidan con la resolución de pantalla del dispositivo donde se usará el tema. Esta imagen debe usar los colores más claros para una mejor presentación visual.
Atribución del tema (theme_ntp_attribution.png)
El logo del creador, se muestra en la esquina inferior derecha del tema de Google Chrome. Es completamente opcional.
Una vez que tengas todos los elementos de imagen preparados, solo muévelos al directorio "images" que creaste en el paso 1, por lo que la carpeta debería contener de 4 a 5 imágenes.
Paso 3: Crea el archivo manifest
Cada complemento de Google Chrome que puede instalarse como aplicación web o tema tiene su propio archivo "manifest.json". Este archivo proporciona al navegador información sobre el tema.
Puedes encontrar más información sobre el formato de archivo JSON en nuestra base de datos.
El manifest contiene código para 4 cosas diferentes: nombre, imágenes, colores, tintes y propiedades. Un ejemplo del código en el archivo manifest.json se muestra a continuación.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Solo abre un archivo nuevo en notepad, copia y pega el código y guarda con el nombre manifest. Después, simplemente cambia la extensión del archivo de txt a json.
Ahora que has creado tu propio archivo manifest.json, veamos qué significa y hace cada una de las secciones y qué puedes editar.
Nombre
Ese es el nombre de tu nuevo tema de Google Chrome. El nombre en el archivo manifest.json debe corresponder al nombre de tu tema escrito en el Paso 1.
Imágenes
Las imágenes del Paso 2 de nuestra guía están definidas en esta sección del archivo manifest.json. Si quieres cambiar el nombre del archivo o la carpeta de tus imágenes, también debes hacer un cambio correspondiente en el archivo manifest.json.
Colores
Cada elemento en esta sección define los colores usados en el tema. Hay solo un par de cosas que recordar sobre los colores:
- El color del texto del botón de la barra de descarga es el mismo que el color del texto de los marcadores.
- El color de fondo de la barra de estado es el mismo que el color de la barra de herramientas que elijas.
- El color del texto de la barra de estado es el mismo que el color del texto de la pestaña que elijas.
Tintes
El elemento tint especifica el tinte de color para todos los iconos dentro de todos los botones en la barra de herramientas (adelante, atrás, actualizar, etc.). Cada tinte tiene un valor flotante de 0 a 1 o -1. El valor -1 significa que no se harán cambios en el color de ese elemento. Los valores de los tintes están organizados como [Matiz, Saturación, Luminosidad] y puedes usar valores como por ejemplo 0.256, 0.2, -0.4 para definir el color. Puedes ajustar los valores para hacer que los botones se mezclen o resalten.
Propiedades
La sección de propiedades en el archivo manifest.json se usa para definir las configuraciones para la imagen de fondo principal. La imagen de fondo puede alinearse ya sea arriba, abajo o en el centro del navegador y puedes elegir repetirla a lo largo del eje x o y, o no repetirla en absoluto.
Paso 4: Empaquetar y previsualizar tu tema
Ahora deberías tener tus imágenes listas en el directorio "my_new_theme/images" y un archivo manifest.json en el directorio "my_new_theme".
Para probar tu nuevo tema, abre tu navegador Google Chrome y escribe "chrome://extensions" en la barra de direcciones y presiona la tecla enter.
Una vez dentro, haz clic en el "+" junto al enlace "Modo desarrollador" en el lado derecho. Ahora deberías ver un par de opciones aparecer en la página. Haz clic en "Cargar extensión descomprimida" y navega por tu computadora hasta el directorio "my_new_theme". Selecciónalo y presiona OK. Si un archivo manifest.json adecuado está presente en esa carpeta, Chrome cargará tu nuevo tema. Ahora revisa tu navegador para ver si todo está bien.
Puedes repetir este proceso hasta que ajustes tu propio tema de Google a la perfección. Una vez que estés satisfecho con tu tema personalizado de Google Chrome, solo presiona el botón "Empaquetar extensión" y Chrome creará el tema y lo guardará en el directorio "my_new_theme" con una extensión de archivo CRX. También se creará un archivo con extensión PEM, que es una clave privada para tu tema de Google, que te permitirá actualizar esta extensión en el futuro, si subes tu tema a la Galería de Extensiones de Chrome.
Si todo va bien, Google Chrome te dirá que los archivos .crx y .pem han sido creados y también mostrará la ubicación de estos nuevos archivos. Después de haber creado un par de temas para Google Chrome, verás que realmente no es tan difícil.
Cómo hacer temas para Chrome más fácilmente
Por supuesto, puedes hacer las cosas más rápido si usas algunas de las herramientas dedicadas para temas de Chrome. Una de esas herramientas fue, ahora descontinuada, Theme Creator. Aún puedes descargarla desde la web store y usarla, pero ya no es soportada por Google y puede tener fallos. Aun así, es una de las formas más convenientes para crear rápidamente nuevos temas para Chrome.