# jhpacker/slopguard architecture

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

- Interactive diagram: https://gitdiagram.com/jhpacker/slopguard
- Repository: https://github.com/jhpacker/slopguard

## Overview

SlopGuard is a local-only browser extension that scans eligible page images on user request (or a single right-clicked image), runs provenance and visual-detection tiers, and marks the result in the page. The main runtime path is page scan → background detection cascade → offscreen C2PA and model inference → page overlays. Metadata and byte checks run in the background; SynthID preprocessing supports its model input. The excerpts do not show the full cascade or toolbar/context-menu dispatch wiring, so those connections are limited to documented behavior and visible message calls.

Main entry points: [`src/background.js`](https://github.com/jhpacker/slopguard/blob/main/src/background.js) (Detection coordinator), [`src/content.js`](https://github.com/jhpacker/slopguard/blob/main/src/content.js) (Image scan and overlays), [`src/offscreen.html`](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.html) (Offscreen detector host), [`src/offscreen.js`](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js) (SynthID watermark inference)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page scanning"]
  node_content["Image scan and overlays<br/>[content.js]"]
  node_styles["Overlay styles<br/>[overlay.css]"]
end

subgraph group_detect["Detection pipeline"]
  node_background["Detection coordinator<br/>[background.js]"]
  node_bytes["Image bytes<br/>[background.js]"]
  node_exif["EXIF/IPTC/XMP checks<br/>[background.js]"]
  node_bytecheck["Byte marker checks<br/>[background.js]"]
end

subgraph group_inference["Local inference"]
  node_offscreen["Offscreen detector host<br/>[offscreen.html]"]
  node_c2pa["C2PA manifest checks<br/>[offscreen.js]"]
  node_synth["SynthID watermark inference<br/>[offscreen.js]"]
  node_preprocess["SynthID preprocessing"]
  node_visual["Visual classifier inference<br/>[offscreen.js]"]
  node_models["Local ONNX models"]
end

subgraph group_settings["Extension settings"]
  node_options["Debug options<br/>[options.js]"]
  node_storage[("Extension settings storage")]
end

node_user(("Extension user"))
node_page["Web page"]

node_user -->|"requests scan"| node_content
node_page -->|"provides images"| node_content
node_content -->|"requests detection"| node_background
node_background -->|"fetches image"| node_bytes
node_background -->|"parses metadata"| node_exif
node_background -->|"scans bytes"| node_bytecheck
node_background -->|"dispatches checks"| node_offscreen
node_offscreen -->|"runs manifest check"| node_c2pa
node_offscreen -->|"runs watermark check"| node_synth
node_offscreen -->|"runs classifier"| node_visual
node_synth -->|"builds model input"| node_preprocess
node_synth -->|"uses SynthID model"| node_models
node_visual -->|"uses OpenFake model"| node_models
node_background -->|"returns verdict"| node_content
node_content -->|"marks images"| node_page
node_styles -->|"styles overlays"| node_page
node_options -->|"reads and writes"| node_storage
node_background -->|"reads debug settings"| node_storage
node_content -->|"reads debug setting"| node_storage
node_offscreen -->|"reads debug setting"| node_storage

click node_content "https://github.com/jhpacker/slopguard/blob/main/src/content.js"
click node_styles "https://github.com/jhpacker/slopguard/blob/main/src/overlay.css"
click node_background "https://github.com/jhpacker/slopguard/blob/main/src/background.js"
click node_bytes "https://github.com/jhpacker/slopguard/blob/main/src/background.js"
click node_exif "https://github.com/jhpacker/slopguard/blob/main/src/background.js"
click node_bytecheck "https://github.com/jhpacker/slopguard/blob/main/src/background.js"
click node_offscreen "https://github.com/jhpacker/slopguard/blob/main/src/offscreen.html"
click node_c2pa "https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js"
click node_synth "https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js"
click node_preprocess "https://github.com/jhpacker/slopguard/blob/main/src/synthid-preprocess.js"
click node_visual "https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js"
click node_options "https://github.com/jhpacker/slopguard/blob/main/src/options.js"

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_content,node_styles,node_user toneBlue
class node_background,node_bytes,node_exif,node_bytecheck toneAmber
class node_offscreen,node_c2pa,node_synth,node_preprocess,node_visual,node_models toneMint
class node_options,node_storage toneRose
class node_page toneIndigo
```

## Components

### Page scanning

- [Image scan and overlays](https://github.com/jhpacker/slopguard/blob/main/src/content.js): `src/content.js`
- [Overlay styles](https://github.com/jhpacker/slopguard/blob/main/src/overlay.css): `src/overlay.css`

### Detection pipeline

- [Detection coordinator](https://github.com/jhpacker/slopguard/blob/main/src/background.js): `src/background.js`
- [Image bytes](https://github.com/jhpacker/slopguard/blob/main/src/background.js): `src/background.js`
- [EXIF/IPTC/XMP checks](https://github.com/jhpacker/slopguard/blob/main/src/background.js): `src/background.js`
- [Byte marker checks](https://github.com/jhpacker/slopguard/blob/main/src/background.js): `src/background.js`

### Local inference

- [Offscreen detector host](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.html): `src/offscreen.html`
- [C2PA manifest checks](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js): `src/offscreen.js`
- [SynthID watermark inference](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js): `src/offscreen.js`
- [SynthID preprocessing](https://github.com/jhpacker/slopguard/blob/main/src/synthid-preprocess.js): `src/synthid-preprocess.js`
- [Visual classifier inference](https://github.com/jhpacker/slopguard/blob/main/src/offscreen.js): `src/offscreen.js`
- **Local ONNX models**

### Extension settings

- [Debug options](https://github.com/jhpacker/slopguard/blob/main/src/options.js): `src/options.js`
- **Extension settings storage**

### Other components

- **Extension user**
- **Web page**

## Connections

- Extension user → Image scan and overlays: requests scan
- Web page → Image scan and overlays: provides images
- Image scan and overlays → Detection coordinator: requests detection
- Detection coordinator → Image bytes: fetches image
- Detection coordinator → EXIF/IPTC/XMP checks: parses metadata
- Detection coordinator → Byte marker checks: scans bytes
- Detection coordinator → Offscreen detector host: dispatches checks
- Offscreen detector host → C2PA manifest checks: runs manifest check
- Offscreen detector host → SynthID watermark inference: runs watermark check
- Offscreen detector host → Visual classifier inference: runs classifier
- SynthID watermark inference → SynthID preprocessing: builds model input
- SynthID watermark inference → Local ONNX models: uses SynthID model
- Visual classifier inference → Local ONNX models: uses OpenFake model
- Detection coordinator → Image scan and overlays: returns verdict
- Image scan and overlays → Web page: marks images
- Overlay styles → Web page: styles overlays
- Debug options → Extension settings storage: reads and writes
- Detection coordinator → Extension settings storage: reads debug settings
- Image scan and overlays → Extension settings storage: reads debug setting
- Offscreen detector host → Extension settings storage: reads debug setting