Iframe-teemat

Chastify lähettää teeman tiedot iframe-laajennuksiin, jotta käyttöliittymäsi voi vastata lukitussivua, johon se on upotettu.

Älä oleta käyttäjän käyttävän tummaa teemaa. Laajennuksesi voidaan avata vaalealla, tummalla, mukautetulla, läpikuultavalla ja suurikontrastisella teemalla.

tip

Turvallisin oletusarvo on käsitellä iframe ui -hyötykuormaa sivun taustan, tekstin värin ja reunuksen värin totuudenmukaisena lähteenä ja johtaa sitten omat luettavat paneelit ja merkit ui.isDark:sta.

Teeman hyötykuorma

Kun Chastify avaa iframesi, se liittää URI-koodatun JSON-hyötykuorman location.hash-elementtiin.

Hyötykuorma sisältää ui:n:

{
  "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"
  }
}

Kenttien merkitykset:

• ui.isDark: käyttääkö isäntäsivu tällä hetkellä tumman näköistä teemaa.
• ui.bg: sivun/pinnan tausta isännältä. Tämä voi olla väri tai monimutkainen CSS-tausta.
• ui.text: ensisijainen luettavan tekstin väri.
• ui.border: isäntäteemaa vastaava reunuksen väri.

caution

ui.bg voi olla kokonainen CSS-taustamerkkijono, ei pelkkä heksadesimaaliväri. Käytä sitä CSS background -arvona, äläkä manuaalisesti jäsentämäsi arvona.

Jäsennä hash-arvo

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;
  }
}

Minimaaliset CSS-muuttujat

Muunna hyötykuorma CSS-muuttujiksi käynnistyksen yhteydessä:

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";

Käytä näitä muuttujia sovelluskuoressasi:

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

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

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

React-esimerkki

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>
  );
}

Myötätuulen kuvio

Jos käytät Tailwind-koodia, haaraudu kohdasta ui.isDark jokaiselle tekstiä sisältävälle pinnalle.

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";

Käytä valittuja luokkia, joissa teksti renderöidään:

<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>

Live-teemapäivitykset

Ylätaso saattaa lähettää reaaliaikaisia ​​teemapäivityksiä iframen ollessa auki:

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

Kuuntele viestiä ja varmista, että se on nonssi:

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);
});

Yleisiä virheitä

• text-white:n tai vaalean text-*-100:n kovakoodaus korttien sisällä ilman vaaleaa teemavaihtoehtoa.
• Sivun taustan tyylittely, mutta sisäkkäisten korttien, merkkien, edistymisrenkaiden ja tulossyötteiden unohtaminen.
• Käsitellään ui.bg:ta yksinkertaisena heksadesimaalivärinä. Se voi olla liukuväri tai selaimen normalisoima CSS-taustamerkkijono.
• Käytetään natiiveja lomakekomponentteja ilman taustan ja tekstin värin asettamista. Valitut vaihtoehdot voivat muuttua lukukelvottomiksi tummissa teemoissa.
• Olettaen, että teeman muutokset vaativat iframe-uudelleenlatauksen. Kuuntele chastify:ext:ui-koodia, jos haluat reaaliaikaisia ​​päivityksiä.

warning

Teeman tiedot ovat vain esitystietoja. Älä käytä niitä valtuutukseen, luottamuspäätöksiin, logiikan avaamiseen, palkkioihin, rangaistuksiin tai taustajärjestelmän istunnon identiteetin määrittämiseen.

Tarkistuslista

Ennen iframe-laajennuksen julkaisemista:

• Testaa vaaleaa teemaa.
• Testaa tummaa teemaa.
• Testaa mukautettua teemaa, jos sellainen on saatavilla.
• Varmista, että kaikilla korteilla, painikkeilla, merkeillä, lomakesäätimillä, edistymisrenkailla ja tulosviesteillä on luettava kontrasti.
• Varmista, että teksti mahtuu edelleen mobiiliin.
• Varmista, että iframe-kehyksen koko muuttuu automaattisesti teeman tai sisällön muutosten jälkeen.

Seuraavaksi: Iframe-pikaopas tai API-esimerkkejä.