Checkpoint

A Chrome Side Panel extension that tracks your manga, manhwa, and manhua reading progress across any website, with automatic new chapter notifications.

Features

Reading Progress Tracking

One-click tracking - Add your current reading page with a single click
Auto-detection - Automatically extracts title and chapter from any manga reading page
Smart progress updates - Re-adding a manga automatically updates progress if you're on a higher chapter
Local title matching - Recognizes manga by alternative names without API calls
Persistent storage - All data saved locally via Chrome storage

New Chapter Notifications

Automatic chapter checks - Periodically checks for new chapters in the background
Configurable interval - Set how often to check (default: 60 minutes)
Per-item toggle - Enable/disable notifications for individual titles
Smart filtering - Option to only notify for chapters released after you started tracking
Batch notifications - Summarizes multiple updates to avoid notification spam

Organization & Filtering

Format tabs - Filter by All, Manga (JP), Manhwa (KR), or Manhua (CN)
Title search - Quickly find tracked items by typing in the search/filter bar
Progress display - Shows current chapter and how many chapters you're behind
Quick navigation - Click to open your last reading position

Multi-Provider Support

AniList integration - Primary source for metadata, covers, and chapter info
MangaDex fallback - Secondary source when AniList doesn't have a match
Noise word filtering - Automatically strips words like "manga", "read online", "chapter" from search queries for better results across all providers
Manual search - Search directly when auto-detection fails
Google fallback - Find alternative names via Google when titles aren't recognized

Data Management

Edit entries - Manually adjust titles, progress, format, or alternative names
Progress validation - Progress field validates numeric input to prevent bad data
Import/Export - Backup and restore your tracking data
Alternative names - Add custom names for better matching across sites

UI & Experience

Dark theme - Easy on the eyes during late-night reading sessions
Side panel interface - Always accessible without leaving your reading page
Reactive updates - UI automatically refreshes when background chapter checks find new data
On-demand content script - Content script is only injected when needed, not on every page

Tracking List

Edit Modal

Settings

Known Limitations

Chapter Check Accuracy

The "check for new chapters" feature relies on AniList and MangaDex APIs to report total chapter counts. Unfortunately, these APIs often have incomplete or delayed chapter data:

AniList frequently returns null for chapter counts on ongoing series
MangaDex data can lag behind actual releases
Neither API provides reliable real-time chapter information

This functionality is currently weak and may miss new chapter releases or report inaccurate counts. I'm actively searching for a better API source to improve this feature. Contributions and suggestions are welcome.

Installation

From GitHub Release

Go to Releases
Download the latest checkpoint-vX.Y.Z.zip
Extract the ZIP file
Load in Chrome:
- Open chrome://extensions
- Enable "Developer mode" (top right)
- Click "Load unpacked"
- Select the extracted folder

From Source

Clone the repository:

git clone https://github.com/elghaied/checkpoint.git
cd checkpoint

Install dependencies:
```
npm install
```
Build the extension:
```
npm run build
```
Load in Chrome:
- Open chrome://extensions
- Enable "Developer mode" (top right)
- Click "Load unpacked"
- Select the dist folder
Pin the extension to your toolbar for easy access

Usage

Navigate to any manga/manhwa/manhua reading page
Click the Checkpoint icon in your toolbar to open the side panel
Click the + button to add the current page
Checkpoint checks if you're already tracking this title (by main or alternative names)
- If found: automatically updates progress if you're on a higher chapter
- If not found: searches AniList for matches
If multiple matches are found, select the correct title
Your progress is now tracked!

Managing Entries

Search - Type in the filter bar to find a specific title
Switch tabs - View All or filter by Manga, Manhwa, or Manhua
Edit - Click "Edit" on any card to change title, progress, format, or alternative names
Toggle notifications - Click the bell icon to enable/disable new chapter alerts
Alternative names - Add/remove alternative names to help Checkpoint recognize the manga on different sites
Delete - Click "Delete" in the edit modal (requires confirmation)
Open - Click "Open" to navigate back to your last reading position

When Auto-Detection Fails

If Checkpoint doesn't recognize a title:

A search modal appears with a search box
Type the correct title and click "Search"
If you don't know the title, click "Find Alternative Names" to search Google
Select the correct result from AniList
The original page title is automatically saved as an alternative name for future visits

Development

Prerequisites

Node.js 18+
npm 9+

Scripts

# Development build with watch mode
npm run dev

# Production build
npm run build

# Type checking
npm run typecheck

# Lint
npm run lint

Project Structure

checkpoint/
├── src/
│   ├── sidepanel/          # React UI (Side Panel)
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── services/       # Chrome messaging service
│   │   └── styles/         # CSS styles
│   ├── background/         # Service Worker
│   │   ├── index.ts        # Message routing
│   │   ├── anilist.ts      # AniList API client
│   │   ├── mangadex.ts     # MangaDex API client
│   │   └── chapterChecker.ts # Background chapter checking
│   ├── content/            # Content Script
│   │   └── index.ts        # Page metadata extraction
│   ├── shared/             # Shared code
│   │   ├── types.ts        # TypeScript types
│   │   └── utils.ts        # Utility functions
│   └── storage/            # Storage abstraction
│       ├── index.ts        # Singleton export
│       └── storageService.ts
├── public/
│   ├── manifest.json       # Chrome extension manifest
│   └── icons/              # Extension icons
├── dist/                   # Built extension (load this in Chrome)
├── vite.config.ts          # Vite build configuration
├── eslint.config.js        # ESLint configuration
├── tsconfig.json           # TypeScript configuration
└── package.json

Architecture

The extension has three execution contexts:

Side Panel - React app for the UI
Background Service Worker - Central hub for API calls, storage, and chapter checking
Content Script - Extracts metadata from reading pages

User clicks "Add"
       ↓
Side Panel UI
       ↓
Background Service Worker
       ↓
Content Script (extracts title/chapter)
       ↓
Local Storage (check for existing match by title/alt names)
       ↓
[If found] → Update progress → Done
[If not found] ↓
AniList API (metadata lookup)
       ↓
Chrome Storage (persist)
       ↓
Side Panel UI (refresh)

Releasing

This project uses GitHub Actions for automated releases. To create a new release:

1. Update Version Numbers

Update the version in both files:

package.json:

{
  "version": "X.Y.Z"
}

public/manifest.json:

{
  "version": "X.Y.Z"
}

2. Commit and Tag

# Stage and commit the version bump
git add package.json public/manifest.json
git commit -m "chore: bump version to X.Y.Z"

# Create a version tag (must start with 'v')
git tag vX.Y.Z

# Push both the commit and the tag
git push && git push --tags

3. Automated Release

Once you push the tag, GitHub Actions will automatically:

Run the build process
Create a ZIP file of the extension (checkpoint-vX.Y.Z.zip)
Create a GitHub Release with the ZIP attached
Generate release notes from commit history

4. Chrome Web Store (Manual)

Download the ZIP from the GitHub Release
Go to the Chrome Web Store Developer Dashboard
Upload the new ZIP
Submit for review

Supported Sites

Checkpoint uses heuristics to extract metadata and should work on most manga reading sites. Tested on:

MangaDex
Webtoon
Tapas
MangaPlus
Most generic manga reader sites

If a site doesn't work well, you can manually search and select the correct title. Once you do, Checkpoint saves the site's title as an alternative name so it will be recognized automatically next time.

Tech Stack

Chrome Extensions - Manifest V3, Side Panel API
TypeScript - Type-safe code
React 19 - UI framework
Vite - Build tool
ESLint - Code linting with TypeScript and React Hooks rules
AniList GraphQL API - Primary metadata source
MangaDex REST API - Fallback metadata source

Privacy

All data is stored locally in your browser
No accounts required
Only makes requests to AniList and MangaDex APIs for metadata lookups
No tracking or analytics

Roadmap

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

MIT License - see LICENSE for details

Acknowledgments

AniList for providing the free API
MangaDex for the fallback API
Inspired by the need to track reading across multiple sites

Guiding Principle: Optimize for reading flow, not data perfection. If adding or updating progress isn't effortless, the tool has failed.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.claude/skills/browser-extension-builder		.claude/skills/browser-extension-builder
.github/workflows		.github/workflows
public		public
screenshots		screenshots
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

elghaied/checkpoint

Folders and files

Latest commit

History

Repository files navigation