CanvasOnReels

Inspiration

The inspiration for CanvasOnReels came from a startling observation, students often feel an immediate sense of "academic burnout" the moment they open the traditional Canvas dashboard. The interface is a relic of early 2010s web design, that is nested folders, dry text lists, and hidden notifications. We noticed that while students struggle to spend 10 minutes on Canvas, they effortlessly spend hours on social media. We asked ourselves, what if we could hijack that dopamine loop for good? By applying the "Swipe-to-Study" philosophy, we wanted to turn academic chores into a high-engagement habit.

What it does

CanvasOnReels is a social-media-style interface designed entirely around the Canvas LMS ecosystem.

Stories for Announcements: Course updates move from the "Inbox" to the "Story Tray." New announcements appear as unread Stories with the classic vibrant gradient, allowing students to tap through their professors' updates just like a friend's weekend highlights.

Canvas Bites : A vertical, scrollable feed of micro-study content. It transforms static course material into active-recall flashcards and 60-second professor "hints."

How we built it

We engineered CanvasOnReels as a Chrome Extension that acts as a transparent layer over the existing Canvas ecosystem. Because we couldn't rely on a static API Key (which students don't have access to), we built a Session-Hitchhiking Engine:

The Manifest: Using Manifest V3, we defined content_scripts to gain access to the instructure.com and wisc.edu domains.

The Cookie-Bypass: Instead of traditional authentication, we leveraged the user’s active browser session. By making fetch calls directly from the content script, the browser automatically attaches the student’s active cookies to the request. This allowed us to query internal endpoints like /api/v1/courses as if we were the Canvas frontend itself.

Challenges we ran into

The most significant hurdle was the "Silent Refusal" of the Canvas API. We are not allowed to make API keys so doing this would be near to impossible, but we found a turn around by using session cookies instead to authenticate.

Accomplishments that we're proud of

The "Invisible" Auth: We are incredibly proud of getting the app to work without requiring the user to generate a developer token. It makes the app truly "plug-and-play."

High-Fidelity UI: Translating dry, nested JSON data into a vibrant, swipeable social interface that feels exactly like Instagram was a major win for our frontend design.

Data Synthesis: Successfully aggregating data from dozens of different course endpoints into a single, unified "Home Feed" without crashing the browser.

What we learned

We learned that headers are everything. In modern web development, the difference between a failed request and a successful one is often a single 'Accept': 'application/json' string. We also learned how to navigate Asynchronous JavaScript at scale—managing multiple "promises" that are all competing for bandwidth and ensuring they resolve in the correct order to populate our UI.

What's next for CanvasOnReels

DOM Injection: Moving beyond the extension popup and actually injecting the "Reels" feed directly into the Canvas Dashboard HTML.

While we started with the Canvas ecosystem, the architecture of CanvasOnReels is designed to be modular. We aim to expand support to Piazza and Gradescope, aggregating all academic "social" data into one single, beautiful, high-speed feed.