From afd72655b3074061ea194b35e9aa5164cf4e1480 Mon Sep 17 00:00:00 2001
From: skid-dev <62094231+skid-dev@users.noreply.github.com>
Date: Sun, 17 May 2026 15:07:44 +1000
Subject: [PATCH] refactor: declare reduce_width.css as manifest content_script

Move reduce_width.css from chrome.scripting.insertCSS to a manifest-level
content_scripts entry via WXT's build:manifestGenerated hook. The browser
now loads the stylesheet automatically on every page; runtime injection
is replaced with a tiny script that adds a body class to enable the rules,
preserving the existing setting/condition gating.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/reduce_width.css                       |  2 +-
 src/background/events/injects/reduce_width.ts | 10 ++++++++--
 wxt.config.ts                                 | 14 ++++++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/public/reduce_width.css b/public/reduce_width.css
index a921dcb..a804901 100644
--- a/public/reduce_width.css
+++ b/public/reduce_width.css
@@ -1,4 +1,4 @@
-#content {
+body.ultrabox-reduce-content-width #content {
     max-width: 1500px;
     margin: 0 auto;
 }
\ No newline at end of file
diff --git a/src/background/events/injects/reduce_width.ts b/src/background/events/injects/reduce_width.ts
index b8ee646..fd7df13 100644
--- a/src/background/events/injects/reduce_width.ts
+++ b/src/background/events/injects/reduce_width.ts
@@ -1,5 +1,9 @@
 import { Module } from "../../../types/module"
 
+// reduce_width.css is declared as a manifest-level content_script (see
+// wxt.config.ts) and is always present on matching pages. Its rules are
+// scoped to body.ultrabox-reduce-content-width, so this module enables
+// the styling by setting that class on schoolbox pages.
 export default <Module>{
     setting: s => {
         return s.reduce_content_width
@@ -8,9 +12,11 @@ export default <Module>{
         return helper_fns.is_schoolbox_page
     },
     action: async base => {
-        await chrome.scripting.insertCSS({
+        await chrome.scripting.executeScript({
             target: { tabId: base.tab_id },
-            files: ["reduce_width.css"],
+            func: () => {
+                document.body.classList.add("ultrabox-reduce-content-width")
+            },
         })
     },
 }
diff --git a/wxt.config.ts b/wxt.config.ts
index 31a6a47..75e98f3 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -29,4 +29,18 @@ export default defineConfig({
             },
         ],
     },
+    hooks: {
+        // Declare pure-CSS injections as manifest-level content scripts so
+        // the browser loads them automatically instead of going through
+        // chrome.scripting.insertCSS at runtime. The rules themselves are
+        // gated by a body class (toggled by the corresponding inject module)
+        // so the setting still controls whether the styles apply.
+        "build:manifestGenerated": (_wxt, manifest) => {
+            manifest.content_scripts ??= []
+            manifest.content_scripts.push({
+                matches: ["<all_urls>"],
+                css: ["reduce_width.css"],
+            })
+        },
+    },
 })