hide the Canvas® nav menu without clicking
This blog post is about a Chrome extension I made which toggles the "Hide Navigation Menu" button in the Canvas® LMS when selected pages load. Here's a link to my github repository containing the code.
Read on to learn what motivated me to make this extension, and how to use it on your computer!
!!! Note: The code described in this post will not work after January 2023. !!!
the motivation
Ah, the ubiquitous "Learning Management System." Does anything give US college students a deeper shared experience? 📈👀
During my time in college the percentage of students who have our learning managed by Canvas® has increased dramatically. According to "Phil on Ed Tech", by July 2020 approximately 39% of higher education students in North America were interacting with Canvas®.
I appreciate everything that Canvas® accomplishes. And, anything can be improved.
For example: When I started taking four courses through Oregon State University's Ecampus last fall, I found that I was clicking one button more than any other — the "Hide Navigation Menu" button.
The reason was that every course "modules" page, along with the required "exploration" reading pages, were having valuable screen real estate wasted by a list of links I didn't need — the navigation menu. Because I'm particular about the way content is presented to me I was clicking the button to hide it dozens of times every day, and my frustration grew with each click.
Thankfully, one of the courses I was taking at the time was "CS 290: Web Development". While googling some topics from the course, I stumbled across this guide to crafting extensions for Chrome.
(I'm aware that there are good reasons to choose a browser other than Chrome. But I have deep roots in the almighty Google ecosystem and no plans to leave it anytime soon, so Chrome it is.)
Between my coursework and the Chrome docs I was able to whip up a small extension that essentially clicks the "Hide Navigation Menu" button for me whenever I navigate to a "Modules" or "Exploration" page.
how it works
The manifest.json file tells Chrome what pages to toggle the nav menu on,
toggleNavMenuOnLoad.js does the actual toggling, and background.js does
some general setting up.
I've also added three popup files (.html, .css, and
.js) which allow the extension to be controlled from the icon in the toolbar (while on
a Canvas® webpage).
If you have a specific question about how any of the code works, please leave a comment below so that we can discuss it!
great, how do I use it?
To get started, download the code from github to a folder on your computer (green button » download zip » extract files).
Then, go to chrome://extensions/. Turn on "Developer mode" in the upper left, then click
the "Load unpacked" button in the upper right and select the folder that you put the files in.
If you're attending Oregon State University (and the code hasn't been broken yet) then you're all set! Try navigating to the "Modules" page for one of your courses to see it in action 🤓
umm... it's not working?
If you're attending a different institution, there will be one more step: you need to replace my urls
in manifest.json and the background.js with the right urls for your
school.
In manifest.json under "content_scripts" there are two urls; one for
".../pages/*" and one for ".../modules". This ensures that any "pages" or
"modules" I navigate to have their nav menus hidden.
The part of the url you will need to change is the host. My Canvas® host url is:
"canvas.oregonstate.edu". Your Canvas® host url may look like this with a different
school name, or it might be a different format like "institution.instructure.com".
Either way, replace my host url with your host url in the two "content_scripts" urls and
save the manifest.json file.
Then take that same host url, and do the same replacement in background.js (you'll see
where).
Finally, press the "reload" symbol for the extension on chrome://extensions/. Now you
should be all set! 🥳
cool, I did it! …now what?
After trying out my code, you may find that you prefer to only hide the nav menu on exploration "pages" — not on "modules". Or, maybe you want to also hide the nav menu on "grades" pages.
Cases like these are easy to adapt to; just change the urls in the manifest.json
"content_scripts" like I described above, but this time don't change the host url of
the links. Instead, remove a link from the list. Or add a new link that matches the pages you want
the extension to run on. The possibilities are endless (sorta)!
As a final note — if you are inspired by this post and create a similar extension for a different browser please comment below! I'd love to check it out, and I'll probably edit this post to feature your work!