Anchor 4 — Popup가 doorway

"ChromeEmbed v0.1의 popup.js가 여섯 줄이었어. Lesson 4가 그게 맞는 숫자였던 이유 — 그리고 'just one more popup feature' 손 뻗을 때 일어나는 것."

여섯 줄

document.getElementById('open-panel')?.addEventListener('click', async () => {
  const windowInfo = await chrome.windows.getCurrent().catch(() => null);
  if (windowInfo?.id !== undefined) {
    await chrome.sidePanel.open({ windowId: windowInfo.id }).catch(() => {});
  }
  window.close();
});

Handler 하나. 'Open Panel' 버튼 click → 현재 window fetch → 그 window에서 side panel 열기 → popup 닫기. Popup HTML이 비슷하게 tiny — 'Open Panel' label 된 styled 버튼.

이게 맞는 이유

• Single responsibility — popup이 launcher. 그 이상은 panel과 실제 경험 surface 로서 경쟁.
• 한 살이가 뻔해 — popup이 열리고, popup이 닫혀. 관리할 상태도, 다시 그릴 일도, 쫓아다닐 경합도 없어.
• 빠른 paint — popup HTML load, JS 돔, click handler attach. 아마 open 부터 ready 까지 50 ms 미만.
• 경쟁 UI 없음 — Pippa가 panel iframe 에 살아. popup이 parallel chat UI host 안 하고 user를 그것 가리키는 게 mental model singular 유지.

안 동작하는 대안

Popup useful 하게 만들고 싶으면? Quick-chat input, most-recent-message preview, brain selector 추가. 각각:

• Panel 에 이미 존재하는 UI 중복.
• panel iframe이 이미 하는 cwkPippa backend 에 메시지 필요 — popup 에 그 messaging 재구현하거나 SW → iframe (오늘 깔끔한 API 없음) 통해 route.
• 한 살이 자체가 문제야. user가 popup 바깥을 건드리는 순간 popup이 죽어. 그때 돌고 있던 일도 같이 날아가고.

'popup 도 쓸모 있게 만들자' 는 설계는 예외 없이 중복이라는 값을 치러. 문으로만 쓰는 popup은 그 값을 아예 안 내고. ChromeEmbed는 안 내는 쪽을 골랐어.

Window vs Tab 선택

Popup이 chrome.sidePanel.open 에 { windowId } 전달. 두 결과:

• panel은 창 하나 단위로 열려. 그 창 안에서 tab을 옮겨 다녀도 panel은 그대로 있고, 내용만 지금 보고 있는 tab 에 맞춰 바뀌어. background 버스랑 Lesson 5의 다리를 타고서.
• 닫는 건 Chrome이 원래 달아 둔 side-panel 조작부로 하면 돼.

{ tabId } 대신 전달하면 그 한 tab 으로 panel scope. user가 tab 전환하는 순간 panel 닫힘. 전체 window의 browsing session 너머 ambient 되고 싶은 household extension 엔 잘못된 UX.

Optional chaining

document.getElementById('open-panel')?.addEventListener(...) — optional chaining이 paranoia. Popup HTML이 바뀌고 버튼 id mis-spell 되면, popup이 gracefully degrade (JS error 없음, 그냥 non-functional 버튼). 6-줄 script 엔 overkill. 백 git revision 후 update 할 수도 있는 extension 엔 courtesy. 유지.