CSS / JS API

커스텀 CSS와 JavaScript 플러그인을 관리합니다.

dmn.css

전역 커스텀 CSS 상태는 { path: string | null, content: string }입니다.

`dmn.css.get(): Promise<CustomCss>`

현재 커스텀 CSS(원본 파일 경로와 콘텐츠)를 반환합니다.


const { path, content } = await dmn.css.get();

`dmn.css.getUse(): Promise<boolean>`

커스텀 CSS 활성화 여부를 반환합니다.

`dmn.css.toggle(enabled: boolean): Promise<{ enabled: boolean }>`

커스텀 CSS를 켜거나 끕니다.

`dmn.css.load(): Promise<CssLoadResult>`

파일 선택 창을 열어 CSS 파일을 불러옵니다. 파일은 일반 .css 파일이고 UTF-8 인코딩이며 1MiB 이하여야 합니다. 성공적으로 불러온 파일은 히스토리(최대 10개)에 추가됩니다.


type CssLoadResult = {
  success: boolean;
  error?: string; // 실패 시 오류 코드 (아래 표 참조)
  content?: string;
  path?: string;
};

파일 선택을 취소하면 success는 false이고 error는 생략됩니다.

`dmn.css.setContent(content: string): Promise<CssSetContentResult>`

CSS 콘텐츠를 직접 교체합니다 (원본 경로는 유지). 콘텐츠는 1MiB로 제한됩니다.

`dmn.css.reset(): Promise<void>`

커스텀 CSS를 끄고 콘텐츠를 초기화합니다. 히스토리는 보존됩니다.

`dmn.css.onUse(callback): Unsubscribe`

활성화 상태 변경을 구독합니다. 콜백은 { enabled: boolean }을 받습니다.

`dmn.css.onContent(callback): Unsubscribe`

콘텐츠 변경(불러오기, 핫리로드, 직접 수정)을 구독합니다. 콜백은 CustomCss를 받습니다.


const unsub = dmn.css.onContent(({ path, content }) => {
  console.log("CSS 갱신:", path);
});

dmn.css 히스토리

앱은 이전에 불러온 CSS 파일을 최대 10개까지 기억합니다. 히스토리에 있는 경로만 재활성화할 수 있으며, 임의 경로는 PATH_NOT_AUTHORIZED로 거부됩니다.

`dmn.css.historyGet(): Promise<CustomCssHistoryItem[]>`


type CustomCssHistoryItem = {
  path: string;
  lastUsedAt: number; // unix millis
  status: "available" | "missing" | "invalid" | "tooLarge";
};

status는 참고용입니다. 조회 시점의 간단한 파일 검사 결과이며, 최종 검증은 활성화 시점에 수행됩니다.

`dmn.css.historyActivate(path: string): Promise<CssActivateResult>`

파일 선택 창 없이 히스토리 항목으로 전역 커스텀 CSS를 전환합니다.


type CssActivateResult = {
  success: boolean;
  code?: CssHistoryErrorCode; // 실패 시
  content?: string;
  path?: string;
};

`dmn.css.historyRemove(path: string): Promise<CustomCssHistoryItem[]>`

히스토리에서 항목을 제거하고 (파일 자체는 건드리지 않음) 갱신된 목록을 반환합니다.

오류 코드

코드	의미
`PATH_NOT_AUTHORIZED`	히스토리에 없는 경로
`NOT_FOUND`	파일이 존재하지 않음
`NOT_REGULAR_FILE`	일반 파일이 아님
`INVALID_EXTENSION`	`.css` 파일이 아님
`TOO_LARGE`	1MiB 초과
`INVALID_UTF8`	유효한 UTF-8이 아님
`IO_ERROR`	기타 I/O 실패

dmn.css.tab

탭별 CSS는 특정 키 탭에서 전역 CSS를 덮어씁니다. 탭 오버라이드는 { path: string | null, content: string, enabled: boolean }입니다. 탭 CSS는 전역 커스텀 CSS 토글이 켜져 있을 때만 렌더링됩니다.

`dmn.css.tab.getAll(): Promise<TabCssOverrides>`

모든 오버라이드를 Record<tabId, TabCss>로 반환합니다.

`dmn.css.tab.get(tabId: string): Promise<TabCssResponse>`

{ tabId, css: TabCss | null }을 반환합니다.

`dmn.css.tab.load(tabId: string): Promise<TabCssLoadResult>`

파일 선택 창을 열어 해당 탭용 CSS 파일을 불러옵니다. dmn.css.load()와 같은 제약이 적용되며, 실패 시 error에 오류 코드 문자열이 담깁니다.

`dmn.css.tab.activateHistory(tabId: string, path: string): Promise<TabCssActivateResult>`

전역 히스토리 항목을 탭에 적용합니다. 경로는 히스토리에 있어야 하며, 없으면 PATH_NOT_AUTHORIZED로 거부됩니다.


type TabCssActivateResult = {
  success: boolean;
  code?: CssHistoryErrorCode;
  tabId: string;
  css?: TabCss;
};

`dmn.css.tab.export(tabId: string): Promise<TabCssExportResult>`

저장 창을 열어 탭에 등록된 CSS 콘텐츠를 .css 파일로 저장합니다.


type TabCssExportResult = {
  success: boolean;
  code?: "NO_TAB_CSS" | "IO_ERROR";
  error?: string; // IO_ERROR 상세
  path?: string; // 성공 시 저장 위치
};

저장 창을 취소하면 success는 false이고 code는 생략됩니다.

`dmn.css.tab.set(tabId: string, css: TabCss | null): Promise<TabCssSetResult>`

탭 오버라이드를 직접 설정하거나 (null로) 제거합니다. 파일 선택 창이나 히스토리 활성화로 이전에 인가된 경로만 허용됩니다. 인가되지 않은 경로는 제거되어 content만 저장되며, 저장 상태와 응답 모두 path: null이 됩니다.

`dmn.css.tab.toggle(tabId: string, enabled: boolean): Promise<TabCssToggleResult>`

탭 오버라이드를 제거하지 않고 켜거나 끕니다.

`dmn.css.tab.clear(tabId: string): Promise<TabCssClearResult>`

탭 오버라이드를 제거하고 전역 CSS로 되돌립니다.

`dmn.css.tab.onChanged(callback): Unsubscribe`

탭 오버라이드 변경을 구독합니다. 콜백은 { tabId, css: TabCss | null }을 받습니다.

dmn.js

JavaScript 플러그인 상태는 { plugins: JsPlugin[] }이며 각 플러그인은 { id, name, path, content, enabled }입니다.

`dmn.js.get(): Promise<CustomJs>`

현재 플러그인 목록을 반환합니다.

`dmn.js.getUse(): Promise<boolean>`

JS 플러그인 활성화 여부를 반환합니다.

`dmn.js.toggle(enabled: boolean): Promise<{ enabled: boolean }>`

JS 플러그인 전체를 켜거나 끕니다.

`dmn.js.load(): Promise<JsLoadResult>`

파일 선택 창을 열어 선택한 플러그인 파일들을 추가합니다.


type JsLoadResult = {
  success: boolean;
  added: JsPlugin[];
  errors?: { path: string; error: string }[];
};

`dmn.js.reload(): Promise<JsReloadResult>`

모든 플러그인 파일을 디스크에서 다시 읽고 { updated, errors? }를 반환합니다. 파일 내용이 같아도 플러그인을 항상 정리 후 재실행하므로, 명시 리로드는 플러그인 상태 초기화 용도로 쓸 수 있습니다.

`dmn.js.remove(id: string): Promise<JsRemoveResult>`

id로 플러그인을 제거합니다.

`dmn.js.setPluginEnabled(id: string, enabled: boolean): Promise<JsPluginUpdateResult>`

개별 플러그인을 켜거나 끕니다.

`dmn.js.setContent(content: string): Promise<JsSetContentResult>`

인라인 JS 콘텐츠를 교체합니다.

`dmn.js.reset(): Promise<void>`

JS 플러그인을 끄고 플러그인 목록을 초기화합니다.

`dmn.js.onUse(callback): Unsubscribe`

활성화 상태 변경을 구독합니다 ({ enabled: boolean }).

`dmn.js.onState(callback): Unsubscribe`

플러그인 목록 변경을 구독합니다. 콜백은 CustomJs를 받습니다.


const unsub = dmn.js.onState(({ plugins }) => {
  console.log(
    "plugins:",
    plugins.map((p) => `${p.name}(${p.enabled ? "on" : "off"})`),
  );
});