fix(global search): CSS preload killed plugin load

src/interface/contentShadow.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+button {
+  @apply cursor-pointer;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+input {
+  &:focus {
+    box-shadow: unset !important;
+  }
+}
+
+.no-scrollbar {
+  scrollbar-width: none !important;
+}

src/interface/index.ts

@@ -2,6 +2,7 @@ import "./index.css";
 import Settings from "./pages/settings.svelte";
 import IconFamily from "@/resources/fonts/IconFamily.woff";
 import browser from "webextension-polyfill";
+import { resolveExtensionAssetUrl } from "@/lib/extensionAssetUrl";
 import renderSvelte from "./main";
 import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
 import { initVerboseLogging, verboseInfo } from "@/utils/verboseLog";
@@ -14,7 +15,7 @@ function InjectCustomIcons() {
   style.innerHTML = `
     @font-face {
       font-family: 'IconFamily';
-      src: url('${browser.runtime.getURL(IconFamily)}') format('woff');
+      src: url('${resolveExtensionAssetUrl(IconFamily)}') format('woff');
       font-weight: normal;
       font-style: normal;
     }`;

src/interface/main.d.ts

@@ -1,5 +1,3 @@
-import "./index.css";
-
 declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";

src/interface/renderInShadow.ts

@@ -0,0 +1,26 @@
+import { mount } from "svelte";
+import type { SvelteComponent } from "svelte";
+import style from "./contentShadow.css?inline";
+
+/** Mount Svelte UI inside a shadow root from content scripts (decoupled from settings popup CSS). */
+export default function renderInShadow(
+  Component: SvelteComponent | any,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {},
+) {
+  const app = mount(Component, {
+    target: mountPoint,
+    props: {
+      standalone: false,
+      ...props,
+    },
+  });
+
+  if (mountPoint instanceof ShadowRoot) {
+    const styleElement = document.createElement("style");
+    styleElement.textContent = style;
+    mountPoint.appendChild(styleElement);
+  }
+
+  return app;
+}