This is our base UI
This is our UI with categories selected
Our extension logo
Our devpost logo

Inspiration

As students who use Canvas daily, we wanted to design a tool that downloaded or archived the valuable educational content stored on classroom pages. However, Canvas is configured and organized differently for each class and professor, which means that there is no unified place that contains every file for every class. This means each file must be downloaded individually, which requires searching across Canvas' different categories and web pages. Our tool enables a user to instantly download an organized collection of all of the available files in a course directly to their device.

What it does

Our tool downloads all files from selected Canvas courses based on the page that the user is on. If the user is on a course page, all files from that course are downloaded. If the user is on the dashboard page, all classes that are displayed are downloaded. Our user interface also asks the user which categories of files they desire to download, and stores the respective downloads by course ID or school term.

How we built it

Our project is a Google Chrome extension, which we assembled with HTML, CSS, and JavaScript. This Java Script program interfaces with the Canvas LMS API to read the Files, Assignments, Pages, and Modules of a class. Additionally, some image editing and graphical design was done in GIMP.

Challenges we ran into

There were some challenges with the Canvas API. Understanding JavaScript and how to use it to make HTTP calls to the API took some patience. We also needed to learn and understand how the API stored all its data so we could access what we wanted correctly. We worked with parsing HTML and JSON messages that the API provided us. Finally, none of us had previous experience creating a web browser extension, so we had to start from scratch. There is also a lack of documentation in many places which added to the challenge.

Accomplishments that we're proud of

We are proud of our ability to work together as an effective team and create a web browser extension from scratch given limited time and resources. We are also proud that we created a tool that solved a problem multiple group members had with their experience in Canvas. We hope that others in the community can also find use in our tool.

What we learned

Our group learned how to make an extension for Google Chrome using web technologies, including the aforementioned languages and the API for Canvas. We also become more comfortable and skilled with the languages and software we used.

What's next for Canvas Archiver

Our group may want to extend our archiver tool to make copies of the Canvas webpages themselves and to extend our functionality to work with more categories that we did not have time to address.