Personaliza tu navegador

Seguro que alguna vez te has preguntado como personalizar el aspecto de tu navegador Google Chrome mas alla de los temas predeterminados. La buena noticia es que crear tu propia extension de tema es mas sencillo de lo que parece: solo necesitas configurar un archivo con los colores que prefieras.

Configuracion local

1. Crea una carpeta para los archivos de configuracion

Crea una carpeta en tu computadora donde guardaras los archivos necesarios para tu extension.

2. Crea el archivo manifest.json

Dentro de la carpeta, crea un archivo llamado manifest.json con la siguiente estructura:

{
  "manifest_version": 3,
  "name": "Simple Theme demo 1",
  "version": "1.0",
  "theme": {
    "colors": {
      "background_tab": [255, 0, 0],
      "background_tab_inactive": [0, 255, 0],
      "background_tab_incognito": [0, 0, 255],
      "background_tab_incognito_inactive": [255, 255, 0],
      "bookmark_text": [255, 0, 255],
      "button_background": [0, 255, 255],
      "frame": [128, 128, 128],
      "frame_inactive": [255, 128, 0],
      "frame_incognito": [128, 255, 0],
      "frame_incognito_inactive": [0, 128, 255],
      "ntp_background": [255, 0, 128],
      "ntp_header": [0, 255, 128],
      "ntp_link": [128, 0, 255],
      "ntp_text": [255, 255, 255],
      "omnibox_background": [0, 128, 128],
      "omnibox_text": [128, 128, 0],
      "tab_background_text": [0, 0, 128],
      "tab_background_text_inactive": [0, 128, 0],
      "tab_background_text_incognito": [128, 0, 0],
      "tab_background_text_incognito_inactive": [128, 128, 128],
      "tab_text": [255, 255, 0],
      "toolbar": [255, 0, 64],
      "toolbar_button_icon": [0, 255, 64],
      "toolbar_text": [64, 0, 255]
    }
  }
}

3. Modifica los valores de color

Cada valor es un arreglo RGB [rojo, verde, azul] con valores de 0 a 255. Cambia los valores segun tus preferencias de color.

4. Carga la extension en Chrome

1. Abre chrome://extensions/ en Google Chrome
2. Activa el Modo desarrollador en la esquina superior derecha
3. Haz clic en Cargar extension sin empaquetar
4. Selecciona la carpeta que creaste

5. Disfruta tu tema personalizado

Una vez cargada la extension, veras tu tema aplicado de inmediato. Puedes modificar los colores en el manifest.json y recargar la extension para ver los cambios.

Referencia de colores

Propiedad	Descripcion
frame	Color del marco principal del navegador
toolbar	Color de la barra de herramientas
tab_text	Color del texto en la pestana activa
ntp_background	Color de fondo de la pagina de nueva pestana
omnibox_background	Color de fondo de la barra de direcciones
bookmark_text	Color del texto de los marcadores

Experimenta con diferentes combinaciones y crea un tema que se adapte a tu estilo.