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.
| Institution | Status | Content Script |
|---|---|---|
| American Express Japan | โ Live | src/extension/institutions/amexjp.ts |
| Your bank here | ๐ Planned | src/extension/institutions/<name>.ts |
- 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
_Statementfilename suffix per your preference.
| Layer | Tool |
|---|---|
| UI | React + TypeScript |
| Styling | Tailwind CSS v4 |
| Bundler | Vite |
| Extension platform | Chrome MV3 (content scripts, service worker, chrome.identity) |
npm install
npm run buildThe dist/ directory is the compiled extension ready to load into Chrome.
- Go to Google Cloud Console and create a project.
- Enable the Google Drive API.
- Configure the OAuth consent screen.
- Create an OAuth Client ID (Application type: Chrome Extension).
- In
public/manifest.json, replace the placeholder:"client_id": "YOUR_GOOGLE_OAUTH_CLIENT_ID.apps.googleusercontent.com"
- Rebuild:
npm run build.
- Go to
chrome://extensions/ - Enable Developer mode (top right)
- Click Load unpacked โ select the
dist/folder
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
- Create
src/extension/institutions/<name>.ts.- Listen for
EXTRACT_STATEMENTmessages. - Respond with
ExtractionResponsefrom../types.ts.
- Listen for
- Register the content script in
public/manifest.jsonundercontent_scripts. - Add the new entry to the
rollupOptions.inputinvite.config.ts. - Update the
host_permissionsarray inmanifest.jsonif the new domain is not already covered.
That's it โ no changes needed to the popup or background worker.
Copy .env.example to .env and fill in your values (used for local development only; never committed):
cp .env.example .envMIT