# shabbir-building/countin-extention architecture

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

- Interactive diagram: https://gitdiagram.com/shabbir-building/countin-extention
- Repository: https://github.com/shabbir-building/countin-extention

## Overview

The extension detects submitted LinkedIn comments in the page, asks its background worker to update or retrieve period totals, and renders daily, weekly, and monthly counts in an overlay. Reset-key logic rolls totals over by day, week, and month. The README documents automatic display on LinkedIn; styling and manifest details are not sampled, so their runtime relationships are omitted.

Main entry points: [`background.js`](https://github.com/shabbir-building/countin-extention/blob/main/background.js) (Message handler), [`content.js`](https://github.com/shabbir-building/countin-extention/blob/main/content.js) (Counter overlay)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["LinkedIn page"]
  node_linkedin["LinkedIn feed"]
  node_detector["Comment detector<br/>[content.js]"]
  node_overlay["Counter overlay<br/>[content.js]"]
end

subgraph group_worker["Counter worker"]
  node_messaging["Message handler<br/>[background.js]"]
  node_rollover["Period rollover<br/>[background.js]"]
end

subgraph group_state["Counter state"]
  node_totals[("Period totals<br/>[background.js]")]
end

node_user(("LinkedIn user"))
node_storage[("Chrome local storage")]

node_user -->|"uses"| node_linkedin
node_linkedin -->|"provides clicks"| node_detector
node_detector -->|"sends count request"| node_messaging
node_overlay -->|"requests totals"| node_messaging
node_messaging -->|"checks periods"| node_rollover
node_rollover -->|"reads and resets"| node_storage
node_messaging -->|"reads and writes totals"| node_storage
node_storage -->|"persists"| node_totals
node_messaging -->|"returns counts"| node_overlay
node_overlay -->|"displays totals"| node_user

click node_detector "https://github.com/shabbir-building/countin-extention/blob/main/content.js"
click node_overlay "https://github.com/shabbir-building/countin-extention/blob/main/content.js"
click node_messaging "https://github.com/shabbir-building/countin-extention/blob/main/background.js"
click node_rollover "https://github.com/shabbir-building/countin-extention/blob/main/background.js"
click node_totals "https://github.com/shabbir-building/countin-extention/blob/main/background.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_linkedin,node_detector,node_overlay,node_user toneBlue
class node_messaging,node_rollover,node_storage toneAmber
class node_totals toneMint
```

## Components

### LinkedIn page

- **LinkedIn feed**
- [Comment detector](https://github.com/shabbir-building/countin-extention/blob/main/content.js): `content.js`
- [Counter overlay](https://github.com/shabbir-building/countin-extention/blob/main/content.js): `content.js`

### Counter worker

- [Message handler](https://github.com/shabbir-building/countin-extention/blob/main/background.js): `background.js`
- [Period rollover](https://github.com/shabbir-building/countin-extention/blob/main/background.js): `background.js`

### Counter state

- [Period totals](https://github.com/shabbir-building/countin-extention/blob/main/background.js): `background.js`

### Other components

- **LinkedIn user**
- **Chrome local storage**

## Connections

- LinkedIn user → LinkedIn feed: uses
- LinkedIn feed → Comment detector: provides clicks
- Comment detector → Message handler: sends count request
- Counter overlay → Message handler: requests totals
- Message handler → Period rollover: checks periods
- Period rollover → Chrome local storage: reads and resets
- Message handler → Chrome local storage: reads and writes totals
- Chrome local storage → Period totals: persists
- Message handler → Counter overlay: returns counts
- Counter overlay → LinkedIn user: displays totals