Skip to content

Chrome Extension Set Up Guide

Alicia G edited this page Mar 10, 2023 · 2 revisions

Canvas Chrome Extension

Developer Extension Installation Instructions

This is a Chrome extension only.

  1. Clone the repo for Canvas Code Grader
  2. Run npm run build in the terminal while in Canvas-Code > frontend > canvas-chrome-ext to populate the dist folder so it contains the manifest.json file. Extensions are loaded by using this file in chrome.
  3. To install the extension, open chrome and go to chrome://extensions, where you can manage your extensions.
  4. On the extension page in the top right, toggle the developer mode on
    image
  5. Click "load unpacked" button in the upper left-hand side of the screen.
    image
  6. Go to the directory where you saved the repo and navigate to Canvas-Code > frontend > canvas-chrome-ext > dist and click Select Folder.
  7. The extension will appear on the extension page as Canvas Code Grader.
    image

Additional notes

  1. To make the extension appear as an icon in chrome, click the extension icon in the top right of the browser and pin the extension.
    image
  2. When making changes to the extension you will have to go to the extensions page and hit the "update" button in the top left of window after each iteration.
  3. To debug the extension right-click the window and hit inspect page and then select console. There should be messages that appear during usage of the extension.
  4. Other extensions may influence the use of this extension, like adblocker or video playback speed extensions. Some other extensions may cause unknown errors. To remedy this, turn off other extensions if you believe they are interfering with the program.