background changer 3

done, theme compatible + weird loading fix

README.md

@@ -57,32 +57,22 @@ Better Canvas introduces improvements to the Canvas user interface:
 ## Newly added features
 - GPA presets
 - Scheduled Reminder Popups (broken) 
-- searching themes (the original didn't actually impliment that)
+- Searching themes (the original didn't actually impliment that)
 - Card Styles (image size, card roundness, card spacing, width, height, theme compatible)
+- Custom Background (by URL, theme compatible)
 
-## Planned Features
-- custom backgrounds (uploaded files, theme compatible, cached?)
-- custom side logo
+## Planned Features (by priority)
+- popup UI revamp
 - widgets (music, timer)
-- fix darkmode fixer
-- calender sync
-- update better todo list
+- update better todo list (with hover assignment preview)
 - better sidebar
-- flashcards
-- better calender
 - better notes
-- goals
-- auto rotate theme
-- theme history
-- mail assistent
-- transcribe lecture
-- hover assignment preview
+- auto rotate theme + theme history + fix theme submissions
+- mail assistent + ui revamp
+- better calender (+ calender sync)
 - better what if grade
-- when opening assignments it will show you "if you get a 0 on this your grade will be _"
-- grade leaderboard per class (opt in)
 - global search
-- module sorting
-- quick modules button
+- fix darkmode fixer
 
 ## Extra features that might be added:
 - card grade position, card outline
@@ -91,6 +81,17 @@ Better Canvas introduces improvements to the Canvas user interface:
 - streaks
 - caching pages for faster loading
 - liquid glass theme?
+- animated backgrounds, rotating background, time/weather reactive backgrounds, maybe chache if it becomes an issue
+- custom side logo
+- transcribe lecture (if there is demand for it)
+- flashcards
+- goals
+
+## 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 _"
+- quick modules button on cards
+- module sorting (newest, oldest) (maybe grid view)
+- grade leaderboard per class (opt in)
 
 ## Dev Installation
 

html/popup.html

@@ -478,7 +478,11 @@
                     </div>
 					<div class="sub-option">
                         <input type="checkbox" id="export-customStyles" />
-                        <span>Custom Card styles</span>
+                        <span>Custom card styles</span>
+                    </div>
+					<div class="sub-option">
+                        <input type="checkbox" id="export-background" />
+                        <span>Background image</span>
                     </div>
                 </div>
                 <div style="flex: 1">

js/content.js

@@ -391,7 +391,7 @@ function applyCustomBackground() {
     
     if (options.customBackgroundLink && options.customBackgroundLink !== "") {
         style.textContent = `
-        #not_right_side { 
+        #wrapper {
             background-image: url('${options.customBackgroundLink}') !important;
             background-size: cover !important;
             background-attachment: fixed !important; 
@@ -408,6 +408,10 @@ function applyCustomBackground() {
     
     document.documentElement.appendChild(style);
 }
+function clearCustomBackground() {
+	let style = document.querySelector("#bettercanvas-background");
+	if (style) style.remove();
+}
 
 let insertTimer;
 function resetTimer() {
@@ -465,6 +469,7 @@ function recieveMessage(request, sender, sendResponse) {
         case ("getcolors"): sendResponse(getCardColors()); break;
         case ("inspect"): sendResponse(inspectDarkMode(true)); break;
         case ("fixdm"): sendResponse(runDarkModeFixer(true)); break;
+		case ("updateBackground"): clearCustomBackground(); sendResponse(true); break;
         default: sendResponse(true);
     }
 }

js/popup.js

@@ -24,6 +24,7 @@ const syncedSubOptions = [
 	"cardSpacing",
 	"cardWidth",
 	"cardHeight",
+	"customBackgroundLink",
 ];
 const localSwitches = [];
 
@@ -487,6 +488,9 @@ function setup() {
 							case "export-customStyles":
 								final = { ...final, ...(await getExport(storage, ["custom_styles"])) };
 								break;
+							case "export-background":
+								final = { ...final, ...(await getExport(storage, ["customBackgroundLink"])) };
+								break;
                         }
                     }
                 }
@@ -740,10 +744,9 @@ function setup() {
 	});
 
     document.getElementById("clearCustomBackground").addEventListener("click", () => {
-         chrome.storage.sync.set({ 
-            "customBackgroundLink": "",
-        });
+        chrome.storage.sync.set({ "customBackgroundLink": "" });
         document.querySelector("#customBackgroundLink").value = "";
+		sendFromPopup("updateBackground");
     });
 }
 
@@ -1061,7 +1064,13 @@ function saveCurrentTheme() {
                 "dark_preset": current["dark_preset"],
                 "custom_cards": current["custom_cards"],
                 "card_colors": current["card_colors"] === null ? [current["dark_preset"]["links"]] : current["card_colors"],
-                "custom_font": current["custom_font"]
+                "custom_font": current["custom_font"],
+				"imageSize": current["imageSize"],
+				"cardRoundness": current["cardRoundness"],
+				"cardSpacing": current["cardSpacing"],
+				"cardWidth": current["cardWidth"],
+				"cardHeight": current["cardHeight"],
+				"customBackgroundLink": current["customBackgroundLink"],
             }
             const now = new Date();
             local["saved_themes"][now.getTime()] = trimmed;