Jena Chang
WorkWritingContact

© 2026 Jena Chang. Built with sea shells.

Back to projects
Developer Tool

PrairieCalendar

Role

Extension Developer & UX Designer

Timeline

Feb - June 2026

Status

live

Tech Stack

JavaScriptChrome Extensions API (MV3)Google Calendar APIOAuth 2.0iCalendar (.ics)HTML5 / CSS3Figma

Overview & Challenge

PrairieCalendar is a lightweight, privacy-first Chromium browser extension that automates the extraction and synchronization of exam schedules from PrairieTest. Built to resolve the manual entry pain point for university students, it reads scheduling data directly from the DOM, processes it entirely on-the-fly, and exports events via standard iCalendar (.ics) files or direct Google Calendar API integration. Featuring a custom design system styled around Team BlueberryPie's signature theme, the extension processes all scheduling data client-side, ensuring complete student privacy.

To ensure full compatibility across Chromium-based browsers, I engineered a browser-aware authentication router: it leverages native Google identity tokens (`chrome.identity.getAuthToken`) on Google Chrome, while dynamically redirecting Brave, Arc, and Edge users through an OAuth 2.0 Web Auth Flow. Additionally, to resolve timezone misalignment and academic term mismatches across diverse university portals, I replaced hardcoded offsets with a custom parsing engine that extracts absolute UTC timestamps from DOM tooltip metadata. I also implemented a client-side duplicate prevention filter to cross-reference events with the user's primary calendar within a 60-second window, preventing duplicate schedule clutter.

Launch Live Demo
Source Repository
PrairieCalendar dashboard mockup

Prototype Showcase

PrairieCalendar showcase gallery slide 1
PrairieCalendar showcase gallery slide 2
System Architecture

How it works under the hood

A Chrome Extension architecture utilizing a Manifest V3 background structure. A content script dynamically scrapes exam reservations from the PrairieTest DOM, saving them to local Chrome storage. A Vanilla JS popup renders the schedule, standardizing raw dates with a custom timezone-agnostic parser and exporting them using the Google Calendar API or generating .ics files client-side.

Authentication is managed via a dual-route OAuth pipeline (native Chrome Identity + redirect-based Web Auth Flow) to guarantee cross-browser compatibility, while student data remains entirely local, ensuring a privacy-by-design architecture with zero external database dependencies.

PrairieCalendar system design diagram