Canvas PDF Tabs

Inspiration

I'm an engineering student who is kind of lazy when it comes to file organization. My university uses Canvas, and many of my assignments and project files have a linked PDF. Canvas has a built in PDF viewer that absolutely sucks, pinch to zoom doesn't work, no search or annotation, and scrolling is weird. The alternative, which I have been doing for a while, is downloading the pdf and opening it in Acrobat for Chrome (or just desktop Acrobat). This means extra clicks, having to get rid of pesky Acrobat pop ups and search for the few functions I actually use, since Acrobat has so much functionality, not to mention the fact that I end up downloading multiple copies of pretty much every PDF I've ever viewed from Canvas, since I don't want to go trudging through my downloads folder to reopen one I looked at a week ago.

What it does

When I click on a PDF from Canvas, a new tab opens with that PDF loaded and simple viewer functionality, including zoom, page layout, text search, highlighting, bookmarking, and note annotations. Normal click navigates us to that tab as it opens, ctrl + click opens it but keeps us on the Canvas page. When the PDF viewer tab is closed, annotations and their locations remain saved, so next time I open that PDF from canvas I can click straight to any annotations I made. Multiple open tabs for different PDFs is also supported.

How we built it

Using the Learn AI Basics skills, I went through the process with Codex. We brainstormed for a while to find a problem, and decided that a Chrome extension would be the best bet to make it work smoothly. It was straightforward from there: we narrowed down the functionality I wanted, planned out how to achieve it, and then built and iterated a bit as I gave feedback on the way things looked and worked.

Challenges we ran into

There were a few bugs that had to be ironed out: PDFs nested in folders in the Files tab weren't being read by the extension, some lines would get highlighted multiple times, highlights from links and page search weren't actually on top of the words but rather down and to the left, and some stylistic choices needed changing. For each of these, I identified the issue, explained what needs to change, and Codex was able to fix each problem.

Accomplishments that we're proud of

I now have a much better way of viewing my school-related PDFs. I won't be crowding my downloads folder anymore or dealing with Acrobat pop ups, and I can annotate the files and return to them directly from the Canvas links! It's a huge quality of life boost for me, and only took a few hours to get done.

What we learned

I have used AI for projects before, but it's never gone this smoothly. Having the skills set up so that the agent interviews me about the project is a much better way of doing things than I used to. Separating planning and building into multiple steps is great for preventing building something that I didn't want, and keeping those files in a project folder means I don't have to worry about continuing in a new chat. I will definitely be using this workflow for projects moving forward.

What's next for Canvas PDF Tabs

The extension is currently awaiting approval to be listed in the Chrome Web Store. I hope that others can benefit from this quick fix, I'm sure I'm not the only one at my university who has been annoyed by PDFs on Canvas. If it starts to pick up traction and monetization options seem reasonable, I might try to expand this to other similar websites and tools.

Built With

• chrome
• codex
• instructure-canvas
• pdf