refactor: declare reduce_width.css as manifest content_script

public/reduce_width.css

@@ -1,4 +1,4 @@
-#content {
+body.ultrabox-reduce-content-width #content {
     max-width: 1500px;
     margin: 0 auto;
 }

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")
+            },
         })
     },
 }

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"],
+            })
+        },
+    },
 })