![Canvas Refined](/icon/NEWtitle.png) # Canvas Refined I don't like the direction bettercanvas (bettercampus) is heading so I forked it They tried to change license but forgot to rebase so this is based on the MIT licensed version and fully legal 🙃 There is a dev branch for active alpha if you really want # Get it now! 1. get it on the [chrome web store](https://chromewebstore.google.com/detail/canvasrefined/ihienfbdfdamhmhhiokjnjmpjgbenedg)! 2. get it on the [firefox addon store](https://addons.mozilla.org/en-US/firefox/addon/canvas-refined/)! ## Inquiries To contact me, please email sandlerguy5@gmail.com, or you can open an issue within the "Issues" tab on GitHub. ## Table of Contents - [Features](#features) - [Dev Installation](#dev-installation) - [Version Notes](#version-notes) - [Color Reference](#color-reference) - [Contributing](#contributing) - [Authors](#authors) ## Features The original introduces improvements to the Canvas user interface: - Fully customizable dark mode (choose from premade options or manually edit dark mode) - Automatic scheduling for dark mode - Dashboard card color palletes - Themes created by users (broken due to fork) - Assignments due list - Dashboard notes - Custom fonts - Condensed cards - Dashboard grades - Remove sidebar logo - Customizable card links - Gradient dashboard cards - Advanced card customization - GPA calculator (college and highschool) - Browser wide popup assignment reminder - Preview assignments and announcements from the dashboard ## Newly added features Canvas Refined adds more with more to come! - GPA presets - backend stuff: - Searching themes (the original didn't actually implement that) - made the dark mode into a css file instead of a reallllllly long string - Card Styles (image size, card roundness, card spacing, width, height, theme compatible) - Custom Background - Use presets or add your own by URL - Theme compatible - Daily backgrounds - Popup UI revamp - NEW Better todo list - Better sidebar - Grade analytics and history - Quiz safe mode - Global Canvas Search (search modules & assignments across all courses; Ctrl/Cmd+K) - Simplified UI - Some options won't show up when not needed - Markdown in dashboard notes - Feature search bar - Smaller additions: - Equal height cards for card assignments - Center cards - Hide new dashboard button ## Planned Features - mail assistant + ui revamp - better calender (+ calender sync) - better what if grade - fix darkmode fixer (and automatic) - grade history with graph ## Extra features that might be added: - card grade position, card outline - streaks - maybe find a way for faster loading - rotating background, time/weather background overlay - custom side logo - goals - Scheduled Reminder Popups - preview font - button to remove all card images and undo - auto dark mode based on background ## Community suggestions (maybe will be done at some point) - when opening assignments it will show you "if you get a 0 on this your grade will be _" - module sorting (newest, oldest) (maybe grid view) - grade leaderboard per class (opt in) - sticky notes ## Dev Installation To install, run, and build with this repository locally, - Clone the repository locally - Visit `chrome://extensions` in your browser. (replace chrome with your version of chromium) - Enable developer mode by toggling the switch in the upper right corner of the viewport. - Click the "Load upacked" button in the header. - When prompted to open a file, select the root directory of this repository. ### How to use - Once the extension is installed, navigate to your institution's Canvas homepage. - To edit the available options, click on the "Extensions" button in the upper right corner of the viewport. - When the menu opens, click on the Canvas Refined extension. - A menu will appear with configuration options for your Canvas homepage. ## Contributing ### Add a new feature To contribute to this, first either make an issue with feature suggestion or post in the discord. If nobody is working on the feature, you can clone the dev branch and make your changes while following these guidelines. #### Identifier - Should be a unqiue one/two word storage identifier to indicate its status. (ie "dark_mode" or "dashboard_grades") - If it has sub options (options that are specific to the main feature) these will also each need a unique identifier. - All options are synced and have a 8kb storage limit, so if your feature needs more than this please contact me. #### Changes to html/popup.html - Add the appropriate HTML into this file. The corresponding id and name (see below) should be the identifier. - If it has no sub options, it should be put in the same container as the other options with no sub options: ```
``` - If it does have sub options it becomes it's own container: ```
``` #### Changes to js/popup.js - Add the main identifier into the `syncedSwitches` array. - If you have sub-options: - Add these identifiers to the array found under the comment that says `//checkboxes`. #### Changes to js/background.js - Add all identifiers into the `syncedOptions` array. - Add a default value for your option to the `default_options` array. - Preferably this value should be `false` for booleans or ` ""` for strings (`null` can also be used if Canvas has a default for this option already) #### Changes to js/content.js - There should be a function(s) included in the this file that does the work. The name should clearly indicate it's purpose. - Under `applyOptionsChanges()`, add a switch case to call this function when the menu toggle is changed. - Depending on what your feature does, it needs to be told when to fire. - If the function changes any aspect of the dashboard, it should be put inside `checkDashboardReady()`. - If the function only adds css, it should be added to `applyAestheticChanges()`, and in this case should not be a separate function, instead add the css to the existing styles found in this function. - Anything else should be put under `startExtension()` and should be placed no higher than the `checkDashboardReady` function found here. ## Star History (I think github broke it) Star History Chart ## Authors #### Fork Owner - [Guy](https://github.com/guysandler) #### Original Owner - [ksucpea](https://github.com/ksucpea) #### Original Contributors - [fudgeu](https://github.com/fudgeu) - [Tibo Geeraerts](https://github.com/tibogeeraerts) - [Jacob Mungle](https://github.com/Jelgnum) - [FireIsGood](https://github.com/FireIsGood) ## License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) You can fork, modify, and use this code however you like with attributes. ![Canvas Refined](/icon/icon-48.png) Copyright (c) 2024 ksucpea Copyright (c) 2026 Guy Sandler