मुख्य कंटेंट तक स्किप करें

आईफ्रेम थीमिंग

Chastify थीम संबंधी जानकारी को iframe एक्सटेंशन में भेजता है ताकि आपका UI उस लॉक पेज से मेल खा सके जहां इसे एम्बेड किया गया है।

यह न मानें कि उपयोगकर्ता डार्क थीम का उपयोग कर रहा है। आपका एक्सटेंशन लाइट, डार्क, कस्टम, ट्रांसलूसेंट और हाई-कॉन्ट्रास्ट थीम में भी खुल सकता है।

tip

सबसे सुरक्षित डिफ़ॉल्ट तरीका यह है कि iframe ui पेलोड को पेज बैकग्राउंड, टेक्स्ट कलर और बॉर्डर कलर के लिए सत्य का स्रोत माना जाए, और फिर ui.isDark से अपने स्वयं के पठनीय पैनल और बैज प्राप्त किए जाएं।

थीम पेलोड​

जब Chastify आपका iframe खोलता है, तो यह location.hash में एक URI-एन्कोडेड JSON पेलोड जोड़ता है।

पेलोड में ui शामिल है:

{
  "bridge": {
    "v": 1,
    "nonce": "request-nonce",
    "parentOrigin": "https://chastify.net"
  },
  "sessionId": "extension-session-id",
  "lockId": "lock-id",
  "ui": {
    "isDark": true,
    "bg": "rgb(10, 10, 10)",
    "text": "#e5e7eb",
    "border": "#27272a"
  }
}

क्षेत्र के अर्थ:

  • ui.isDark: क्या होस्ट पेज वर्तमान में डार्क थीम का उपयोग कर रहा है।
  • ui.bg: होस्ट से पेज/सरफेस बैकग्राउंड। यह एक रंग या एक जटिल CSS बैकग्राउंड हो सकता है।
  • ui.text: प्राथमिक पठनीय पाठ रंग।
  • ui.border: बॉर्डर का रंग जो होस्ट थीम से मेल खाता है।
caution

ui.bg एक पूर्ण CSS बैकग्राउंड स्ट्रिंग हो सकता है, न कि केवल एक हेक्स रंग। इसे CSS background मान के रूप में उपयोग करें, न कि मैन्युअल रूप से पार्स किए जाने वाले मान के रूप में।

हैश को पार्स करें​

type ChastifyThemePayload = {
  ui?: {
    isDark?: boolean;
    bg?: string;
    text?: string;
    border?: string;
  };
};

export function parseHashPayload(): ChastifyThemePayload | null {
  const raw = window.location.hash.startsWith("#")
    ? window.location.hash.slice(1)
    : window.location.hash;

  if (!raw) return null;

  try {
    return JSON.parse(decodeURIComponent(raw));
  } catch {
    return null;
  }
}

न्यूनतम सीएसएस चर​

स्टार्टअप के समय पेलोड को CSS वैरिएबल में परिवर्तित करें:

const payload = parseHashPayload();
const ui = payload?.ui ?? {};
const isDark = ui.isDark !== false;

document.documentElement.style.setProperty("--chastify-bg", ui.bg || (isDark ? "#040711" : "#f8fafc"));
document.documentElement.style.setProperty("--chastify-text", ui.text || (isDark ? "#e5e7eb" : "#0f172a"));
document.documentElement.style.setProperty("--chastify-border", ui.border || (isDark ? "#27272a" : "#e2e8f0"));
document.documentElement.dataset.themeMode = isDark ? "dark" : "light";

इन वेरिएबल्स का उपयोग अपने ऐप शेल में करें:

html,
body,
#root {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--chastify-bg);
  color: var(--chastify-text);
}

.panel {
  border: 1px solid var(--chastify-border);
}

रिएक्ट उदाहरण​

import { useMemo } from "react";

function getTheme(payload: any) {
  const ui = payload?.ui ?? {};
  const isDark = ui.isDark !== false;

  return {
    isDark,
    pageStyle: {
      background: ui.bg || (isDark ? "#040711" : "#f8fafc"),
      color: ui.text || (isDark ? "#e5e7eb" : "#0f172a"),
    } satisfies React.CSSProperties,
    panelClass: isDark
      ? "border-white/10 bg-black/35 text-slate-100"
      : "border-slate-200 bg-white/85 text-slate-950 shadow-sm",
    mutedClass: isDark ? "text-slate-400" : "text-slate-600",
    badgeClass: isDark
      ? "bg-sky-400/15 text-sky-200"
      : "bg-sky-50 text-sky-900 ring-1 ring-sky-200",
  };
}

export function ExtensionApp({ payload }: { payload: any }) {
  const theme = useMemo(() => getTheme(payload), [payload]);

  return (
    <main style={theme.pageStyle} className="min-h-screen p-4">
      <section className={`rounded-2xl border p-4 ${theme.panelClass}`}>
        <h1 className="text-xl font-bold">My Extension</h1>
        <p className={`mt-2 text-sm ${theme.mutedClass}`}>
          This text stays readable on light and dark Chastify themes.
        </p>
        <span className={`mt-3 inline-flex rounded-full px-3 py-1 text-xs font-semibold ${theme.badgeClass}`}>
          Connected
        </span>
      </section>
    </main>
  );
}

टेलविंड पैटर्न​

यदि आप Tailwind का उपयोग करते हैं, तो टेक्स्ट वाली प्रत्येक सतह के लिए ui.isDark से ब्रांच बनाएं।

const isDarkTheme = payload?.ui?.isDark !== false;

const panelClass = isDarkTheme
  ? "border-white/10 bg-black/30 text-slate-100"
  : "border-slate-200 bg-white/85 text-slate-950 shadow-sm";

const successClass = isDarkTheme
  ? "border-emerald-300/20 bg-emerald-400/10 text-emerald-100"
  : "border-emerald-500/25 bg-emerald-50 text-emerald-950";

const errorClass = isDarkTheme
  ? "border-rose-300/20 bg-rose-400/10 text-rose-100"
  : "border-rose-500/25 bg-rose-50 text-rose-950";

जहां टेक्स्ट रेंडर किया जाता है, वहां चयनित क्लास का उपयोग करें:

<div className={`rounded-xl border px-3 py-2 text-sm ${result.ok ? successClass : errorClass}`}>
  <div className="font-semibold">{result.title}</div>
  <div className="mt-1 opacity-85">{result.message}</div>
</div>

लाइव थीम अपडेट​

जब आपका आईफ्रेम खुला हो, तब पैरेंट लाइव थीम अपडेट भेज सकता है:

type UiUpdateMessage = {
  type: "chastify:ext:ui";
  v: 1;
  nonce: string;
  ui: {
    isDark?: boolean;
    bg?: string;
    text?: string;
    border?: string;
  };
};

उस संदेश को सुनें और नॉनस को सत्यापित करें:

const nonce = payload.bridge.nonce;
const parentOrigin = payload.bridge.parentOrigin;

window.addEventListener("message", (event) => {
  if (event.origin !== parentOrigin) return;

  const msg = event.data as Partial<UiUpdateMessage>;
  if (msg.type !== "chastify:ext:ui" || msg.v !== 1) return;
  if (msg.nonce !== nonce) return;

  applyTheme(msg.ui);
});

सामान्य गलतियां​

  • लाइट-थीम विकल्प के बिना कार्डों के अंदर text-white या हल्के रंग का text-*-100 हार्डकोड करना।
  • पेज की पृष्ठभूमि को स्टाइल करना तो ठीक है, लेकिन नेस्टेड कार्ड, बैज, प्रोग्रेस रिंग और रिजल्ट फीड को भूल जाना।
  • ui.bg को एक साधारण हेक्स रंग के रूप में माना जा रहा है। यह एक ग्रेडिएंट या ब्राउज़र-मानकीकृत CSS बैकग्राउंड स्ट्रिंग हो सकता है।
  • बैकग्राउंड और टेक्स्ट कलर दोनों को सेट किए बिना नेटिव फॉर्म कंट्रोल्स का उपयोग करने पर, डार्क थीम में सेलेक्ट ऑप्शन अपठनीय हो सकते हैं।
  • थीम में बदलाव के लिए iframe को रीलोड करना आवश्यक है। लाइव अपडेट के लिए chastify:ext:ui कोड सुनें।
warning

थीम डेटा केवल प्रस्तुति डेटा है। इसका उपयोग प्राधिकरण, विश्वास संबंधी निर्णय, अनलॉक लॉजिक, पुरस्कार, दंड या बैकएंड सेशन पहचान के लिए न करें।

जांच सूची​

अपने iframe एक्सटेंशन को प्रकाशित करने से पहले:

  • लाइट थीम का परीक्षण करें।
  • डार्क थीम का परीक्षण करें।
  • यदि उपलब्ध हो तो कस्टम थीम का परीक्षण करें।
  • सुनिश्चित करें कि सभी कार्ड, बटन, बैज, फॉर्म कंट्रोल, प्रोग्रेस रिंग और परिणाम संदेशों में पठनीय कंट्रास्ट हो।
  • जांचें कि टेक्स्ट अभी भी मोबाइल पर फिट हो रहा है या नहीं।
  • जांचें कि थीम या सामग्री में बदलाव के बाद iframe का आकार स्वतः बदल जाता है या नहीं।

अगला: आईफ़्रेम क्विकस्टार्ट या एपीआई उदाहरण।