Panel vs Popup vs Full Tab — 맞는 surface 고르기

// background.js — 전용 full-tab page 열기 (나중 settings/export 용)
async function openOptionsTab() {
  // chrome.runtime.openOptionsPage 가 설정되면 manifest 의 options_page 사용,
  // 아니면 manifest.json 의 options_ui 선언 여는 걸로 fallback.
  if (chrome.runtime.openOptionsPage) {
    await chrome.runtime.openOptionsPage();
  } else {
    await chrome.tabs.create({ url: chrome.runtime.getURL("options.html") });
  }
}

// Manifest 가 options page 선언해야 함:
//   "options_page": "options.html"
// — 또는 더 풍부한:
//   "options_ui": { "page": "options.html", "open_in_tab": true }

// popup.js — library view 를 side panel 에 위임하는 minimal popup
async function quickStats() {
  const { clips = [], totalVisits = 0 } = await chrome.storage.local.get([
    "clips",
    "totalVisits",
  ]);
  document.getElementById("clipCount").textContent = String(clips.length);
  document.getElementById("visitCount").textContent = String(totalVisits);
}

document.getElementById("openPanelBtn").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (tab?.id) await chrome.sidePanel.open({ tabId: tab.id });
});

quickStats();

// panel.js — full library 가 여기 살아
// (source title / timestamp / source URL 와 함께 모든 clip 렌더.)
async function render() {
  const { clips = [] } = await chrome.storage.local.get("clips");
  const root = document.getElementById("list");
  root.innerHTML = clips.length === 0 ? "<p class='empty'>No clips yet.</p>" : "";
  for (const clip of clips) {
    const row = document.createElement("div");
    row.className = "row";
    row.innerHTML = `
      <div class="meta">
        <a href="${clip.url}" target="_blank">${escapeHtml(clip.title || clip.url)}</a>
        <time>${new Date(clip.savedAt).toLocaleString()}</time>
      </div>
      <p>${escapeHtml(clip.text)}</p>`;
    root.appendChild(row);
  }
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, (ch) => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
  })[ch]);
}

chrome.storage.onChanged.addListener((c, a) => a === "local" && "clips" in c && render());
render();