Better Canvas

Enhancements to Canvas like dark mode, better todo list, GPA calculator, and more!

Supported on

Inquiries

To contact me, please email ksucpea@gmail.com, or you can open an issue within the "Issues" tab on GitHub.

Table of Contents

• Features
• Installation
• Usage
• Version Notes
• Color Reference
• Contributing
• Authors

Features

Better Canvas 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
• Assignments due list
• Dashboard notes
• Better todo list
• Custom fonts
• Condensed cards
• Dashboard grades
• Remove sidebar logo
• Customizable card links
• Gradient dashboard cards
• Advanced card customization
• GPA calculator (college and highschool)
• Preview assignments and announcements from the dashboard

Installation

To install, run, and build with this repository,

• Clone the repository locally with

  git clone https://github.com/ksucpea/bettercanvas.git

• Visit chrome://extensions in your browser.
• 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.

Usage

To use Better Canvas, select your browser below to install the extension.

Chrome

Firefox

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 Better Canvas extension.
  • A menu will appear with configuration options for your Canvas homepage.

Version Notes

Update 5.10

• Fixed dark mode bug in discussion text boxes
• Added new themes + fonts
• Card colors now change instantly
• Dark mode fixer feature
• Card customization now shows preview of image
• New sidebar options
• Dark mode buttons preview their appearance
• "Remove sidebar logo" feature
• "Hide recent feedback" feature
• Menu redesign
• Fixed card assignment bug
• Card assignment efficiency improvements
• Dark mode rework
• Dark mode now syncs
• Option to use device dark mode settings
• Improved todo list
• "Color coded tab icons" feature
• "Use card colors" option for todo list

Color Reference

Color	Hex
Background	#161616
Text	#ffffff
Accent 01	#ff002e
Accent 02	#ff5200
Accent 03	#ff47ad

Contributing

Add a new feature

To add a new feature, please follow these guidelines.

Note: I will probably make this automated in the future but it's a bit of work right now.

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:

<div class="option" id="<identifier>">
    <input type="radio" id="off" name="<identifier>">
    <input type="radio" id="on" name="<identifier>">
    <div class="slider">
        <div class="sliderknob"></div>
        <div class="sliderbg"></div>
    </div>
    <span class="option-name"><option name></span>
</div>

• If it does have sub options it becomes it's own container:

<div class="option-container">
  <div class="option" id="<identifier>">
    <input type="radio" id="off" name="<identifier>">
    <input type="radio" id="on" name="<identifier>">
    <div class="slider">
      <div class="sliderknob"></div>
      <div class="sliderbg"></div>
    </div>
    <span class="option-name"><option name></span>
  </div>
  <div class="sub-options">
    <div class="sub-option">
      <input type="checkbox" id="<sub identifier>" name="<sub identifier>">
      <label for="<sub identifier>" class="sub-text"><option name></label>
    </div>
  </div>
</div>

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.

Add a new theme

To add a new theme, please follow these guidelines.

You can export a theme using the export tool in the menu and sending an email to me, or you can merge it here after doing the following:

Exporting

• Go to the Themes tab and export dark mode, card images, card colors, and custom font. - The only on/off toggles that need be included are disable_color_overlay and gradient_cards. Any other toggles aren't necessary, so you should manually add these keys and the appropriate values in with the export code.
• Pick a unique id for the theme, doesn't matter how long this is.

Changes to js/popup.js

• Add the export code under getTheme().
  • Make sure it follows this format: "theme-<id>: { "exports": {"..."}, "preview": "..." }
• For the preivew, try to pick the smallest image size from the card images (under ~50kb is perfect), or you can find a smaller display image that isn't included in the card images.

Changes to html/popup.html

• Add the following under all the other theme buttons:

<button id="theme-<id>" class="theme-button customization-button"><theme name> by <you></button>

• The theme name should be one/two words so it doesn't take up too much space.

File structure

.
├── README.md
├── \_locales
│ ├── en
│ │ └── messages.json
│ └── es
│ └── messages.json
├── css
│ ├── content.css
│ ├── options.css
│ └── popup.css
├── html
│ ├── options.html
│ └── popup.html
├── icon
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-19.png
│ ├── icon-32.png
│ ├── icon-38.png
│ ├── icon-48.png
│ ├── icon-wide.png
│ ├── iconwpadding.png
│ └── oldicon-128.png
├── js
│ ├── background.js
│ ├── content.js
│ └── popup.js
└── manifest.json

Update the file structure

Use the tree command

• Linux/Unix
  • Install tree command line tool
  • Use the tree command to generate file structure:

    tree

Learn more about tree commands for Linux/Unix here.

• Windows
  • Use the tree command to generate file structure:

    tree /

Learn more about tree commands for Windows here.

Authors

Owner

• ksucpea

Contributors

• fudgeu
• Tibo Geeraerts
• Jacob Mungle
• FireIsGood

License