Creating a Chrome Extension to Use with Canvas LMS: Canvas LMS Mods (Basic)

Code-with-Ski
Community Coach
Community Coach
‎08-10-2022 03:49 PM
35
10337

Website with Feature Overviews 

https://code-with-ski.github.io/Canvas-LMS_Mods-Website/

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.

Version 5.2.2 Release Updates:

  • Patched page ID and page URL in the Page Details course report

Version 5.2.3 Release Updates:

  • Added more error handling to the Modules Progress course report

Version 5.2.4 Release Updates:

  • Updated the Modules Progress course report to fetch the items for a module if they were not included when all modules were fetched.

Version 5.3.0 Release Updates:

  • Updated the "All Courses" sort to apply to all columns and disable the sort button on those that don't need to sort. This is to provide consistency in headings based on the new feature from Canvas.
  • Updated the "All Courses" filters to be a part of the original thead row with the original th elements.
  • Added a filter for the favorited state on the All Courses lists
  • Deprecated the draft comment mod in SpeedGrader since it is now a native feature
  • Added option for enabling detailed logging (currently used primarily to console log API requests)
  • Added Simple Search feature to courses as a course navigation link. It currently allows searching for a specific term/phrase in Pages, Assignments, Discussion topics, and Announcements.

Version 5.3.1 Release Updates:

  • Updated manifest to ensure ski-report.js is loaded before the subclasses to avoid loading error
  • Updated grade overlay feature on dashboard to monitor for changes in case the overlay gets removed while the cards finish fully loading so it can be re-added

Version 5.3.2 Release Updates:

  • Fixed highlighting for Simple Search in titles
  • Added support for grade export feature on the discussion re-design
  • Refactored code for detailed logging feature to its own file
  • Added some new optional debugging messages when detailed logging is enabled

Version 5.3.3 Release Updates:

  • Deprecated feature adjusting the style on the only blueprint courses checkbox on the admin courses search due to additional search option added by Instructure
  • Deprecated feature for converting the sub-account name in the admin courses search since this is now a native feature
  • Updated placement of additional search options on the admin course search to be in their own row to improve the appearance
  • Updated browser extension options to add a link to the documentation website and improve spacing
  • Fixed feature for adding link to grades in the admin course search to not require enabling the number of students to be a link to the People page in the course

Version 6.0.0 Release Updates:

  • Updated simple search in course to add search options to only search certain types of content
  • Updated simple search in course to also be able to search course syllabus, files, and module items
  • Added new simple search feature to the All Courses page. This is like Simple Search for a course, but it searches across multiple courses the user is enrolled in. There are options to search by enrollment state as well (current, past, and/or future). Also, if the column search/filter options are used to hide some courses, they won't be included in the search results when they are hidden.

Version 6.1.0 Release Updates:

  • Added browser extension option control for the All Courses Simple Search
  • Updated the SkiReportCourseSimpleSearch to work for both a single course and the All Courses page - Updated the Simple Search results to have the content and HTML content cells appear collapsed initially. These can then be expanded as needed to view the full content if desired. This helps to reduce the total height required to display the results since each result could be long.

Version 7.0.0 Release Updates:

  • Simple Search on All Courses will search unique course IDs now rather than potentially duplicating a search if you have multiple enrollments in the same course
  • Added expand/collapse assignment groups button
  • Added expand/collapse buttons to the group sets
  • Added search and expand all to the sub-accounts list in the Admin area
  • Updated the sub-account IDs feature to apply to nested sub-accounts when they are revealed
  • Added error handling to Submission Results course report in case the request to get submissions fails

Version 7.1.0 Release Updates:

  • Updated loading message area on custom reports to scroll
  • Updated reports to append loading messages rather than replace to be able to review loading messages
  • Improved error messages and handling of failed requests in custom reports to assist with debugging and making it clear to the user when a part of the report generation fails. Report will still try to complete even if part of the process fails
  • Updated Simple Search to require at least 3 characters in the search query when including file names to search

Version 7.2.0 Release Updates:

  • Added ability to clear and/or download loading messages on custom reports
  • Added new filters to course enrollments when admin view a user's profile from account People search: roles filter, course name search, and course code search
  • Added support for Simple Search on course enrollments of a user's profile from account People search
  • Updated design and style of dialog for Simple Search to include a header, body, and footer to more closely resemble dialogs in Canvas

Version 7.3.0 Release Updates:

  • Added ability to load SIS course ID under each of the courses in the user's course enrollments (admin)
  • Added ability to filter user's course enrollments (admin) by SIS course ID
  • Grouped user's course enrollments filters by type (search inputs grouped together, and select menus grouped together)
  • Added "rejected" enrollment state as option for the course enrollments report

Version 7.3.1 Release Updates:

  • Fixed bug with terms select menu for user's course enrollment filter (admin)

 

35 Comments