Asset Injector
Permite a los administradores inyectar CSS y JavaScript en la salida de la página basándose en reglas configurables sin modificar los temas.
asset_injector
Install
composer require 'drupal/asset_injector:8.x-2.21'
composer require 'drupal/asset_injector:8.x-2.20'
Overview
Asset Injector combina la funcionalidad de CSS Injector y JS Injector en un solo módulo, proporcionando a los administradores del sitio una forma rápida y sencilla de añadir fragmentos personalizados de CSS y JavaScript a su sitio Drupal sin adentrarse en el desarrollo completo de temas.
Todas las configuraciones se almacenan como Config Entities en la base de datos, haciéndolas completamente exportables a través de Features, exportación de configuración con Drush, o instalaciones de módulos personalizados usando archivos YAML. Esta arquitectura es particularmente útil para instalaciones multisitio donde cada sitio puede tener diferencias menores que son más fáciles de gestionar mediante configuraciones por sitio.
El módulo aprovecha la API de Condition Plugin de Drupal para proporcionar una inyección de assets flexible y consciente del contexto. Los assets pueden mostrarse condicionalmente basándose en rutas URL, tipos de contenido, roles de usuario, temas, idiomas y cualquier otro plugin de condición registrado. El módulo también soporta preprocesamiento y agregación de CSS/JS para un rendimiento óptimo.
Features
- Inyección de CSS con soporte para tipos de medios (all, print, screen) y preprocesamiento/agregación de CSS
- Inyección de JavaScript con dependencia opcional de jQuery, opciones de carga en header/footer, y preprocesamiento/agregación de JS
- Visualización condicional de assets usando el sistema de Condition Plugin de Drupal (rutas, tipos de contenido, temas, idiomas, roles de usuario)
- Soporte de fallback noscript para inyectores de JavaScript con mapeo de regiones por tema
- Integración con el editor de código ACE con resaltado de sintaxis para CSS y JavaScript
- Almacenamiento basado en configuration entities permitiendo exportación/importación vía Drush, Features, o archivos YAML
- Integración con CKEditor para assets CSS para aplicar estilos dentro del editor WYSIWYG
- Función de duplicación de assets para crear rápidamente variaciones de inyectores existentes
- Funcionalidad de Activar/Desactivar sin eliminar assets
- Lógica de condiciones AND/OR permitiendo combinaciones flexibles de reglas
- Invalidación automática de caché cuando se crean, actualizan o eliminan assets
- Soporte para el sistema de anulación de configuración de Drupal para variaciones de assets específicas por dominio/idioma
Use Cases
Correcciones rápidas de CSS para páginas específicas
Añadir correcciones de CSS específicas para páginas concretas sin modificar los archivos del tema. Por ejemplo, hacer flotar un elemento de la barra lateral en páginas de edición de nodos creando un inyector CSS con condición de ruta '/node/*/edit'.
Scripts de seguimiento de terceros
Inyectar scripts de seguimiento de terceros (analíticas, píxeles de marketing) en páginas específicas o tipos de contenido sin modificar las plantillas del tema. Usar condiciones para limitar los scripts al entorno de producción o secciones específicas.
Estilos para pruebas A/B
Crear múltiples inyectores CSS con diferentes enfoques de estilo, activarlos/desactivarlos para probar rápidamente cambios visuales sin despliegue. Usar la función de duplicar para crear variaciones.
Personalización multisitio
En una configuración multisitio, usar Asset Injector para gestionar ajustes de CSS/JS específicos por sitio mientras se comparte una base de código y tema común.
Mejoras de JavaScript sin módulos personalizados
Añadir pequeñas mejoras de JavaScript (comportamientos de scroll, validaciones de formularios, ajustes de UI) sin crear módulos personalizados. Útil para constructores de sitios que necesitan adiciones rápidas de funcionalidad.
Hojas de estilo para impresión
Añadir CSS específico para impresión usando el selector de tipo de medio para optimizar la impresión de páginas para tipos de contenido o secciones específicas.
Estilos basados en roles
Aplicar diferentes estilos para usuarios autenticados, administradores o roles específicos usando la condición de rol de usuario.
Ajustes específicos por idioma
En sitios multilingües, inyectar CSS o JavaScript específico del idioma para manejar diseños RTL, ajustes de fuentes o comportamientos específicos de la localización.
Sobrescrituras específicas del tema
Aplicar CSS/JS solo cuando un tema específico está activo, útil para hacer ajustes a temas contribuidos sin crear un subtema.
Contenido de fallback noscript
Proporcionar contenido alternativo para usuarios con JavaScript deshabilitado, como versiones estáticas de elementos dinámicos o mensajes informativos.
Tips
- Usar el botón 'Guardar y continuar editando' al iterar sobre código CSS/JS para evitar navegar de vuelta al formulario de edición repetidamente.
- Aprovechar la función de duplicar para crear variaciones de inyectores existentes con ligeras modificaciones.
- Usar la configuración 'Requerir todas las condiciones' estratégicamente - desmarcarla permite lógica OR que puede simplificar escenarios de segmentación complejos.
- Para rendimiento, mantener 'Preprocesar' habilitado a menos que se necesite específicamente que el asset se cargue por separado para propósitos de depuración.
- Cargar JavaScript en el footer (por defecto) en lugar del header para un mejor rendimiento de carga de página.
- Exportar configuraciones de inyectores vía Drush (drush config:export) para rastrear cambios en control de versiones.
- Usar comodines de ruta como /admin/* para apuntar a secciones enteras del sitio.
- Al depurar, deshabilitar temporalmente otras agregaciones de CSS/JS para aislar problemas con inyectores específicos.
Technical Details
Admin Pages 7
/admin/config/development/asset-injector
Página principal del módulo Asset Injector que proporciona enlaces a las páginas de administración de CSS Injector y JS Injector.
/admin/config/development/asset-injector/css
Lista todas las configuraciones de inyectores CSS con sus condiciones y estado. Proporciona operaciones para editar, eliminar, activar, desactivar y duplicar cada inyector CSS.
/admin/config/development/asset-injector/css/add
Formulario para crear una nueva configuración de inyector CSS con código, condiciones y opciones avanzadas.
/admin/config/development/asset-injector/css/{asset_injector_css}
Formulario para editar una configuración de inyector CSS existente. Los mismos campos que el formulario de añadir pero con el nombre máquina deshabilitado.
/admin/config/development/asset-injector/js
Lista todas las configuraciones de inyectores JavaScript con sus condiciones y estado. Proporciona operaciones para editar, eliminar, activar, desactivar y duplicar cada inyector JS.
/admin/config/development/asset-injector/js/add
Formulario para crear una nueva configuración de inyector JavaScript con código, condiciones, fallback noscript y opciones avanzadas.
/admin/config/development/asset-injector/js/{asset_injector_js}
Formulario para editar una configuración de inyector JS existente. Los mismos campos que el formulario de añadir pero con el nombre máquina deshabilitado.
Permissions 2
Hooks 1
hook_asset_injector_library_info_build_alter
Permite a otros módulos alterar el array de bibliotecas dinámicas generado por Asset Injector antes de que sea devuelto a Drupal para su inclusión.
Troubleshooting 6
Verificar que el inyector esté habilitado (Estado: Activado), comprobar que las condiciones estén correctamente configuradas y limpiar todas las cachés. También asegurarse de que el usuario tenga los permisos apropiados para ver el contenido.
Asegurarse de que el directorio public://asset_injector exista y tenga permisos de escritura para el servidor web. Verificar los permisos del sistema de archivos en Administración > Informes > Informe de estado.
La integración con CKEditor requiere que el inyector CSS esté habilitado y no tenga condiciones que impidan su carga. Verificar el estado del inyector y las condiciones.
Verificar la consola del navegador en busca de errores de JavaScript. Asegurarse de que el código no incluya etiquetas <script> envolventes. Si el código requiere jQuery, habilitar la casilla 'Requiere jQuery'.
Asset Injector invalida automáticamente las cachés al guardar, pero si se usa caché externa (Varnish, CDN), puede ser necesario purgar esas cachés manualmente.
Drupal 9.5+ cambió la condición de tema para soportar solo un tema único. Revisar la configuración de condición de tema y seleccionar solo un tema por asset.
Security Notes 7
- El permiso 'Administrar assets JS' permite la inyección de JavaScript arbitrario y solo debe otorgarse a administradores de alta confianza ya que puede usarse para ataques XSS.
- El permiso 'Administrar assets CSS' es menos peligroso pero aún puede usarse para alterar la apariencia de la página maliciosamente o inyectar ataques basados en CSS.
- Ambos permisos tienen 'restrict access: true' indicando que deben gestionarse cuidadosamente.
- El código de los assets no se sanitiza - los administradores son responsables de asegurar que el código inyectado sea seguro.
- Considerar usar headers de Content Security Policy (CSP) para proporcionar protección adicional contra ataques de scripts inyectados.
- Revisar todas las configuraciones de inyectores periódicamente, especialmente en sitios con múltiples administradores.
- Los archivos de assets generados se almacenan en directorios públicamente accesibles - no incluir información sensible en el código inyectado.