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.

ProfessorBeyrer · ‎08-12-2022

Thank you @Code-with-Ski for this enhancement! The button to see all courses on the Dashboard is the first thing that made me jump with joy. 👍

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

@ProfessorBeyrer

You're welcome! I'm glad you are already enjoying the Chrome extension 😁 I'll include updates on here when I add new features too.

jerry_nguyen · ‎08-14-2022

@Code-with-Ski

Great works and thanks for sharing. I can see some useful UI improvements that I can implement directly into our Canvas (E.g "See all courses" button and SIS Import log)

By the way, I have a custom script to create a better To Do list on Canvas if you like to implement it to your Chrome extension: https://community.canvaslms.com/t5/Canvas-Developers-Group/Custom-JS-to-display-full-sortable-To-Do-...

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

@jerry_nguyen

You're welcome! The SIS Import log is definitely something I have found useful to help with monitoring SIS Imports and tracking down errors more easily than reading through the JSON format. I have it on my queue to improve the infinite scrolling for that table to clearly show when it is loading more records and to prevent the duplicate requests that sometimes happen if you scroll too fast. I'll be sure to post an update here once I release a patch for it.

The To Do list modification you created looks like a useful tool. Thank you for sharing! I like all the export options you have too for the data in case someone needs to save the information for later. I see that you are using jQuery and some other third party libraries for your design, which I am trying to avoid for this side project. Since I have to package all code in the Chrome extension, I would need to continue to monitor these third party tools for updates and security in addition to monitoring my own code and the Canvas UI updates. Nonetheless, if I have time to make a similar version of this with vanilla JavaScript, I believe this would be a useful feature to include for teachers and admin that may need to review ungraded submissions in a class. I may look into creating some type of export feature for the SIS Imports log too.

jerry_nguyen · ‎08-15-2022

@Code-with-Ski

As an admin on Canvas, I have a few suggestions on features that would improve our workflow and make life a little bit easier for admins 😏 . It would be great if you could consider implementing the following:

A "Create New Course Based In This BluePrint" button within a BluePrint course. Rather than having to create a blank course then open the BluePrint course and associate it.
A shortcut button straight to the admin Course/People search page from the Dashboard page. Saving us 3 mouse clicks + loading time (Admin -> Account -> People)
Shortcut links to the following pages from the Account User Profile Enrollments list

I'm not a programmer so I use jQuery as a shorthand. I know it's not best practice so It would be great if you could convert my script to Vanilla. I used an external table library (Datatables) because it provides exporting and sorting functions. However, I think we could simply utilise Canvas's built-in table library?

By the way, I spotted an issue, the sticky course title is overlapping the Blueprint button

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

@jerry_nguyen

Thank you for sharing your ideas!

For the "Create New Course Based In This BluePrint" button, I'll add it as an idea for an advanced version of the Chrome extension since it would require API calls other than "GET"
For the Course/People search, I was actually thinking about an idea to make a quick link to the People search page in the Admin flyout menu. I hadn't though about putting it on the Dashboard, but I'll take that into consideration.
- Did you have an idea on what it might look like on the Dashboard?
- How would it look for users that are admins in multiple accounts?
For the shortcut links on the user's enrollment page, that seems feasible to inject shortcut links for those too. I'll add it as an idea to my queue

Thanks for letting me know about the error. I thought I had fixed that overlap issue in my latest version 1.1.2. Would you please let me know what version of the Chrome extension you are using? I'll do some more testing on my end too to see if I can replicate that issue.

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

@jerry_nguyen

Thank you again for letting me know about the issue with the blueprint menu overlap. I found the issue and released a patch for it in the latest version that I just submitted to the Chrome Web Store. Version 1.2.0 should hopefully be available by tomorrow (8/18/22).

jerry_nguyen · ‎08-18-2022

@Code-with-Ski

Great, the overlap issue is fixed.

For the Course/People search, I was actually thinking about an idea to make a quick link to the People search page in the Admin flyout menu. I hadn't though about putting it on the Dashboard, but I'll take that into consideration.
Did you have an idea on what it might look like on the Dashboard?
How would it look for users that are admins in multiple accounts?

I'm thinking of doing something like a Megamenu where you hover your mouse on the "Accounts" menu, a list of sub-accounts will appear, then hover on a sub-account, and the shortcuts will appear.

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

Version 1.3.2 Release with patches for the following:

Sticky header is now hidden when the rich content editor is expanded to full screen within a course
People sort buttons are now re-added when a new table is generated when using the search or role selection filters. The sort is also set to the previous version from the last table that was removed (if available)

bratsj58 · ‎09-04-2022

This is brilliant! Thank you!

Code-with-Ski · ‎09-05-2022

@bratsj58

You're welcome! I'm glad you are enjoying it 😀

jbeyer1 · ‎10-07-2022

Could you post pictures of what we should be seeing when we use this extension? I am trying it out but I am not sure how it works since I am not seeing anything so far. Thanks.

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

@jbeyer1

I am working on developing a website to document each of the features in more detail. In the meantime, here are a couple screenshots a couple features you should see if the extension is running successfully.

On the Dashboard, you should see a "See all courses" button that is a quick link to all of the courses you are enrolled in. In addition, if you are enrolled as a student in any of the courses on your Dashboard, you should see an overlay related to your grade in the course which should behavior the same as the Canvas feature that is available in their mobile apps. You may also notice that the width extends to the full width of the page rather than leaving the empty white space on the right for larger screen sizes. Depending on the size of your screen this can allow more course tiles to appear on each row.

Dashboard view with extension modifications active

The one is of the All Courses page. You will see the ability to sort and/or filter your courses based on the different column headings. I do have them set-up to be disabled if sorting or filtering by that aspect wouldn't have any affect.

All Courses view with extension modifications active

If you don't see these modifications, please let me know the base URL for your school. Currently it only works for schools with a URL like school-name.instructure.com If you are on a custom URL like canvas.school-name.edu, I would need to make an update to the extension for it to work for you on your school's Canvas instance.

tkaser4 · ‎10-30-2022

@Code-with-Ski Is there a way to send you a private message with our school's URL?

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

@tkaser4

I tried to send you a private message, but it says you don't have private messages enabled. If you enable private messages, you can send me a message on here. You can also use the Contact the publisher link on the Chrome extension web page in the Chrome Web Store. Canvas LMS Mods Basic

dtod · ‎08-01-2023

I wanted to get this working on our own custom domain (which it does not do currently), so I followed these instructions from StackOverflow. I downloaded the extension, extracted it to a folder, deleted the _metadata folder, and modified the manifest to allow any site. This considerably simplified the manifest. Snippet below:

  "host_permissions": [
    "https://*/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://*/*"
      ],
      "js": [
        "global/global.js",
        "global/global-nav.js"
      ],
      "css": ["global/global.css"]
    },

When I loaded the unpacked extension, I was able to enable it on the specific sites I needed to. There is probably another way to do this, but this worked for me.

dtod · ‎08-01-2023

There is another Canvas-specific extension that I don't recall seeing mention of before: CanvasCape.

Code-with-Ski · ‎09-05-2023

@dtod

Thanks for sharing the approach you took to make the extension work for you. Since the list of domains has been growing, I've been thinking about modifying the extension to allow for any domain so it is easier to manage as there are a lot more custom domains than I realized. I want to investigate if I can modify it to look for key features of Canvas, that way if someone does happen to enable it on a non-Canvas website, then it wouldn't load the customizations. I'm currently working on a new Chrome extension focused on custom reports, but I plan to return to this one for further enhancements after launch.

As a side note, I did share the code on GitHub, so you can get the code from there rather than needing to extract the code after installing the Chrome extension: https://github.com/Code-with-Ski/Canvas-LMS-Mods The steps you took to replace the sets of domains to be more generic works. Alternatively, users could replace the existing domains with just their schools domain. If someone else does make a local version, here are instructions for how you can load your own local version of a Chrome extension: https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked

Code-with-Ski · ‎09-27-2023

@dtod

The browser extension now allows users to use it with any domain if you would like to try installing it again and get the latest updates. After installing, I do recommend updating the extension settings to limit access to your specific site or only activated on click.

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

lettgo583 · ‎10-10-2023

Does this work for Discussions that have rubrics? Or, only for Assignments?

Code-with-Ski · ‎10-10-2023

@lettgo583,

I don't have the export grades button on individual discussions at this time, but it is something that I may consider in a future update if I can get it to work.

In the meantime, if you go to the Course Statistics page (link is found in the right-hand side in course Settings or on the course home page if you are on min. version 3.2.0) you will see a set of custom course reports that I have developed. If you use the Submission Details report, it will load the data for all submissions in the course. This should include the rubric criteria data too (hidden by default, but you can show the columns after the data load). If you download the results, you can filter them using Microsoft Excel or other spreadsheet application.

Code-with-Ski · ‎10-10-2023

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

Code-with-Ski · ‎10-17-2023

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)

Code-with-Ski · ‎10-17-2023

@lettgo583

You should now be able to export grades with the rubric details on individual discussion boards. The Export Grades button is found under the 3-dot menu in the upper right.

discussion board export grades

lettgo583 · ‎10-18-2023

That is fantastic!! Thank you!!! By the way, I'm a sub-account Canvas admin. I asked our University-wide admin about using your features campus-wide, but he mentioned that since it's an extension, that wouldn't be practical. We have adopted some of the Canvancements campus-wide though.

Code-with-Ski · ‎10-18-2023

@lettgo583

You're welcome! I am glad that you are already finding it useful.

As a side note, the code for the extension is open-source on GitHub if your school would like to extract features to deploy campus-wide, but I don't provide support for this currently. However, utilizing the extension will ensure users get the latest updates and bug fixes that I release.

Code-with-Ski · ‎10-24-2023