+
-Contact me at ksucpea@gmail.com or you can open an issue here
+# Better Canvas
-
Manual Installation
+Enhancements to Canvas like dark mode, better todo list, GPA calculator, and more!
-- Download this repo
+### Supported on
-- Go to chrome://extensions in the browser and enable developer mode
+
-- Press load unpacked and select the extension folder
+
-
Update 5.10
+## Inquiries
+
+To contact me, please email ksucpea@gmail.com, or you can open an issue within the "Issues" tab on GitHub.
+
+## 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
+
+```bash
+ 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](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
+
+[Firefox](https://addons.mozilla.org/addon/better-canvas/)
+
+## Version Notes
+
+#### Update 5.10
- Card customization now shows preview of image
- New sidebar options
@@ -24,24 +74,31 @@ Contact me at ksucpea@gmail.com or you can open an issue here
- Dark mode now syncs
- Option to use device dark mode settings
-
-(I will probably make this automated in the future but it's a bit of work right now)
+To add a new feature, please follow these guidelines.
-
Identifier
+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 it's 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
+#### 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:
@@ -80,48 +137,53 @@ Contact me at ksucpea@gmail.com or you can open an issue here
```
-
Changes to js/popup.js
+#### Changes to js/popup.js
-- Add the main identifier into the ```syncedSwitches``` array.
+- 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```.
+ - Add these identifiers to the array found under the comment that says `//checkboxes`.
-
Changes to js/background.js
+#### 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)
+- 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
+#### 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.
+- 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.
-
Adding a theme:
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
+#### 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.
+- 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
+#### Changes to js/popup.js
-- Add the export code under ```getTheme()```.
- - Make sure it follows this format: ```"theme-: { "exports": {"..."}, "preview": "..." }```
+- Add the export code under `getTheme()`.
+ - Make sure it follows this format: `"theme-: { "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
+#### Changes to html/popup.html
- Add the following under all the other theme buttons:
+
```
```
- The theme name should be one/two words so it doesn't take up too much space.
+
+
diff --git a/icon/icon-wide.png b/icon/icon-wide.png
new file mode 100644
index 0000000..1ad5e39
Binary files /dev/null and b/icon/icon-wide.png differ