🎨 Comix Downloader Extension

The web-browser extension companion to comix-downloader

Download manga and comic chapters directly from comix.to as Images, PDF, or CBZ.

---

⚡ Companion Project Context

This browser extension is the official web-based counterpart to the Comix Downloader Python Project. While the main Python application provides a powerful PyQt6/QML desktop GUI and interactive CLI powered by Playwright, this extension allows you to browse, filter, and download directly within your Chromium browser—bypassing any complex Python setups and leveraging native browser download mechanisms.

---

✨ Features

Feature	Description
🌐 Seamless Integration	Auto-detects titles and chapters while you browse comix.to
🖼️ Multi-Format Export	Download as raw WebP/JPEG Images, consolidated PDF, or standard CBZ
📦 ComicInfo.xml Metadata	Automatically generates XML metadata inside CBZ packages for modern readers
🎯 Smart Filter & Select	Filter chapters dynamically by scanlator group, title, or index with bulk-select tools
🛡️ Anti-Scrape Bypass	Uses custom declarativeNetRequest header rules to bypass CDN referrer checks
⚡ Offscreen Conversion	Uses Chrome's offscreen API for headless canvas-based WebP ➔ JPEG conversion
📈 Real-Time Progress	Tracks downloads with detailed progress bars and status updates

---

🚀 Installation & Setup

Choose one of the two methods below to install the extension in any Chromium-based browser (Chrome, Edge, Brave, Opera, Vivaldi, etc.).

Option 1: Pre-built Release (Recommended)

No coding setup or Node.js required.

1. Go to the Releases page on GitHub.
2. Download the latest comix-downloader-extension.zip file.
3. Extract the downloaded zip file into a folder of your choice.
4. Open your browser and go to the Extensions page:
   • For Chrome: chrome://extensions/
   • For Brave: brave://extensions/
   • For Edge: edge://extensions/
5. Enable Developer mode (toggle switch usually in the top-right corner).
6. Click Load unpacked (top-left button).
7. Select the extracted folder containing the extension files (the directory containing manifest.json).

---

Option 2: Build from Source

For developers who want to modify or compile the code from scratch.

Prerequisites

• Node.js (v18 or higher)
• npm (installed with Node.js)

Build Steps

1. Clone the repository:

   git clone https://github.com/Yui007/comix-extension.git
   cd comix-extension

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

   This compiles the TypeScript code and bundles assets into the dist/ directory.

4. Package the extension (Optional):

   npm run zip

   This generates a comix-downloader-extension.zip archive containing the built files in the root folder, ready to be shared or uploaded.

5. Load into your Browser:

   • Go to your browser's Extensions page (e.g. chrome://extensions/).
   • Enable Developer mode.
   • Click Load unpacked.
   • Select the built dist folder located in your repository directory.

---

📖 How to Use

1. Navigate to any manga or comic title page on comix.to (e.g. https://comix.to/title/...).
2. Click the Comix Downloader extension icon in your browser toolbar.
3. The popup will automatically scan the page and load the title, metadata, cover art, and chapter list.
4. Customize your settings:
   • Select your desired output format (🖼️ Images, 📄 PDF, or 📦 CBZ).
   • Filter chapters using the search input.
   • Select the specific chapters you want to download.
5. Click Download and watch the real-time progress update. The extension will automatically open chapter tabs in the background, download the pages, bundle them, and save them to your browser's default downloads directory (inside ComixDownloads/).

---

📁 Project Structure

comix-extension/
├── public/                 # Static assets
│   ├── icons/              # Extension icons
│   └── manifest.json       # Manifest V3 configuration
├── scripts/
│   ├── postbuild.js        # Formats and moves HTML outputs post-bundling
│   └── zip.js              # Archives dist folder for publishing
├── src/
│   ├── content/            # Content scripts (runs in page context)
│   │   ├── title.ts        # Scans manga details on title page
│   │   └── reader.ts       # Extracts canvas/image URLs from reader view
│   ├── core/               # Shared models and utilities
│   │   ├── config.ts       # User setting types and operations
│   │   ├── constants.ts    # Base endpoints
│   │   ├── models.ts       # Manga, Chapter, and Format helpers
│   │   └── selectors.ts    # Centralized DOM selector registry
│   ├── offscreen/          # Offscreen document for WebP ➔ JPEG conversion
│   ├── options/            # Extension settings panel
│   ├── popup/              # Interactive extension popup popup.html / popup.ts
│   └── background.ts       # Extension background service worker (orchestrates download job)
├── package.json            # Scripts & project dependencies
├── tsconfig.json           # TypeScript configuration
└── vite.config.ts          # Vite bundle configuration

---

🔧 Technical Details

• Vite & Rollup: Configured to bundle independent entry points (background worker, popup, options page, offscreen document) into a clean, flat-directory layout.
• declarativeNetRequest: Dynamically spoofs HTTP Referer and Origin headers for outgoing requests to wowpic and *.store CDNs. Also injects CORS headers to permit safe cross-origin resource access.
• Offscreen Canvas: Chromium Service Workers cannot access the DOM or canvas context directly. The extension automatically spawns an offscreen HTML page to convert browser-native WebP images to JPEG binary formats, enabling compatibility with PDF builders.
• pdf-lib: Used to assemble images into standard PDF publications on-the-fly.
• jszip: Compresses raw images alongside custom ComicInfo.xml metadata files to construct highly compatible Comic Book Archives (.cbz).

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

⚠️ Disclaimer

This extension is for personal use and educational purposes only. Please respect the copyright of creators and publishers by supporting official releases.

---

Made with ❤️ by Yui007

⭐ Star this repository and the main Python Downloader if you find them helpful!