Documentación

La extensión funciona en Chrome 120 y versiones posteriores, y en Firefox 136 y versiones posteriores.

Permitir los scripts de usuario

Los navegadores solo ejecutan el JavaScript de una extensión en las páginas web con un permiso aparte. Sin él, los estilos de las reglas se siguen aplicando, pero su JavaScript no se ejecuta; en ese caso, la ventana emergente y la página de opciones explican cómo activarlo.

• Chrome 138 y versiones posteriores: abre los detalles de la extensión (chrome://extensions → User JavaScript and CSS → «Detalles») y activa «Permitir secuencias de comandos de usuario». No hace falta el modo de desarrollador.
• Chrome 120–137: activa «Modo de desarrollador» en la esquina superior derecha de chrome://extensions. Es un requisito de Google para todas las extensiones con scripts de usuario.
• Firefox: haz clic en «Permitir scripts de usuario» en la ventana emergente y confírmalo en el diálogo del navegador. Firefox también puede dejar la extensión sin acceso a los sitios: entonces la ventana emergente muestra «Permitir acceso a sitios», y la página de opciones, «Permitir» en un aviso en la parte superior.

Reglas

En el contexto de la extensión, una regla es código JavaScript o CSS (o ambos) que se ejecuta en las páginas web que coinciden con sus patrones de URL.

Patrones de URL

• Un patrón tiene la forma <scheme>://<host>/<path>: https://site.com/*;
• Varios patrones se separan con comas: https://one.com/*, https://two.com/*;
• Una exclusión se marca con !: !https://site.com/admin/*.

La extensión convierte cada patrón al formato de patrón de coincidencia del navegador, y la ventana emergente y el contador en el icono muestran exactamente dónde ejecutará la regla el navegador.

Un patrón con esquema se usa casi tal como está escrito:

Escribes	La regla se ejecuta en
https://site.com/*	site.com y www.site.com, no en otros subdominios
https://*.site.com/*	site.com y todos sus subdominios
https://site.com/path	las páginas que empiezan por /path en site.com y www.site.com
https://site.com	todo site.com y www.site.com
http*://site.com	site.com y www.site.com por http y https
http://localhost:*/*	localhost en cualquier puerto

Un patrón sin esquema significa el sitio con sus subdominios, por http y https:

Escribes	La regla se ejecuta en
site.com, *site.com*, *.site.com	site.com y todos sus subdominios
www.site.com	www.site.com y site.com
пример.рф	пример.рф y sus subdominios
site.com/path	las páginas que empiezan por /path en site.com y sus subdominios
localhost:3000	localhost en el puerto 3000
/admin	las páginas con /admin en la ruta, en cualquier sitio
*	cualquier sitio

Una exclusión con esquema se usa exactamente como está escrita: https://site.com/*, !https://www.site.com/* se ejecuta en site.com, pero no en www.site.com. Una exclusión sin esquema sigue la tabla anterior: !site.com/admin excluye /admin en site.com y sus subdominios.

Puertos en Firefox. Un patrón de Firefox no puede indicar un puerto, así que el puerto se descarta: localhost:3000 se ejecuta en localhost en cualquier puerto, y una exclusión con puerto excluye todos los puertos del host. Un patrón para cualquier sitio en un solo puerto (*://*:8080/*) se convertiría en un patrón para todos los sitios, por eso en Firefox se marca en rojo.

Se marca en rojo un patrón que el navegador no acepta: un * dentro del host (https://shop*.site.com/*, https://site.*/*) o un esquema en el que la extensión no puede ejecutarse (chrome-extension://, ws://). Ese patrón se omite y los demás patrones de la regla siguen funcionando. Si se rechaza una exclusión, la regla no se ejecuta en ningún sitio hasta que la corrijas: de lo contrario, se ejecutaría en las páginas que excluiste.

Propiedades de JavaScript

Los botones del encabezado del panel de JavaScript:

• Entorno aislado: el script ve el DOM de la página, pero no sus variables ni sus funciones.
• Todos los marcos: el script también se ejecuta en los marcos cuya dirección coincide con la regla. Cada marco se comprueba por separado con los patrones de la regla.
• Ejecutar al inicio: el script se ejecuta antes de que se construya el DOM; si no, después, pero antes de que se carguen recursos como imágenes y marcos. Ten en cuenta que el evento DOMContentLoaded no se dispara para un script así.

Propiedades de los estilos

Los botones del encabezado del panel de estilos:

• Preprocesador Sass: activado (por defecto), el estilo se compila como Sass o SCSS y la sintaxis se elige según haya {;} en el código; desactivado, el estilo se aplica tal como está escrito.
• !important automático en todas las propiedades: agrega !important a cada propiedad del estilo compilado.
• Aplicar en marcos anidados: el estilo también llega a los marcos dentro de la página. Activado por defecto.
• Aplicar en shadow DOM: el estilo también se aplica dentro de los componentes web con un shadow DOM abierto. Desactivado por defecto.

Un estilo cambia en las pestañas abiertas al instante, sin volver a cargar la página: al editarlo, al activar la regla o al cambiar su dirección.

Reglas compartidas

Las reglas compartidas permiten crear dependencias entre reglas y controlar de forma explícita el orden en que se cargan. Cualquier regla se puede marcar como «Regla compartida» en el menú de la regla: así se agrega a la lista de módulos de las demás reglas. De las reglas incluidas solo se toma el contenido JS y CSS; el resto de sus propiedades se ignora.

Versiones anteriores

La extensión guarda el código de una regla antes de cada uno de los últimos 10 guardados: «Versiones anteriores» en el menú de la regla. Una versión vuelve al editor y se aplica después de guardarla. Las versiones se guardan solo en este navegador: no se exportan ni se guardan en la nube.

Otras funciones

• El marcador Regla activada se ignora cuando la regla es compartida y otra regla la incluye;
• El marcador Guardar en la nube solo significa que la regla se incluye en la copia de seguridad en la nube;
• «Usar como plantilla para reglas nuevas» en el menú de la regla: las reglas nuevas empiezan con el código y las propiedades de esta regla.

Módulos

A las reglas se pueden agregar módulos JS y CSS externos, que se ejecutan antes que ellas. Se admiten enlaces https://...; la extensión reconoce el tipo de recurso.

El contenido del módulo se descarga y se guarda en el almacenamiento de la extensión. Se actualiza con «Volver a descargar» en la ventana de edición del módulo o de forma programada, con el ajuste «Actualización de bibliotecas»: manual, diaria o semanal. Si una descarga falla, se conserva la versión anterior del módulo.

Almacenamiento

Almacenamiento local

• «Descargar JSON» guarda tus reglas, bibliotecas y configuración en un archivo.
• «Cargar JSON» abre una lista de las reglas y bibliotecas del archivo. «Agregar selección» agrega las marcadas a las tuyas: las reglas que ya tienes se reemplazan, y su código anterior queda en las versiones anteriores. «Reemplazar todo» reemplaza tus reglas y bibliotecas por las del archivo.

Sincronización del navegador

Si la sincronización está activada en el navegador, puedes subir una copia de seguridad a la nube con tu cuenta de Google o de Firefox. Este método no requiere iniciar sesión aparte ni configurar nada: storage.sync es el tipo de sincronización estándar para extensiones. Las copias de seguridad se suben y se descargan a mano.

El espacio está limitado a 100 KB, así que antes de subirla se quitan de la copia el contenido de los módulos externos y todos los datos generados, y el resultado se comprime. Si aun así no hay espacio suficiente, desactiva «Guardar en la nube» en las reglas que no necesites en la copia de seguridad.

Agentes (MCP)

Los agentes de IA (Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop y otros) pueden leer y editar tus reglas a través del servidor MCP local user-js-css-mcp. La función es experimental.

1. Abre la sección MCP de la página de opciones y activa «Permitir conexiones MCP».
2. Elige tu cliente. La sección ofrece un comando listo, un enlace de instalación con un clic o un bloque de configuración, con el secreto de conexión ya incluido.
3. Reinicia el cliente: inicia el servidor por sí mismo, y la sección muestra que el cliente está conectado.

El servidor se ejecuta en tu equipo (127.0.0.1) y requiere Node.js 18+ o Bun 1.2+. La extensión y el servidor comprueban el secreto de conexión antes de cada solicitud, así que otro programa del equipo no puede usarlos. «Reemplazar», junto al secreto, desconecta todos los clientes configurados con el anterior.

Un agente puede listar, leer, buscar, crear y cambiar reglas y bibliotecas, averiguar qué reglas se ejecutan en una página, leer por qué una regla no funciona, hacer una copia de seguridad de las reglas en un archivo y restaurarlas, y devolver una regla a una versión anterior.