cavi-au/consent-o-maticExtensión de navegador que rellena automáticamente los avisos de cookies según tus preferencias
|
|
La mayoría de los sitios web hoy en día quieren procesar tus datos y te piden consentimiento mediante banners de cookies. Aunque estos banners están pensados para darte control, en la práctica a menudo resultan en clics repetitivos y que consumen tiempo, especialmente si tu navegador elimina las cookies al cerrarlo. El mismo banner reaparece y te encuentras tomando las mismas decisiones una y otra vez.
Consent-O-Matic es una extensión de navegador diseñada para resolver este problema. Desarrollada por el Centro de Visualización e Interacción Avanzada (CAVI) de la Universidad de Aarhus, la herramienta maneja automáticamente los banners de consentimiento en tu nombre. Después de configurar tus preferencias durante la instalación, Consent-O-Matic reconocerá muchos banners comunes de Plataformas de Gestión de Consentimiento (CMP), aplicará tus elecciones y confirmará con una pequeña marca de verificación junto al icono de la extensión.
Debido a que Consent-O-Matic es un proyecto de código abierto, cualquiera puede contribuir a su mejora añadiendo nuevas reglas, actualizando reglas antiguas o actualizando la documentación. Este enfoque colaborativo garantiza que la extensión se mantenga al día con el panorama en constante cambio de los banners de consentimiento en línea, y facilita que todos protejan sus datos con menos molestias.
Consent-O-Matic actualmente funciona con más de 200 CMP (consulta la lista completa aquí), incluyendo plataformas importantes como UserCentrics, CookieBot, OneTrust, así como banners de cookies para sitios web específicos.
Consent-O-Matic utiliza el siguiente conjunto de permisos en el navegador cuando está instalado:
La extensión solo se comunica con la web en dos situaciones:
La URL del sitio web reportada a través del icono de la extensión se envía a un sitio web alojado por la Universidad de Aarhus en forma de una cadena de consulta codificada en URI (por ejemplo, LinkedIn se reportará como https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).
Recomendamos encarecidamente instalar directamente a través de la tienda oficial de extensiones de tu navegador (mencionada al principio). Instalar a través de los canales oficiales te mantendrá automáticamente actualizado con las nuevas versiones cuando se publiquen.
También es posible obtener la extensión por otros medios.
Como alternativa a las tiendas de extensiones, puedes descargar manualmente y extraer una de las versiones publicadas desde la página de Lanzamientos en GitHub.
Si haces eso, debes usar la función de desarrollador del navegador para Cargar descomprimida (Chrome) o Cargar complemento temporal (Firefox) y apuntar al manifest.json en el directorio zip descomprimido.
Por último, si pretendes revisar o hacer cambios en el código, puedes compilar e instalar directamente desde el código fuente:``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install
y luego ejecute uno de ```npm run build-firefox``` o ```npm run build-chromium``` o ```npm run build-safari```
Para Firefox o Chromium ahora puedes continuar como antes para instalar archivos de lanzamiento, pero apunta el navegador a la carpeta `build` o a una carpeta donde hayas extraído el zip de build/dist/. Safari requiere cargar el proyecto XCode para construir aún más la aplicación.
No recomendamos instalar desde el código fuente.
## Extendiendo Consent-O-Matic
Si tu CMP favorita no está en la lista actual, siéntete libre de crear una lista personalizada que puedas agregar (haz clic en el icono de la extensión en tu navegador, haz clic en "Más ajustes del complemento", haz clic en "Listas de reglas" e ingresa la URL de tu lista personalizada). Si **realmente** quieres contribuir, no dudes en crear una Pull Request mientras estás en ello.
Los usuarios pueden enviar informes cuando las reglas para sitios web específicos no funcionan. La lista completa de URLs reportadas está disponible [aquí](https://gdprconsent.projects.cavi.au.dk/reports.php). El número indica cuántas veces se reportó la URL. Esta lista actualmente no muestra si/cuándo las reglas para una URL han sido revisadas/ajustadas, así que siempre verifica si la regla sigue rota/faltante antes de comenzar a trabajar en ella.
### Elementos de la regla
* [Estructura Básica](#basic-structure)
* [Detectores](#detectors)
* [Métodos](#methods)
* [Selección del DOM](#dom-selection)
* [Acciones](#actions)
* [Clic](#click)
* [Lista](#list)
* [Consentimiento](#consent)
* [Deslizar](#slide)
* [Si CSS](#if-css)
* [Esperar CSS](#wait-for-css)
* [Por Cada](#for-each)
* [Esperar](#wait)
* [Ocultar](#hide)
* [Cerrar](#close)
* [Coincidencias](#matchers)
* [CSS](#css)
* [Casilla de verificación](#checkbox)
* [Consentimiento](#consent-1)
* [Categorías de Consentimiento](#consent-categories)
* [Ejemplo completo](#full-example)
### Estructura Básica
Una lista de reglas para Consent-O-Matic es una estructura JSON que contiene las reglas para detectar un CMP (Proveedor de Gestión de Consentimiento) y manejar la ventana emergente del CMP cuando se detecta.
Cada CMP es una entrada con nombre y contiene 2 partes, `detectors` y `methods`. El nombre debe ser idealmente el nombre real del CMP subyacente (correctamente capitalizado y con espacios) o del sitio web si es único para ese dominio. El nombre se mostrará en la sección Acerca de la configuración de la extensión, así que hazlo amigable para el usuario.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
Si se añade más de 1 detector a un CMP, el CMP se considera detectado si alguno de los detectores se activa.
Los detectores son la parte que detecta si se debe aplicar un determinado conjunto de reglas. Básicamente, si un detector se activa, se aplicarán los métodos.
Estructura del detector:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
El comparador presente se usa para detectar si el CMP está presente en la página.
Algunos CMPs aún insertan el HTML del popup en el DOM incluso al volver a visitar una página donde ya has dado consentimiento anteriormente. Solo queremos manejar el formulario de consentimiento si realmente se está mostrando en la página. Para esto se utiliza el comparador de visualización.
Tanto el comparador presente como el de visualización siguen la estructura común de [`Matchers`](#matchers).
Tanto el comparador presente como el de visualización pueden ser múltiples comparadores, activando el detector solo si todos los comparadores (respectivamente para presente y visualización) coinciden.
#### Métodos
Los métodos son colecciones de acciones. Hay 4 métodos compatibles con Consent-O-Matic. `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`
Todos los métodos son opcionales y, si están presentes, los métodos se ejecutarán en el orden que se indica a continuación cuando se active un detector.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
Los métodos adoptan la forma:```json { "name": " ... ", "action": { ... } }
donde el nombre es uno de los 4 métodos compatibles y la acción es la [acción](#actions) a ejecutar.
---
### Selección del DOM
La mayoría de las acciones y matchers tienen algún objetivo al que se aplican. Por esta razón, Consent-O-Matic tiene un mecanismo de selección del DOM que puede ayudar fácilmente a seleccionar el elemento DOM correcto.```json
"parent": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
},
"target": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
}
Hay 2 partes, parent y target. El parent es opcional pero si existe se resolverá primero, y se usará como punto de partida para target. Esto permite construir selecciones muy complicadas de elementos que de otro modo no serían posibles con un único selector CSS plano. Un ejemplo de ello es la selección dentro del shadow DOM, donde usar parent para apuntar al elemento con la sombra permite consultar sus hijos con el selector.
Todos los parámetros de parent y target excepto selector son opcionales.
El método de selección funciona utilizando el selector CSS de selector y luego filtrando los nodos DOM resultantes a través de los diversos filtros disponibles:
textFilter filtra todos los nodos que no incluyen el texto dado. También se puede proporcionar como un array "textFilter":["filter1", "filter2"] y luego filtra todos los nodos que no incluyen uno de los filtros de texto dados.
styleFilter filtra basado en estilos calculados (computedStyles). option es la opción de estilo a comparar, por ejemplo position, value es el valor a comparar y negated establece si el valor de la opción debe coincidir o no con el valor dado.
displayFilter se puede usar para filtrar nodos según si están ocultos en la visualización (display hidden) o no.
iframeFilter filtra nodos según si están dentro de un iframe o no.
childFilter es una selección DOM completamente nueva, que luego filtra sobre la selección original, según si se realizó una selección con childFilter o no.
Aquí hay un ejemplo de selección DOM:```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
Este selector primero intenta encontrar el `parent`, que es un elemento DOM con la clase `myParent` que está dentro de un iframe y tiene un elemento DOM hijo con la clase `myChild` que contiene el texto "Gregor".
Luego, usando este parent como "root", intenta encontrar un elemento DOM con la clase `myTarget`.
Esto podría ser entonces el objetivo de una acción o un matcher.
---
### Acciones
Las acciones son la parte de Consent-O-Matic que realmente hacen cosas. Algunas acciones hacen algo a una selección objetivo, otras tienen que ver con el flujo de control.
#### Click
Esta acción simula un clic del ratón sobre su objetivo.
Ejemplo:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab si se establece en true, activará un ctrl+shift+click en lugar de un clic, lo que debería hacer que el enlace, si lo hay, se abra en una nueva pestaña y se enfoque esa pestaña.
En este ejemplo solo usamos un target simple con un textFilter, pero se admite la selección DOM completa.
Esta acción ejecuta una lista de acciones en orden.
Ejemplo:```json { "type": "list", "actions": [] }
`actions` es un array de acciones que se ejecutarán todas en orden.
#### Consent
La acción consent toma un array de consents, e intenta aplicar las selecciones de consentimiento del usuario.
Ejemplo:```json
{
"type": "consent",
"consents": []
}
consents es un array de tipos Consent
Algunos formularios de consentimiento utilizan un control deslizante para establecer un nivel de consentimiento; esta acción permite simular el deslizamiento con dicho control deslizante.
Ejemplo:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` es el elemento DOM de destino para simular el movimiento de deslizamiento.
`dragTarget` es el elemento DOM que se utiliza para la distancia de deslizamiento.
`axis` selecciona si el deslizador debe ir horizontal "x" o vertical "y".
El evento de deslizamiento simulará que el mouse arrastró `target` la distancia desde `target` hasta `dragTarget` en el `axis` dado.
#### Si CSS
Esta acción se utiliza como flujo de control, ejecutando otra acción dependiendo de si una selección DOM encuentra un elemento o no.
Ejemplo:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction es una acción que se ejecutará si la selección del DOM encuentra un elemento.
falseAction se ejecutará cuando la selección del DOM no encuentre un elemento.
Esta acción espera hasta que el selector del DOM encuentre un elemento DOM que coincida. Se usa principalmente si algo en el formulario de consentimiento se carga lentamente y necesita ser esperado.
Ejemplo:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` es el número de veces que se comprobará la presencia del elemento DOM objetivo. El valor predeterminado es 10.
`waitTime` determina el tiempo entre intentos de reintento. El valor predeterminado es 250.
`negated` hace que "Wait For CSS" espere hasta que el objetivo NO sea encontrado.
#### For Each
Si un conjunto de acciones necesita ejecutarse varias veces, pero con diferentes nodos DOM como raíz, se puede usar la acción for each. Ejecuta su acción 1 vez por cada elemento DOM seleccionado por su selección DOM; todas las acciones ejecutadas dentro del bucle for each verán el DOM como comenzando desde el nodo actualmente seleccionado.
Ejemplo:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action es la acción a ejecutar para cada elemento DOM encontrado.
Esta acción espera la cantidad de milisegundos indicada antes de continuar.
Ejemplo:```json { "type": "wait", "waitTime": 250 }
#### Ocultar
Esta acción establece la clase CSS 'ConsentOMatic-CMP-Hider' en la selección del DOM. Las reglas CSS predeterminadas establecerán entonces la opacidad a 0 en el elemento.
Ejemplo:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
Esta acción cierra la pestaña actual, útil para proveedores de consentimiento como Evidon, que tiende a abrir nuevas pestañas con el panel de consentimiento dentro.
Ejemplo:```json { "type": "close" }
### Matchers
Los matchers se utilizan para verificar la presencia de alguna selección del DOM, o el estado de alguna selección del DOM.
#### CSS
Este matcher verifica la presencia de una selección del DOM y devuelve que coincide si existe.
Ejemplo:```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
Este matcher comprueba el estado de un <input type='checkbox' /> y devuelve que coincide si la casilla está marcada.
Ejemplo:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
### Consentimiento
Esto es lo que se utiliza dentro de [Consent Actions](#consent) y define el consentimiento real que el usuario debe otorgar o no.
Cada consentimiento tiene un tipo, que coincide con las categorías de consentimiento dentro de Consent-O-Matic, por lo que si un usuario ha activado la primera categoría de consentimiento (Tipo A) y el consentimiento es de tipo "A", entonces el consentimiento estará habilitado.
Normalmente, el consentimiento se otorga mediante un interruptor o un conjunto de botones de activación/desactivación. Por lo tanto, `consent` tiene un mecanismo para cada uno de estos casos.
Ejemplo:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type es el tipo de categoría de consentimiento que define esta regla y determina si este consentimiento debe estar activado o desactivado dependiendo de la selección del usuario para ese tipo de categoría.
toggleAction esta acción se utiliza para seleccionar el consentimiento si la ventana emergente usa un interruptor o un conmutador para comunicar el consentimiento. La acción se ejecutará si el comparador dice que el consentimiento está en un estado diferente al que el usuario ha solicitado; de lo contrario, no se ejecutará.
matcher es el comparador utilizado para verificar en qué estado se encuentra el consentimiento. Para un comparador de casilla de verificación, el consentimiento se otorga si la casilla está marcada. Para un comparador CSS, el consentimiento se otorga si el comparador encuentra una selección del DOM.
trueAction y falseAction son acciones que se utilizan si el consentimiento debe otorgarse presionando uno de dos botones, en lugar de activarse/desactivarse. Estas se ejecutarán dependiendo de la selección de consentimiento del usuario. Si el usuario ha otorgado consentimiento para este tipo de categoría, se ejecutará trueAction, y falseAction se ejecutará si el usuario no ha otorgado consentimiento para este tipo de categoría.
Si toggleAction y matcher están presentes en la configuración de contenido, se usará toggleAction; si falta uno de ellos, se usarán en su lugar trueAction/falseAction.
Como se ve en la configuración del complemento, en el mismo orden:
Poniendo todo junto, aquí hay un ejemplo completo de una CMP "MyCMP" que tiene 2 categorías de consentimiento a alternar.```json { "MyCMP": { "detectors": [ { "presentMatcher": { "type": "css", "target": { "selector": "#theCMP" } }, "showingMatcher": { "target": { "selector": "#theCMP.isShowing" } } } ], "methods": [ { "name": "OPEN_OPTIONS", "action": { "type": "click", "target": { "selector": ".button", "textFilter": "Change settings" } } }, { "name": "DO_CONSENT", "action": { "type": "list", "actions": [ { "type": "click", "target": { "selector": ".menu-vendors" } }, { "type": "consent", "consents": [ { "type": "A", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "label" } } }, { "type": "F", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "label" } } } ] } ] } }, { "name": "SAVE_CONSENT", "action": { "type": "click", "target": { "selector": ".save-consent-btn" } } } ] } }