Creating a Chrome Extension to Use with Canvas LMS

[Code-with-Ski]

I have been working on improving my skills as a developer and I am impressed by all the different things people have created to solve a problem or improve a workflow through locally developed options.  Seeing these creations made me wonder about what things I could create. So I started researching and learning more about creating modifications and using the Canvas API. 

The Canvas Community had a lot of good resources to get started.  I also watched the majority of past Canvas Conference presentations that related to development.  In addition, I found the The Coding Train on YouTube and he has provided a lot of helpful tutorials on JavaScript, API calls, and even making a Chrome extension.

Discovering the playlist on making a Chrome extension sparked my interest, especially once I saw how easy it was to take your code and then package it to work as a Chrome extension.  At first, I was just using it locally by using the Developer mode in Chrome.  However, I wanted to go through the process of learning how to publish the Chrome extension and share it with others.  So I learned about manifest version 3 and updated my manifest file so that I could publish it using the latest standard.

My Chrome extension, Canvas LMS Mods (Basic), includes features to improve the user experience.  The first version only included features for the admin area of Canvas.  However, as I continue improving it, I am expanding to adding features to other areas of Canvas to be useful to more users.  For this Chrome extension, I am focusing on low-code options that can be created using vanilla JavaScript and the Canvas LMS API.  The various features are enabled by default, but if you go to the options for the Chrome extension you can disable features you don't want and/or that may conflict with theme customizations in your instance of Canvas.  I will do my best to fix features that may break with Canvas updates, but may not always be possible depending on how significant the change is.  Fortunately, with the options, it makes it easy to disable features if there is a bug waiting to be fixed.

If you try out my Chrome extension, I would appreciate any feedback that you have so I can take it into consideration for future updates.

Features from Prior to Version 1.2.0 Release

Current Feature Options Available:
- Global
    - Enable full-width for the page body
- Account
    - Profile
        - Enable "View Grades" button on the user's account profile page
- Dashboard
    - Enable "See all courses" button on the dashboard
- Course
    - Global for course
        - Enable sticky course header
    - Modules
        - Enable "Jump to Module" selection
- Admin
    - Course Search
        - Prevents input for "Show only blueprint courses" from filling to the end of the page in desktop view
        - Add the course code to the course search results (Uses Canvas LMS API calls)
    - People
        - User Account Details
            - Course enrollments box
                - Make it resizable
                - Set a default height
                - Sort the enrollments by status, term, and role
                - Filter enrollments by course published status, enrollment status, and/or term
                - Add the course code to the list of enrollments (Uses Canvas LMS API calls)
            - Accounts box
                - Make it resizable
                - Set a default height
                - Show the admin roles in each account (Uses Canvas LMS API calls)
            - Groups box
                - Make it resizable
                - Set a default height
            - Avatar image
                - Make it resizable by clicking and/or dragging it to resize
        - Profile Pictures
            - Make it resizable by dragging the corner
            - Make it a rounded square instead of a circle to show more of the background
            - Adjust the default size
        - Rubrics
            - Add a search ability to the rubrics
        - Question Banks
            - Add a search ability to the question banks
        - Sub-accounts
            - Enable show Canvas account ID
            - Enable show SIS account ID (Uses Canvas LMS API calls)
        - Terms
            - Add a search ability to the terms
            - Move the add term button to the top of the terms table
            - Show the Canvas Term ID
        - SIS Import
            - Enable SIS History Log (Uses Canvas LMS API Calls)

Version 1.2.0 Release Updates:

• Patched the overlap issue with the blueprint side menu when the course sticky header is enabled
• Patched the SIS Import log to prevent duplicate requests from loading in the table on infinite scroll
• Added new feature for the all course page:
  • Filters for the term, enrolled as, and published columns based on the values in the table
  • Search bars for the course and nickname columns
  • Sorting on the course, nickname, term, enrolled as, and published columns

Version 1.3.0 Release Updates:

• Dashboard
  • Shows the current course grade on the dashboard cards where you are enrolled as a student.  *This is similar to the feature that is available in the mobile app
• Course
  • People/Users
    • Enable users export to CSV button (Requires course admin permission)
    • Enable ability to hide inactive users
    • Enable ability to filter by section (Uses Canvas LMS API)
    • Enable people sort by columns
  • Groups
    • Enable groups export to CSV button (Requires course admin permission) (Uses Canvas LMS API)
  • User
    • Enable access report export to CSV button
• Admin
  • People
    • Add link to grades for active courses
  • User Grades
    • Updates the name, headings, and link to reflect the user (Uses Canvas LMS API)