feat: migrate injected panel to Chrome Side Panel API

The injected-panel approach couldn't trigger page reflow because CSS
changes don't affect window.innerWidth (what media queries check).
The Chrome Side Panel API creates a real browser sidebar that actually
reduces the viewport, so LinkedIn/Naukri reflow exactly like a window
resize — full quality, no zoom, no clipping.

- manifest: add sidePanel permission + side_panel config (popup.html?mode=sidepanel)
- background: setPanelBehavior openPanelOnActionClick=true (toolbar click = panel)
- content: remove entire injected panel + page zoom/shift code
- popup: detect ?mode=sidepanel to skip the dock button in side panel context

Usage: click the extension icon in the Chrome toolbar to open/close the panel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

extension/background.js

@@ -5,6 +5,11 @@
 // Run before configuring anything. importScripts works in a classic MV3 worker.
 try { importScripts('default_resume.js'); } catch (_) { /* default optional */ }
 
+// Open the side panel when the user clicks the extension toolbar icon.
+if (chrome.sidePanel?.setPanelBehavior) {
+  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(() => {});
+}
+
 function safeRespond(sendResponse, data) {
   try { sendResponse(data); } catch (_) { /* popup closed before reply */ }
 }

extension/content.js

@@ -389,127 +389,6 @@ async function extractJD() {
   return result;
 }
 
-// ─── Persistent left-docked side panel (R18) ─────────────────────────────────
-
-const PANEL_UI_KEY = 'panel_ui';   // { collapsed, dismissed }
-
-/** True when this origin can't host the panel (extension / internal pages). */
-function isRestrictedPanelHost() {
-  const p = (location.protocol || '').toLowerCase();
-  return p === 'chrome:' || p === 'chrome-extension:' || p === 'about:' || p === 'edge:';
-}
-
-/**
- * Inject a persistent, collapsible left-docked panel that hosts the existing
- * popup UI (popup/popup.html) in an iframe. The panel stays visible while the
- * user interacts with the page, so a background-owned Run (R15) never appears
- * to "restart". Idempotent: re-running never double-injects. Only the narrow
- * dock + tab capture pointer events, so the rest of the page stays clickable.
- * @param {boolean} forceShow
- */
-function injectSidePanel(forceShow) {
-  try {
-    if (isRestrictedPanelHost()) return;
-    if (window.top !== window) return;     // never inject inside our own iframe
-
-    let root = document.getElementById('ats-side-panel-root');
-    if (root) {
-      if (forceShow) root.classList.remove('collapsed');
-      return;
-    }
-
-    if (!document.getElementById('ats-side-panel-style')) {
-      const style = document.createElement('style');
-      style.id = 'ats-side-panel-style';
-      style.textContent = [
-        '#ats-side-panel-root{position:fixed;top:0;left:0;height:100vh;',
-        'z-index:2147483646;display:flex;align-items:stretch;font:initial;}',
-        '#ats-side-panel-frame{width:380px;height:100%;border:0;background:#fff;',
-        'box-shadow:2px 0 12px rgba(0,0,0,.18);}',
-        '#ats-side-panel-root.collapsed #ats-side-panel-frame{width:0;box-shadow:none;}',
-        '#ats-side-panel-tab{align-self:center;display:flex;flex-direction:column;gap:6px;}',
-        '#ats-side-panel-toggle,#ats-side-panel-dismiss{cursor:pointer;border:0;color:#fff;',
-        'background:#2563eb;font:600 11px/1 system-ui,sans-serif;padding:10px 6px;',
-        'border-radius:0 6px 6px 0;writing-mode:vertical-rl;}',
-        '#ats-side-panel-dismiss{background:#64748b;}',
-      ].join('');
-      (document.head || document.documentElement).appendChild(style);
-    }
-
-    root = document.createElement('div');
-    root.id = 'ats-side-panel-root';
-
-    const frame = document.createElement('iframe');
-    frame.id = 'ats-side-panel-frame';
-    frame.src = chrome.runtime.getURL('popup/popup.html');
-    root.appendChild(frame);
-
-    function persistPanelUi(dismissed) {
-      try {
-        chrome.storage.local.set({
-          [PANEL_UI_KEY]: {
-            collapsed: root.isConnected ? root.classList.contains('collapsed') : false,
-            dismissed: !!dismissed,
-          },
-        });
-      } catch (_) { /* quota — ignore */ }
-    }
-
-    const tab = document.createElement('div');
-    tab.id = 'ats-side-panel-tab';
-    const toggle = document.createElement('button');
-    toggle.id = 'ats-side-panel-toggle';
-    toggle.textContent = 'ATS';
-    toggle.title = 'Show / hide the ATS panel';
-    function _shiftPage(open) {
-      const body = document.body;
-      if (!body) return;
-      if (open) {
-        // zoom on body triggers a real layout reflow (same as resizing the window).
-        // Panel root lives outside body so it is unaffected by the zoom.
-        const ratio = ((window.innerWidth - 380) / window.innerWidth).toFixed(4);
-        body.style.setProperty('zoom', ratio, 'important');
-        body.style.setProperty('margin-left', '380px', 'important');
-      } else {
-        body.style.removeProperty('zoom');
-        body.style.removeProperty('margin-left');
-      }
-    }
-
-    toggle.addEventListener('click', () => {
-      root.classList.toggle('collapsed');
-      _shiftPage(!root.classList.contains('collapsed'));
-      persistPanelUi(false);
-    });
-    const dismiss = document.createElement('button');
-    dismiss.id = 'ats-side-panel-dismiss';
-    dismiss.textContent = '\u00d7';   // ×
-    dismiss.title = 'Hide for this page';
-    dismiss.addEventListener('click', () => {
-      _shiftPage(false);
-      root.remove();
-      persistPanelUi(true);
-    });
-    tab.appendChild(toggle);
-    tab.appendChild(dismiss);
-    root.appendChild(tab);
-
-    // Insert as child of <html> (before <body>) so body zoom doesn't shrink the panel.
-    document.documentElement.insertBefore(root, document.body || null);
-    _shiftPage(true);   // panel starts expanded — push page right immediately
-
-    // Restore the saved collapsed / dismissed preference (unless force-shown).
-    try {
-      chrome.storage.local.get([PANEL_UI_KEY], (res) => {
-        if (chrome.runtime.lastError) return;
-        const ui = (res && res[PANEL_UI_KEY]) || {};
-        if (!forceShow && ui.dismissed) { _shiftPage(false); root.remove(); return; }
-        if (!forceShow && ui.collapsed) { root.classList.add('collapsed'); _shiftPage(false); }
-      });
-    } catch (_) { /* ignore */ }
-  } catch (_) { /* never break the host page */ }
-}
-
 // ─── Non-job / recommendation-page detection ─────────────────────────────────
 
 // Headers LinkedIn/Indeed/Naukri show on jobs HOME / search / collections pages
@@ -754,13 +633,6 @@ function applyAutofillAnswers(answers) {
 // ─── Message listener ─────────────────────────────────────────────────────────
 
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  if (msg.type === 'TOGGLE_PANEL') {
-    const root = document.getElementById('ats-side-panel-root');
-    if (!root) injectSidePanel(true);
-    else root.classList.toggle('collapsed');
-    sendResponse({ ok: true });
-    return; // synchronous response
-  }
 
   if (msg.type === 'SCAN_FORM') {
     try {
@@ -821,6 +693,3 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   }
 });
 
-// Inject the persistent left-docked panel once the content script loads
-// (idempotent; respects the saved collapsed/dismissed preference).
-injectSidePanel(false);

extension/manifest.json

@@ -7,7 +7,8 @@
     "storage",
     "downloads",
     "activeTab",
-    "scripting"
+    "scripting",
+    "sidePanel"
   ],
   "host_permissions": [
     "<all_urls>"
@@ -15,8 +16,10 @@
   "background": {
     "service_worker": "background.js"
   },
+  "side_panel": {
+    "default_path": "popup/popup.html?mode=sidepanel"
+  },
   "action": {
-    "default_popup": "popup/popup.html",
     "default_icon": {
       "16": "icons/icon16.png",
       "48": "icons/icon48.png",

extension/popup/popup.js

@@ -46,7 +46,8 @@ const manualJDEl   = document.getElementById('manual-jd');
 // a button docks the persistent in-page panel and closes the popup. When this
 // page runs EMBEDDED inside the content-script iframe (window.top !== window),
 // the control is hidden because the UI is already docked.
-const PANEL_EMBEDDED = window.top !== window;
+const IS_SIDE_PANEL = new URLSearchParams(location.search).get('mode') === 'sidepanel';
+const PANEL_EMBEDDED = window.top !== window || IS_SIDE_PANEL;
 function setupPanelLauncher() {
   if (PANEL_EMBEDDED) return;
   const bar = document.createElement('button');