Red Parser

A browser extension that parses and exports card transactions from one of the popular Czech benefit card portals to CSV format.

Features

• Transaction retrieval — calls the portal's authenticated gRPC-Web API directly to fetch all transactions in the selected date range (no scrolling)
• CSV export — generates a downloadable CSV file with date, time, merchant, location, amount, currency, wallet type, and transaction type
• Bilingual UI — supports English and Czech, auto-detected from the portal language
• Exact data — amounts, merchants, and real-year dates come straight from the API response

Tech Stack

• React 19 + TypeScript
• Vite with vite-plugin-web-extension
• WebExtension API (Manifest V3)

Getting Started

Prerequisites

• Node.js v18+
• Chrome or Firefox v109.0+

Install & Build

npm install
npm run build          # builds both targets: dist-chrome/ and dist-firefox/

To build a single target:

npm run build:chrome   # outputs dist-chrome/
npm run build:firefox  # outputs dist-firefox/

For development with hot reload:

npm run dev

Load in Chrome

1. Go to chrome://extensions
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked
4. Select the dist-chrome/ directory

Load in Firefox

1. Go to about:debugging#/runtime/this-firefox
2. Click Load Temporary Add-on
3. Select any file from the dist-firefox/ directory

Usage

1. Navigate to the benefit card portal, log in, and open the transactions page
2. Click the extension icon to open the popup
3. Select a date range
4. Click Export CSV
5. Wait for the extension to fetch the transactions from the portal API
6. Click the download button to save the CSV file

Project Structure

src/
├── content/          # Content script (gRPC-Web request/response codec)
├── popup/            # Popup UI (React components, hooks, CSV generation, i18n)
├── shared/           # Shared types and constants

Permissions

• activeTab — communicates with the content script on the active tab