# shyrwinsia/blur-fb-photos architecture

> Architecture diagram of the GitHub repository shyrwinsia/blur-fb-photos, 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/shyrwinsia/blur-fb-photos
- Repository: https://github.com/shyrwinsia/blur-fb-photos

## Overview

Blur FB Photos is a browser extension that lets users configure image-description keywords and display options, then blurs matching Facebook images while browsing. The settings script persists preferences in browser sync storage; the content script observes page changes, reads those preferences, and applies blur and optional metadata or match labels. The README documents the settings-to-browsing workflow and browser support. The manifest’s wiring and the HTML-to-script binding are not shown, so those links are left unverified.

Main entry points: [`content-script.js`](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js) (Image scanner), [`options.js`](https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.js) (Settings controller), [`content-style.css`](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-style.css) (Page styles), [`options.html`](https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.html) (Settings UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_settings["Settings"]
  node_settings_ui["Settings UI<br/>[options.html]"]
  node_settings_controller["Settings controller<br/>[options.js]"]
end

subgraph group_runtime["Extension runtime"]
  node_sync_storage[("Sync storage")]
  node_manifest["Extension manifest<br/>[manifest.json]"]
end

subgraph group_processing["Image processing"]
  node_mutation_observer["Page observer<br/>[content-script.js]"]
  node_image_scanner["Image scanner<br/>[content-script.js]"]
end

subgraph group_presentation["Page presentation"]
  node_image_blur["Image blur<br/>[content-script.js]"]
  node_metadata_caption["Metadata caption<br/>[content-script.js]"]
  node_matched_label["Matched keywords<br/>[content-script.js]"]
  node_page_styles["Page styles<br/>[content-style.css]"]
end

node_user(("User"))
node_facebook_page["Facebook page"]

node_user -->|"opens settings"| node_settings_ui
node_settings_ui -.->|"configures"| node_settings_controller
node_settings_controller -->|"writes preferences"| node_sync_storage
node_settings_controller -->|"loads preferences"| node_sync_storage
node_facebook_page -->|"provides DOM"| node_mutation_observer
node_mutation_observer -->|"triggers scan"| node_image_scanner
node_image_scanner -->|"loads preferences"| node_sync_storage
node_image_scanner -->|"blurs matches"| node_image_blur
node_image_scanner -->|"adds metadata"| node_metadata_caption
node_image_scanner -->|"adds match label"| node_matched_label
node_image_blur -.->|"uses styles"| node_page_styles
node_metadata_caption -.->|"uses styles"| node_page_styles
node_matched_label -.->|"uses styles"| node_page_styles
node_manifest -.->|"registers script"| node_mutation_observer

click node_settings_ui "https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.html"
click node_settings_controller "https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.js"
click node_manifest "https://github.com/shyrwinsia/blur-fb-photos/blob/master/manifest.json"
click node_mutation_observer "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js"
click node_image_scanner "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js"
click node_image_blur "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js"
click node_metadata_caption "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js"
click node_matched_label "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js"
click node_page_styles "https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-style.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_settings_ui,node_settings_controller,node_user toneBlue
class node_sync_storage,node_manifest toneAmber
class node_mutation_observer,node_image_scanner toneMint
class node_image_blur,node_metadata_caption,node_matched_label,node_page_styles toneRose
class node_facebook_page toneIndigo
```

## Components

### Settings

- [Settings UI](https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.html): `options.html`
- [Settings controller](https://github.com/shyrwinsia/blur-fb-photos/blob/master/options.js): `options.js`

### Extension runtime

- **Sync storage**
- [Extension manifest](https://github.com/shyrwinsia/blur-fb-photos/blob/master/manifest.json): `manifest.json`

### Image processing

- [Page observer](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js): `content-script.js`
- [Image scanner](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js): `content-script.js`

### Page presentation

- [Image blur](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js): `content-script.js`
- [Metadata caption](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js): `content-script.js`
- [Matched keywords](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-script.js): `content-script.js`
- [Page styles](https://github.com/shyrwinsia/blur-fb-photos/blob/master/content-style.css): `content-style.css`

### Other components

- **User**
- **Facebook page**

## Connections

- User → Settings UI: opens settings (evidence: `README.md`)
- Settings UI → Settings controller: configures
- Settings controller → Sync storage: writes preferences (evidence: `options.js`)
- Settings controller → Sync storage: loads preferences (evidence: `options.js`)
- Facebook page → Page observer: provides DOM (evidence: `content-script.js`)
- Page observer → Image scanner: triggers scan (evidence: `content-script.js`)
- Image scanner → Sync storage: loads preferences (evidence: `content-script.js`)
- Image scanner → Image blur: blurs matches (evidence: `content-script.js`)
- Image scanner → Metadata caption: adds metadata (evidence: `content-script.js`)
- Image scanner → Matched keywords: adds match label (evidence: `content-script.js`)
- Image blur → Page styles: uses styles
- Metadata caption → Page styles: uses styles
- Matched keywords → Page styles: uses styles
- Extension manifest → Page observer: registers script