# bielcerroni/privacidade-whatsapp architecture

> Architecture diagram of the GitHub repository bielcerroni/privacidade-whatsapp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bielcerroni/privacidade-whatsapp
- Repository: https://github.com/bielcerroni/privacidade-whatsapp

## Overview

Neblina is a local Chrome extension that lets a user configure visual privacy for WhatsApp Web. The popup edits shared preferences; the background service worker initializes them and handles the keyboard toggle, while the content script reads changes and applies protection to the page. The documented protection features include message and media blur, names and avatars, hover reveal, shield mode, adjustable intensity, and optional tab-title hiding. The excerpts show key storage and DOM-observation relationships, but not every feature implementation in the content script.

Main entry points: [`background.js`](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/background.js) (Shortcut and badge), [`src/content.js`](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/content.js) (Visual protections), [`popup/popup.js`](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/popup/popup.js) (Settings panel), [`shared/config.js`](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/shared/config.js) (Preferences and presets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_controls["Controls"]
  node_popup["Settings panel<br/>[popup.js]"]
  node_background["Shortcut and badge<br/>[background.js]"]
end

subgraph group_settings["Shared settings"]
  node_config["Preferences and presets<br/>[config.js]"]
  node_stored[("Local preferences")]
end

subgraph group_protection["WhatsApp protection"]
  node_dom["DOM scanning<br/>[content.js]"]
  node_privacy["Visual protections<br/>[content.js]"]
  node_css["Blur styling<br/>[blur.css]"]
end

node_user(("User"))
node_whatsapp["WhatsApp Web"]
node_chrome["Chrome APIs"]

node_user -->|"configures"| node_popup
node_popup -->|"normalizes settings"| node_config
node_popup -->|"reads and writes"| node_stored
node_user -->|"uses shortcut"| node_background
node_background -->|"normalizes settings"| node_config
node_background -->|"initializes and toggles"| node_stored
node_background -->|"updates badge"| node_chrome
node_stored -->|"settings change"| node_dom
node_dom -->|"normalizes settings"| node_config
node_whatsapp -->|"hosts script"| node_dom
node_dom -->|"scans page"| node_privacy
node_privacy -.->|"applies styles"| node_css
node_privacy -->|"masks page content"| node_whatsapp
node_privacy -->|"shield action saves settings"| node_stored

click node_popup "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/popup/popup.js"
click node_background "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/background.js"
click node_config "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/shared/config.js"
click node_dom "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/content.js"
click node_privacy "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/content.js"
click node_css "https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/blur.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_popup,node_background,node_user toneBlue
class node_config,node_stored toneAmber
class node_dom,node_privacy,node_css,node_chrome toneMint
class node_whatsapp toneIndigo
```

## Components

### Controls

- [Settings panel](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/popup/popup.js): `popup/popup.js`
- [Shortcut and badge](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/background.js): `background.js`

### Shared settings

- [Preferences and presets](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/shared/config.js): `shared/config.js`
- **Local preferences**

### WhatsApp protection

- [DOM scanning](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/content.js): `src/content.js`
- [Visual protections](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/content.js): `src/content.js`
- [Blur styling](https://github.com/bielcerroni/privacidade-whatsapp/blob/main/src/blur.css): `src/blur.css`

### Other components

- **User**
- **WhatsApp Web**
- **Chrome APIs**

## Connections

- User → Settings panel: configures (evidence: `README.md`)
- Settings panel → Preferences and presets: normalizes settings (evidence: `popup/popup.js`)
- Settings panel → Local preferences: reads and writes (evidence: `popup/popup.js`)
- User → Shortcut and badge: uses shortcut (evidence: `README.md`)
- Shortcut and badge → Preferences and presets: normalizes settings (evidence: `background.js`)
- Shortcut and badge → Local preferences: initializes and toggles (evidence: `background.js`)
- Shortcut and badge → Chrome APIs: updates badge (evidence: `background.js`)
- Local preferences → DOM scanning: settings change (evidence: `README.md`)
- DOM scanning → Preferences and presets: normalizes settings (evidence: `src/content.js`)
- WhatsApp Web → DOM scanning: hosts script (evidence: `README.md`)
- DOM scanning → Visual protections: scans page (evidence: `src/content.js`)
- Visual protections → Blur styling: applies styles
- Visual protections → WhatsApp Web: masks page content (evidence: `README.md`)
- Visual protections → Local preferences: shield action saves settings (evidence: `src/content.js`)