cavi-au/consent-o-maticExtensão de navegador que preenche automaticamente pop-ups de cookies com base em suas preferências
|
|
A maioria dos sites hoje quer processar seus dados e pede consentimento usando banners de cookies. Embora esses banners tenham o objetivo de dar a você controle, na prática eles geralmente resultam em cliques repetitivos e demorados — especialmente se o seu navegador limpa os cookies quando você o fecha. O mesmo banner reaparece, e você se vê fazendo as mesmas escolhas repetidamente.
Consent-O-Matic é uma extensão de navegador projetada para resolver esse problema. Desenvolvida pelo Centro de Visualização e Interação Avançada (CAVI) da Universidade de Aarhus, a ferramenta lida automaticamente com banners de consentimento em seu nome. Depois que você define suas preferências durante a instalação, o Consent-O-Matic reconhece muitos banners comuns de Plataforma de Gerenciamento de Consentimento (CMP), aplica suas escolhas e confirma com uma pequena marca de verificação ao lado do ícone da extensão.
Por ser um projeto de código aberto, qualquer pessoa pode contribuir para sua melhoria adicionando novas regras, atualizando regras antigas ou atualizando a documentação. Essa abordagem colaborativa garante que a extensão acompanhe o cenário em constante mudança dos banners de consentimento online — e torna mais fácil para todos protegerem seus dados com menos complicação.
Atualmente, o Consent-O-Matic funciona com mais de 200 CMPs (consulte a lista completa aqui), incluindo plataformas importantes como UserCentrics, CookieBot, OneTrust, bem como banners de cookies de sites específicos.
O Consent-O-Matic utiliza o seguinte conjunto de permissões no navegador quando instalado:
A extensão comunica-se com a web apenas em duas situações:
O URL do site reportado através do ícone da extensão é enviado para um site hospedado pela Universidade de Aarhus na forma de uma string de consulta codificada em URI (por exemplo, LinkedIn será reportado como https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).
Recomendamos a instalação diretamente pela loja oficial de extensões do seu navegador (mencionada no topo). A instalação pelos canais oficiais mantém você automaticamente atualizado com novas versões quando são lançadas.
Também é possível obter a extensão por outros meios.
Como alternativa às lojas de extensões, você pode baixar e extrair manualmente uma das versões publicadas na página de Releases no Github.
Se fizer isso, terá de usar a funcionalidade de desenvolvedor do navegador para Carregar Desempacotado (Chrome) ou Carregar Complemento Temporário (Firefox) e apontar para o manifest.json no diretório zip desempacotado.
Por fim, se pretende rever ou fazer alterações no código, pode compilar e instalar diretamente a partir do código-fonte:``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install
e, em seguida, execute um dos ```npm run build-firefox``` ou ```npm run build-chromium``` ou ```npm run build-safari```
Para Firefox ou Chromium, você pode agora prosseguir como acima para instalar arquivos de lançamento, mas aponte o navegador para a pasta `build` ou para uma pasta onde extraiu o zip de build/dist/. O Safari requer carregar o projeto XCode para construir ainda mais um aplicativo.
Não recomendamos a instalação a partir do código fonte.
## Estendendo o Consent-O-Matic
Se o seu CMP favorito estiver faltando na lista atual, sinta-se à vontade para criar uma lista personalizada que você pode adicionar (clique no ícone da extensão no seu navegador, clique em "Mais configurações do add-on", clique em "Listas de regras" e insira a URL da sua lista personalizada.). Se você **realmente** quiser contribuir, sinta-se à vontade para criar um Pull Request enquanto faz isso.
Os usuários podem enviar relatórios quando as regras para sites específicos não estão funcionando. A lista completa de URLs relatados está disponível [aqui](https://gdprconsent.projects.cavi.au.dk/reports.php). O número indica quantas vezes o URL foi relatado. Esta lista atualmente não mostra se/quando as regras para um URL foram verificadas/ajustadas, então sempre verifique se a regra ainda está quebrada/faltando antes de começar a trabalhar nela.
### Elementos da Regra
* [Estrutura Básica](#basic-structure)
* [Detectores](#detectors)
* [Métodos](#methods)
* [Seleção de DOM](#dom-selection)
* [Ações](#actions)
* [Clique](#click)
* [Lista](#list)
* [Consentimento](#consent)
* [Deslizar](#slide)
* [Se CSS](#if-css)
* [Aguardar CSS](#wait-for-css)
* [Para Cada](#for-each)
* [Aguardar](#wait)
* [Ocultar](#hide)
* [Fechar](#close)
* [Correspondentes](#matchers)
* [CSS](#css)
* [Caixa de Seleção](#checkbox)
* [Consentimento](#consent-1)
* [Categorias de Consentimento](#consent-categories)
* [Exemplo Completo](#full-example)
### Estrutura Básica
Uma lista de regras para o Consent-O-Matic é uma estrutura JSON que contém as regras para detectar um CMP (Provedor de Gerenciamento de Consentimento) e lidar com o popup do CMP quando ele é detectado.
Cada CMP é uma entrada nomeada e contém 2 partes, `detectors` e `methods`. O nome deve idealmente ser o nome real do CMP subjacente (corretamente capitalizado e com espaçamento) ou do site se for único para aquele domínio. O nome será mostrado na seção Sobre das configurações da extensão, então torne-o amigável ao usuário.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
Se mais de 1 detector for adicionado a um CMP, o CMP conta como detectado se qualquer um dos detectores disparar.
Detectors são a parte que detecta se um determinado conjunto de regras deve ser aplicado. Basicamente, se um detector disparar, os métodos serão aplicados.
Detector structure:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
O matcher de presença é usado para detectar se o CMP está presente na página.
Alguns CMPs ainda inserem o HTML do popup no DOM mesmo ao revisitar uma página onde você já consentiu anteriormente. Queremos lidar com o formulário de consentimento apenas se ele estiver realmente sendo exibido na página. É para isso que o matcher de exibição é usado.
Tanto o matcher de presença quanto o de exibição seguem a estrutura comum de [`Matchers`](#matchers).
Tanto o matcher de presença quanto o de exibição podem ser múltiplos matchers, acionando o detector apenas se todos os matchers (respectivamente para presença e exibição) se aplicarem.
#### Métodos
Métodos são coleções de ações. Há 4 métodos suportados pelo Consent-O-Matic. `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`
Todos os métodos são opcionais e, se presentes, serão executados na ordem fornecida abaixo quando um detector for acionado.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
Os métodos assumem a forma:```json { "name": " ... ", "action": { ... } }
onde o nome é um dos 4 métodos suportados e a ação é a [ação](#actions) a executar.
---
### DOM Selection
A maioria das ações e matchers têm algum alvo ao qual se aplicam. Por esse motivo, o Consent-O-Matic possui um mecanismo de seleção de DOM que pode ajudar facilmente na seleção do elemento DOM correto.```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": {}
}
Existem 2 partes, parent e target. O parent é opcional, mas, se existir, será resolvido primeiro e usado como ponto de partida para target. Isso permite construir seleções muito complicadas de elementos que, de outra forma, não seriam possíveis com um único seletor CSS simples. Um exemplo disso é selecionar dentro do shadow DOM – onde usar o parent para direcionar o elemento com a sombra permite consultar seus filhos com o seletor.
Todos os parâmetros para parent e target, exceto selector, são opcionais.
O método de seleção funciona usando o seletor CSS de selector e, em seguida, filtrando os nós DOM resultantes por meio dos vários filtros disponíveis:
textFilter filtra todos os nós que não incluem o texto especificado. Também pode ser fornecido como um array "textFilter":["filter1", "filter2"] e, nesse caso, filtra todos os nós que não incluem um dos filtros de texto fornecidos.
styleFilter filtra com base em computedStyles. option é a opção de estilo a ser comparada, por exemplo position, value é o valor a ser comparado e negated define se o valor da opção deve corresponder ou não ao valor fornecido.
displayFilter pode ser usado para filtrar nós com base em se estão ocultos na exibição (display hidden) ou não.
iframeFilter filtra nós com base em se estão dentro de um iframe ou não.
childFilter é uma seleção DOM totalmente nova, que então filtra a seleção original com base em se uma seleção foi feita por ou não.
Aqui está um exemplo de seleção DOM:```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
Este seletor primeiro tenta encontrar o `parent`, que é um elemento DOM com a classe `myParent` que está dentro de um iframe e tem um elemento DOM filho com a classe `myChild` que contém o texto "Gregor".
Então, usando este parent como "raiz", ele tenta encontrar um elemento DOM com a classe `myTarget`.
Isso poderia então ser o alvo de uma ação ou comparador.
---
### Ações
Ações são a parte do Consent-O-Matic que realmente fazem coisas. Algumas ações fazem algo a uma seleção alvo, outras têm a ver com fluxo de controle.
#### Clique
Esta ação simula um clique do mouse em seu alvo.
Exemplo:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab se definido como true, irá acionar um ctrl+shift+clique em vez de um clique, o que deve fazer com que o link, se houver, abra em uma nova aba e foque essa aba.
Neste exemplo usamos apenas um target simples com um textFilter, mas a seleção DOM completa é suportada.
Esta ação executa uma lista de ações em ordem.
Exemplo:```json { "type": "list", "actions": [] }
`actions` é um array de ações que serão todas executadas em ordem.
#### Consentimento
A ação de consentimento recebe um array de consentimentos e tenta aplicar as seleções de consentimento do usuário.
Exemplo:```json
{
"type": "consent",
"consents": []
}
consents é um array de Consent tipos
Alguns formulários de consentimento usam um controle deslizante para definir um nível de consentimento, esta ação suporta simular o deslizamento com tal controle deslizante.
Exemplo:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` é o elemento DOM alvo para simular o movimento de deslizamento.
`dragTarget` é o elemento DOM a ser usado para a distância do deslizamento.
`axis` seleciona se o controle deslizante deve ir horizontal "x" ou vertical "y".
O evento de deslizamento simulará que o mouse arrastou `target` pela distância de `target` até `dragTarget` no eixo `axis` fornecido.
#### If CSS
Esta ação é usada como fluxo de controle, executando outra ação dependendo se uma seleção DOM encontra um elemento ou não.
Exemplo:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction é uma ação que será executada se a seleção do DOM encontrar um elemento.
falseAction será executada quando a seleção do DOM não encontrar um elemento.
Esta ação aguarda até que o seletor DOM encontre um elemento DOM que corresponda. Isso é usado principalmente se algo no formulário de consentimento carregar lentamente e precisar ser aguardado.
Exemplo:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` é o número de vezes para verificar o elemento DOM alvo. O padrão é 10.
`waitTime` determina o tempo entre tentativas de repetição. O padrão é 250.
`negated` faz com que "Wait For CSS" aguarde até que o alvo NÃO seja encontrado.
#### For Each
Se um conjunto de ações precisa ser executado várias vezes, mas com diferentes nós DOM como raiz, a ação for each pode ser usada. Ela executa sua ação 1 vez para cada elemento DOM selecionado pela sua seleção DOM; todas as ações executadas dentro do loop for each verão o DOM como começando a partir do nó atualmente selecionado.
Example:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action é a ação a executar para cada elemento DOM encontrado.
Esta ação aguarda a quantidade de milissegundos fornecida antes de continuar.
Exemplo:```json { "type": "wait", "waitTime": 250 }
#### Hide
This action sets CSS class 'ConsentOMatic-CMP-Hider' on the DOM selection. The default CSS rules will then set opacity to 0 on the element.
Example:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
Esta ação fecha a aba atual, útil para provedores de consentimento como Evidon, que gosta de abrir novas abas com o painel de consentimento dentro.
Exemplo:```json { "type": "close" }
### Matchers
Matchers são usados para verificar a presença de alguma seleção DOM, ou o estado de alguma seleção DOM.
#### CSS
Este matcher verifica a presença de uma seleção DOM e retorna que há correspondência se ela existir.
Exemplo:```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
Este comparador verifica o estado de um <input type='checkbox' /> e retorna que corresponde se a caixa de seleção estiver marcada.
Exemplo:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
### Consent
Isto é o que é usado dentro de [Consent Actions](#consent) e define o consentimento real que o usuário deve dar ou não dar.
Cada consentimento tem um tipo, que corresponde às categorias de consentimento dentro do Consent-O-Matic, então se um usuário ativou a primeira categoria de consentimento (Tipo A) e o consentimento é do tipo "A", então o consentimento será ativado.
Normalmente, o consentimento é dado como uma alternância (toggle) ou um conjunto de botões liga/desliga. Portanto, `consent` tem um mecanismo para cada um desses casos.
Exemplo:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type é o tipo de categoria de consentimento que esta regra define e determina se este consentimento deve estar ativado ou desativado dependendo da seleção do usuário para esse tipo de categoria.
toggleAction esta ação é usada para selecionar consentimento se o popup usar um alternador ou um interruptor para comunicar consentimento. A ação será executada se o correspondente (matcher) disser que o consentimento está em um estado diferente do que o usuário pediu, caso contrário não será executada.
matcher é o correspondente usado para verificar em qual estado o consentimento se encontra. Para um correspondente de caixa de seleção, o consentimento é dado se a caixa de seleção estiver marcada. Para um correspondente CSS, o consentimento é dado se o correspondente encontrar uma seleção do DOM.
trueAction e falseAction são ações usadas se o consentimento tiver que ser dado pressionando um de dois botões, em vez de ser alternado ativado/desativado. Estas serão executadas dependendo da seleção de consentimento do usuário. Se o usuário deu consentimento para este tipo de categoria, o trueAction será executado, e o falseAction será executado se o usuário não deu consentimento a este tipo de categoria.
Se toggleAction e matcher estiverem presentes na configuração de conteúdo, toggleAction será usado; se um deles estiver faltando, trueAction/falseAction serão usados em vez disso.
Como visto nas configurações do addon, na mesma ordem:
Juntando tudo, aqui está um exemplo completo de um CMP "MyCMP" que possui 2 categorias de consentimento para 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" } } } ] } }
childFilter