EzCanvasDisplay

An extension that overlays current grades on your Canvas dashboard cards and adds a unofficial GPA calculator where you can edit credits per course and see your term GPA update live.

Comment

Inspiration

As students, constantly navigating Canvas to check grades is time-consuming, and projecting GPA often requires separate spreadsheets or tools. We wanted a quick, integrated solution directly inside of Canvas!

What it does

EzCanvasDisplay displays your real-time grade percentages right on each Canvas course card. It also adds a GPA calculator where you can:

  • Edit credit hours to match your schedule.
  • Exclude specific courses from GPA.
  • Add custom “What-If” classes to project outcomes.

(And a plus all the data is stored locally!)

How we built it

We developed a Chrome extension using JavaScript, HTML, and CSS. In order to build the extension, we first parsed Canvas's inline environment variables to reliably discover the currently logged-in user's ID via a helper script. We later called the Canvas API and dynamically fetched enrollment and grade data in real time using that ID. After dynamically fetching data, we injected grade badges directly into the Canvas dashboard's DOM, allowing students to see their course percentages immediately. Lastly, we built a GPA calculator panel with input fields where students could enter their own data for credit hours, toggle exclusions in courses, and enter custom “What-If” classes to calculate how they may impact GPA and stored everything in localStorage so that the state would persist safely in the user’s own browser

Challenges we ran into

The biggest challenge we ran into was working with inconsistent Canvas DOM selectors based on different dashboard views, flexible fallback logic was built so grades will always be shown and the worst possible outcome would be that it displays "N/A" . Parsing the user ID out of Canvas’s ENV object was another struggle because it offers no level of certainty given the potential variance. And lastly, building the GPA calculation which allows flexibility but also balances a clean simple look was tricky, as we really wanted to let users edit credit loads, exclude courses, and provide “what-if” scenarios without overloading the user.

Accomplishments that we’re proud of

  • Clean integration that looks native to Canvas.
  • Adding “What-If” functionality so students can explore GPA scenarios.
  • Keeping everything private with no external data storage.

What we learned

  • How to build and structure a Chrome extension.
  • How to interact with Canvas’s API securely.
  • The importance of UI/UX design when extending existing platforms.

What’s next

  • Adding support for more GPA scales and international grading systems.
  • Allowing users to export their GPA scenarios.
  • Making the design responsive for both desktop and smaller displays.
Share this project:

Updates