background changer 1

it works too well and too many things are transparent
2026-06-21 01:49:54 +02:00 · 2026-02-09 14:10:24 -08:00 · 2026-02-09 14:10:24 -08:00 · 03c61eb51d
commit 03c61eb51d
parent 2154ee80d3
7 changed files with 96 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 # Betterer Canvas

-name idea: even better canvas
+name idea: even better canvas or Actually Better Canvas (ABC)

 I don't like the direction bettercanvas (bettercampus) is heading so I forked it

@ -12,9 +12,9 @@ Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA ca

 ### Supported on

-![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
+<!-- ![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white) -->

-![Firefox](https://img.shields.io/badge/Firefox-FF7139?style=for-the-badge&logo=Firefox-Browser&logoColor=white)
+<!-- ![Firefox](https://img.shields.io/badge/Firefox-FF7139?style=for-the-badge&logo=Firefox-Browser&logoColor=white) -->

 ## Inquiries

@ -58,7 +58,7 @@ Better Canvas introduces improvements to the Canvas user interface:
 - GPA presets
 - Scheduled Reminder Popups (broken) 
 - searching themes (the original didn't actually impliment that)
- Card Styles (image size, card roundness, card spacing, width, height)
+- Card Styles (image size, card roundness, card spacing, width, height, theme compatible)

 ## Planned Features
 - custom backgrounds
@ -79,11 +79,17 @@ Better Canvas introduces improvements to the Canvas user interface:
 - hover assignment preview
 - 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

 ## Extra features that might be added:
 - card grade position, card outline
 - theme copy button
 - revamp cards page UI
+- streaks
+- caching pages for faster loading

 ## Dev Installation

--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -42,7 +42,7 @@
    "message": "Cards"
  },
  "custom_font": {
-    "message": "Fonts"
+    "message": "Styles"
  },
  "useddmm": {
    "message": "Use dd/mm"
--- a/css/popup.css
+++ b/css/popup.css
@ -188,6 +188,14 @@ input[type="checkbox"]:checked {background: #8dd28d;}
 .submitted-theme-tag {border-radius: 4px;padding: 3px 4px;max-width:min-content;font-weight: 600;}
 #custom-styles {min-height: 100px;}

+.card-file-input {background: #2a2a2a;border: 1px solid #4a4a4a;border-radius: 4px;color: #fff;padding: 8px 12px;font-size: 14px;font-family: inherit;margin-top: 8px;transition: border-color 0.2s ease;}
+.card-file-input:hover {border-color: #6a6a6a;}
+.card-file-input:focus {outline: none;border-color: #007acc;box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);}
+.card-file-input::file-selector-button {background: #404040;border: 1px solid #5a5a5a;border-radius: 3px;color: #fff;padding: 6px 12px;margin-right: 12px;font-size: 13px;cursor: pointer;transition: background-color 0.2s ease;}
+.card-file-input::file-selector-button:hover {background: #4a4a4a;}
+.card-file-input::-webkit-file-upload-button {background: #404040;border: 1px solid #5a5a5a;border-radius: 3px;color: #fff;padding: 6px 12px;margin-right: 12px;font-size: 13px;cursor: pointer;transition: background-color 0.2s ease;}
+.card-file-input::-webkit-file-upload-button:hover {background: #4a4a4a;}
+
 ::-webkit-scrollbar {width: 8px;}
 ::-webkit-scrollbar-track {background: #161616;}
 ::-webkit-scrollbar-thumb {background: #323232;border-radius:2px;}
--- a/html/popup.html
+++ b/html/popup.html
@ -43,8 +43,8 @@
                    <span data-i18n="themes">Themes</span>
                </button>
                <button id="custom-font-btn" class="big-button tab-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 7v-2h13v2"></path><path d="M10 5v14"></path><path d="M12 19h-4"></path><path d="M15 13v-1h6v1"></path><path d="M18 12v7"></path><path d="M17 19h2"></path></svg>
-                    <span data-i18n="custom_font">Custom Font</span>
+                    <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.5 8.5H15.51M10.5 7.5H10.51M7.5 11.5H7.51M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.6569 19.6569 15 18 15H17.4C17.0284 15 16.8426 15 16.6871 15.0246C15.8313 15.1602 15.1602 15.8313 15.0246 16.6871C15 16.8426 15 17.0284 15 17.4V18C15 19.6569 13.6569 21 12 21ZM16 8.5C16 8.77614 15.7761 9 15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5ZM11 7.5C11 7.77614 10.7761 8 10.5 8C10.2239 8 10 7.77614 10 7.5C10 7.22386 10.2239 7 10.5 7C10.7761 7 11 7.22386 11 7.5ZM8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5Z" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+                    <span data-i18n="custom_font">Styles</span>
                </button>
                <button id="gpa-bounds-btn" class="big-button tab-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"></path><path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"></path></svg>
@ -750,9 +750,10 @@
    </div>

    <div class="custom-font-container tab" style="display:none">
+        <!-- TODO: make this a dropdown -->
        <div class="tab-header">
            <div>
-                <h2 style="margin-top: 0" data-i18n="custom_font">Custom Font</h2>
+                <h2 style="margin-top: 0" data-i18n="custom_font">Styles</h2>
            </div>
            <button class="big-button back-btn" data-i18n="back">Back</button>
        </div>
@ -769,6 +770,14 @@
            <p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family="
            </p>
        </div>
+        <div class="custom-font option-container">
+            <h3 class="header-small">Custom Background</h3>
+            <p>Use an image url or upload an image file</p>
+            <input style="width:85%;" class="card-input" id="customBackgroundLink" placeholder="https://...">
+            <input style="width:80%;" class="card-file-input" type="file" id="customBackgroundUpload" accept="image/*">
+            <button id="clearCustomBackground" class="big-button" style="margin-top: 8px;">Clear Background</button>
+        </div>
+
    </div>

    <div class="card-colors-container tab" style="display:none">
--- a/js/background.js
+++ b/js/background.js
@ -99,6 +99,8 @@ chrome.runtime.onInstalled.addListener(function () {
            "cardWidth": 262,
            "cardHeight": 250,
            "customCardStyles": false,
+            "customBackgroundLink": "",
+            "customBackgroundUpload": "",
        }
    };

--- a/js/content.js
+++ b/js/content.js
@ -260,6 +260,7 @@ function startExtension() {
        applyAestheticChanges();
        changeFavicon();
        updateReminders();
+        applyCustomBackground();
        //getClassAverages();
        setTimeout(() => runDarkModeFixer(false), 800);
        setTimeout(() => runDarkModeFixer(false), 4500);
@ -373,10 +374,31 @@ function applyOptionsChanges(changes) {
            case ("customCardStyles"):
                applyAestheticChanges();
                break;
+            case ("customBackgroundLink"):
+            case ("customBackgroundUpload"):
+                applyCustomBackground();
+                break;
        }
    });
 }

+function applyCustomBackground() {
+    // let style = document.querySelector("#DashboardCard_Container")
+    let style = document.querySelector("#bettercanvas-background") || document.createElement('style');
+    style.id = "bettercanvas-background";
+    
+    if (options.customBackgroundUpload && options.customBackgroundUpload !== "") {
+        style.textContent = `#not_right_side { background-image: url('${options.customBackgroundUpload}') !important; background-size: cover !important; background-attachment: fixed !important; }`;
+    } else if (options.customBackgroundLink && options.customBackgroundLink !== "") {
+        style.textContent = `#not_right_side { background-image: url('${options.customBackgroundLink}') !important; background-size: cover !important; background-attachment: fixed !important; }
+        .ic-Dashboard-header__layout { background: none !important; }`; // try to make this hide things underneath and add to other side
+    } else {
+        style.textContent = "";
+    }
+    
+    document.documentElement.appendChild(style);
+}
+
 let insertTimer;
 function resetTimer() {
    clearTimeout(insertTimer);
--- a/js/popup.js
+++ b/js/popup.js
@ -117,6 +117,8 @@ const defaultOptions = {
        "cardWidth": 262,
        "cardHeight": 250,
        "customCardStyles": false,
+        "customBackgroundLink": "",
+        "customBackgroundUpload": "",
    }
 };

@ -264,6 +266,34 @@ function setupCardHeightInput(initial) {
 	});
 }

+function setupCustomBackgroundLink(initial) {
+    let el = document.querySelector("#customBackgroundLink");
+    el.value = initial || "";
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "customBackgroundLink": e.target.value });
+    })
+}
+
+function setupCustomBackgroundUpload(initial) {
+    let el = document.querySelector("#customBackgroundUpload");
+    el.addEventListener("change", handleBackgroundUpload);
+}
+function handleBackgroundUpload(e) {
+    const file = e.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const base64 = event.target.result;
+            chrome.storage.sync.set({
+                "customBackgroundUpload": base64,
+                "customBackgroundLink": ""
+            });
+            document.querySelector("#customBackgroundLink").value = "Using uploaded file";
+        }
+        reader.readAsDataURL(file);
+    }
+}
+
 function setup() {

    const menu = {
@ -293,6 +323,8 @@ function setup() {
            { "identifier": "cardSpacing", "setup": (initial) => setupCardSpacingInput(initial) },
            { "identifier": "cardWidth", "setup": (initial) => setupCardWidthInput(initial) },
            { "identifier": "cardHeight", "setup": (initial) => setupCardHeightInput(initial) },
+            { "identifier": "customBackgroundLink", "setup": (initial) => setupCustomBackgroundLink(initial)},
+            { "identifier": "customBackgroundUpload", "setup": (initial) => setupCustomBackgroundUpload(initial)},
        ],
    }

@ -728,6 +760,15 @@ function setup() {
 		chrome.storage.sync.set({ "cardHeight": value });
 		document.querySelector("#cardHeightValue").textContent = value + "%";
 	});
+
+    document.getElementById("clearCustomBackground").addEventListener("click", () => {
+         chrome.storage.sync.set({ 
+            "customBackgroundLink": "",
+            "customBackgroundUpload": ""
+        });
+        document.querySelector("#customBackgroundLink").value = "";
+        document.querySelector("#customBackgroundUpload").value = "";
+    });
 }

 function applyGPAPreset(bounds) {