CSS/JS 파일

dmn.css

커스텀 CSS 파일 관리 API입니다.

get()

현재 CSS 설정을 조회합니다.


const css = await dmn.css.get();
console.log("내용:", css.content);
console.log("경로:", css.path);

getUse()

CSS 사용 여부만 조회합니다. (설정의 useCustomCSS 값)


const enabled = await dmn.css.getUse();

toggle(enabled)

CSS 사용 여부를 토글합니다.


await dmn.css.toggle(true); // CSS 활성화
await dmn.css.toggle(false); // CSS 비활성화

load()

외부 CSS 파일을 불러옵니다. 파일 선택 다이얼로그가 열립니다.


const result = await dmn.css.load();
if (result.success) {
  console.log("불러온 경로:", result.path);
  console.log("내용:", result.content);
}

커스텀 CSS가 활성화(useCustomCSS = true)된 상태에서 파일 경로가 설정돼 있으면, 파일 변경을 자동 감지하여 다시 적용합니다.

setContent(content)

CSS 내용을 직접 설정합니다.


await dmn.css.setContent(`
  [data-state="active"] {
    --key-bg: #ff2b80;
    --key-border: 2px solid #fff;
  }
`);

reset()

CSS를 기본값으로 초기화합니다.


await dmn.css.reset();

이벤트 구독


// CSS 활성화 상태 변경
const unsub1 = dmn.css.onUse(({ enabled }) => {
  console.log("CSS 활성화:", enabled);
});
 
// CSS 내용 변경
const unsub2 = dmn.css.onContent((css) => {
  console.log("CSS 변경됨:", css.content);
});

탭별 CSS (css.tab)

모드/탭별로 개별 CSS를 적용할 수 있습니다.


// 모든 탭 CSS 조회
const allTabCss = await dmn.css.tab.getAll();
 
// 특정 탭 CSS 조회
const tab4key = await dmn.css.tab.get("4key");
 
// 탭 CSS 파일 불러오기
const result = await dmn.css.tab.load("4key");
 
// 탭 CSS 설정
await dmn.css.tab.set("4key", {
  use: true,
  content: "[data-state='active'] { --key-bg: red; }",
});
 
// 탭 CSS 토글
await dmn.css.tab.toggle("4key", true);
 
// 탭 CSS 초기화
await dmn.css.tab.clear("4key");
 
// 변경 이벤트
const unsub = dmn.css.tab.onChanged(({ tabId, css }) => {
  console.log(`${tabId} CSS 변경:`, css);
});

dmn.js

커스텀 JS(플러그인) 파일 관리 API입니다.

get()

현재 JS 플러그인 상태를 조회합니다.


const js = await dmn.js.get();
console.log("플러그인 목록:", js.plugins);

getUse()

JS 플러그인 사용 여부만 조회합니다. (설정의 useCustomJS 값)


const enabled = await dmn.js.getUse();

toggle(enabled)

JS 플러그인 사용 여부를 토글합니다.


await dmn.js.toggle(true); // 플러그인 활성화
await dmn.js.toggle(false); // 플러그인 비활성화

load()

외부 JS 파일을 불러옵니다. 파일 선택 다이얼로그가 열립니다.


const result = await dmn.js.load();
if (result.success) {
  console.log("추가된 플러그인:", result.added);
}

reload()

모든 플러그인을 다시 로드합니다.


const result = await dmn.js.reload();
console.log("업데이트된 플러그인:", result.updated);

remove(id)

특정 플러그인을 제거합니다.


await dmn.js.remove("my-plugin-id");

setPluginEnabled(id, enabled)

특정 플러그인의 활성화 상태를 변경합니다.


await dmn.js.setPluginEnabled("kps", true); // 활성화
await dmn.js.setPluginEnabled("kps", false); // 비활성화

setContent(content)

JS 파일 내용을 직접 설정합니다.


await dmn.js.setContent(`// @id: inline-plugin
 
console.log("hello from inline plugin");
`);

reset()

JS 설정(경로/내용/플러그인 목록)을 기본값으로 초기화합니다.


await dmn.js.reset();

이벤트 구독


// JS 플러그인 활성화 상태 변경
const unsub1 = dmn.js.onUse(({ enabled }) => {
  console.log("JS 플러그인 활성화:", enabled);
});
 
// JS 플러그인 상태 변경
const unsub2 = dmn.js.onState((js) => {
  console.log("플러그인 목록:", js.plugins);
});