Creating a Chrome Extension to Use with Canvas LMS

Code-with-Ski · ‎08-10-2022

UPDATE: 9/27/23 Change to Host Permissions Starting Version 3.0.0

To make it easier for users to begin using this when their institution is using a custom domain, I have updated the host permissions to allow all domains. Version 3.0.0 is currently released to approve access to all domains by default. Once version 3.1.0 is released, the host permissions will default to Instructure hosted domains as approved and all other domains can be optionally approved. This minor adjustment was suggested to improve the security and minimize the default approved access.

After you agree to the update, I would recommend updating the extension settings in "Manage Extensions" to change the setting to either be approved on click or specific sites and you can list only the domains you approve it to have access to. Install and Manage Extensions

You are also welcome to download your own copy of the source code from the repository and manage your own local copy to set the host permissions to what you desire by default: https://github.com/Code-with-Ski/Canvas-LMS-Mods

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.

Version 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)

Version 3.0.0 Release Updates:

Updated host permissions to all domains
Assignment
- When you go to an Assignment, if there is a graded ratio showing on the right, you will now see options to export grades including rubric scores if applicable
Course Statistics (Accessed from Course Settings page)
- Custom course reports have been added.
  - These are currently reports that load in detailed information about various content elements in the course.
  - I plan on continuing to add reports and add search options to the reports.
Rubrics (Account and/or Course)
- Drag and Drop Criteria Rows
  - When editing a rubric, you will be able to drag and drop criteria rows to re-arrange them if you need to change the order.
  - Dragging up will push existing content down when dropped, while dragging up will push existing content up
- Import Criteria Details
  - When editing a rubric, you will be able to import the criteria details using a standard format for the information.
  - Imported content will show in the edit view so you can preview the imported content before updating/creating the rubric.

Version 3.1.0 Release Updates:

Updated host permissions to Instructure hosted domains as the default required and all other domains as optional

Version 3.2.0 Release Updates:

Updated Discussion Replies report to include Discussion Counts
Added new Enrollments course report
Added button link to "Course Statistics" on the home page to make it easier to get to the custom course reports in this tool

Version 4.0.0 Release Updates:

New Features
- Rubric association report on individual rubrics
- Used for grading indicator for rubrics on assignment details
- Load assignment details feature on list of assignments
  - Submission type(s)
  - Whether or not it affects the final grade
  - Associated rubric, if it is used for grading, and if it uses outcome criteria
  - Option for Turnitin check too
- Made rubric search on the rubrics page a shared feature so it works in accounts and courses
- Load rubric details feature on list of rubrics
  - Context for rubric
  - Whether or not it has assignment associations
  - Whether or not it has outcome criteria
- Export grades for discussion board
Deprecated features
- Terms search in Admin (Instructure now has this as part of the new design)
- Move add term button to top (Instructure now has this as the default in the new design)

Version 5.0.0 Release Updates:

Course Report Updates
- Discussion Replies report now allows you to select a specific discussion board from which to get the replies
- Submission report now allows you to select a specific assignment from which to get submissions and to select the submission states to check
- Loading messages were added to show which part of the process the report is working on after clicking the button to load data. It will also show an error message if something goes wrong.
Section Reports
- Some of the custom course reports have been modified to work as section reports too.
  - Enrollment Report
  - Submissions Report
  - Module Progress Report
- These reports can be accessed on the settings page for an individual section.
Manifest and File Updates
- The config classes for SkiTable have been combined into the SkiTable class file since they are only used with that class and to simplify the number of files that need to be listed in the manifest
- SkiTable and SkiReport files are now listed on the specific pages that they are needed in the manifest before the feature files that need them rather than loaded by default on all pages. This will hopefully help with some inconsistent file loading sequences that were causing some errors.

Version 5.1.0 Release Updates:

Fixed bug with Discussion Replies report having an error due to deleted posts. It ignores deleted posts for now until version history becomes available.
Added new columns to the Assignment Details report.

Version 5.2.0 Release Updates:

Updated import rubric feature and drag-and-drop criteria feature for rubrics so that it also works on the assignment details page when adding/editing rubrics.
Patched issue with module progress report failing to complete due to module progress not existing for a requested user
Added a local cache to SkiReport to that common requests used across reports can be saved rather than repeating requests that are unlikely to change while using the reports. Users can refresh the page to update the cache if changes are made while using the reports.
Added new course/section reports:
- Grading To Do Report
- Grade History Report (Able to check grade history of deleted users too)
- Missing Rubric Grade Report (Find graded submissions that had an associated rubric, but the rubric wasn't used for assessment)
- User Access Report

Version 5.2.1 Release Updates:

Patched loading messages on Grade History and User Access Report
Patched paginated request handler for User Access
Patched load rubric details feature to properly work in Accounts.

You're signed out