fghpdf/statement-sync

Chrome extension to export bank & credit card statements to Google Drive as CSV. Multi-institution.

โ˜… 0Forks 0TypeScriptGitHub โ†—Compare

README

StatementSync

A minimalist Chrome extension that extracts credit card and bank statement data from financial institution portals and syncs them to your Google Drive as standard CSV files.

Status: Active development. Amex JP support is live; more institutions coming.


Supported Institutions

Institution Status Content Script
American Express Japan โœ… Live src/extension/institutions/amexjp.ts
Your bank here ๐Ÿ—“ Planned src/extension/institutions/<name>.ts

Features

  • Multi-institution architecture โ€” each financial portal gets its own isolated content script; adding support for a new bank is a single file.
  • Google Drive integration โ€” OAuth2-authenticated upload straight to a named folder in your Drive.
  • Smart file naming โ€” consistent, date-stamped filenames like AmexJP_1234_2025-07_Statement.csv.
  • Real-time page detection โ€” the popup automatically detects whether you're on a supported page and disables the button if not.
  • Settings โ€” toggle the _Statement filename suffix per your preference.

Tech Stack

Layer Tool
UI React + TypeScript
Styling Tailwind CSS v4
Bundler Vite
Extension platform Chrome MV3 (content scripts, service worker, chrome.identity)

Developer Guide

1. Install & Build

npm install
npm run build

The dist/ directory is the compiled extension ready to load into Chrome.

2. Configure Google OAuth2

  1. Go to Google Cloud Console and create a project.
  2. Enable the Google Drive API.
  3. Configure the OAuth consent screen.
  4. Create an OAuth Client ID (Application type: Chrome Extension).
  5. In public/manifest.json, replace the placeholder:
    "client_id": "YOUR_GOOGLE_OAUTH_CLIENT_ID.apps.googleusercontent.com"
  6. Rebuild: npm run build.

3. Load in Chrome

  1. Go to chrome://extensions/
  2. Enable Developer mode (top right)
  3. Click Load unpacked โ†’ select the dist/ folder

Project Structure

src/
โ”œโ”€โ”€ components/
โ”‚   โ””โ”€โ”€ ExtensionPopupMockup.tsx   # Popup UI (React)
โ”œโ”€โ”€ extension/
โ”‚   โ”œโ”€โ”€ institutions/              # One file per financial institution
โ”‚   โ”‚   โ””โ”€โ”€ amexjp.ts             # Amex JP content script
โ”‚   โ”œโ”€โ”€ background.ts              # Service worker: Drive API + OAuth
โ”‚   โ”œโ”€โ”€ types.ts                   # Shared ExtractionResult interface
โ”‚   โ””โ”€โ”€ utils/
โ”‚       โ””โ”€โ”€ filename.ts            # CSV filename generator
โ”œโ”€โ”€ main.tsx                       # Preview app entry
โ””โ”€โ”€ popup.tsx                      # Extension popup entry
public/
โ””โ”€โ”€ manifest.json                  # Chrome MV3 manifest

Adding a New Institution

  1. Create src/extension/institutions/<name>.ts.
    • Listen for EXTRACT_STATEMENT messages.
    • Respond with ExtractionResponse from ../types.ts.
  2. Register the content script in public/manifest.json under content_scripts.
  3. Add the new entry to the rollupOptions.input in vite.config.ts.
  4. Update the host_permissions array in manifest.json if the new domain is not already covered.

That's it โ€” no changes needed to the popup or background worker.


Environment Variables

Copy .env.example to .env and fill in your values (used for local development only; never committed):

cp .env.example .env

License

MIT

Contributors

fghpdf

Issues