A browser extension for YNAB that lets users see their category and account balances at a glance, quickly add transactions, setup customizable notifications, and more. See full feature list and installation links on the extension website.

• assets/ Extension assets
• public/ Website images and shared scripts
• src/
  • popup.tsx Extension popup page
  • options.tsx Extension options page
  • background.ts Extension background worker (refreshes data and the OAuth token)
  • middleware.ts Website middleware (Next.js)
  • app/ Website pages and routes (Next.js)
    • api/ API routes to fetch OAuth tokens from YNAB API
  • components/
    • extension/ Extension components
    • icons/ Common icons
    • react-aria/ React Aria abstract components
    • website/ Website components
  • lib/ Library and utility functions
    • context/ React Context that handles auth, data fetching, and storage for the extension
  • styles/ CSS files
  • tabs/ Additional extension pages
• test/ Unit tests

Set up an OAuth application in your YNAB Developer Settings, then set the following environment variables in a .env file :

• PLASMO_PUBLIC_MAIN_URL: The URL of the Next.js website and API routes (when running locally, set this to http://localhost:3000)
• PLASMO_PUBLIC_YNAB_CLIENT_ID: OAuth client ID
• YNAB_SECRET: OAuth secret (server-only variable, won't be exposed to the extension)

Run pnpm install to install all dependencies.

This extension was developed using the Plasmo framework. You can run the extension's development server via:

pnpm dev:plasmo

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: build/chrome-mv3-dev.

For further guidance, visit Plasmo's Documentation

The website is created with Next.js. Pages and API routes are located in the src/app/ folder. You can run the development server via:

pnpm dev:next

Extension:

pnpm build:plasmo

Website:

pnpm build:next