npc-agent 1.0.0

package/extension/background.js

@@ -0,0 +1,451 @@
+const RELAY_URL = 'ws://localhost:7221/extension';
+let ws = null;
+let connectedTabs = new Map();
+let nextSessionId = 1;
+
+let offscreenCreating = null;
+async function setupOffscreen() {
+  if (offscreenCreating) return offscreenCreating;
+
+  offscreenCreating = (async () => {
+    try {
+      const hasDoc = await chrome.offscreen.hasDocument();
+      if (!hasDoc) {
+        await chrome.offscreen.createDocument({
+          url: 'offscreen.html',
+          reasons: ['BLOBS'],
+          justification: 'Keep service worker alive for NPC browser automation'
+        });
+      }
+    } catch (e) {
+      console.log('[npc] Offscreen setup:', e.message);
+    } finally {
+      offscreenCreating = null;
+    }
+  })();
+
+  return offscreenCreating;
+}
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.type === 'keepalive') {
+    sendResponse({ ok: true });
+  }
+  return true;
+});
+
+chrome.runtime.onInstalled.addListener(setupOffscreen);
+chrome.runtime.onStartup.addListener(setupOffscreen);
+
+function isAttachable(url) {
+  return url && !url.startsWith('chrome://') && !url.startsWith('chrome-extension://') && !url.startsWith('brave://') && !url.startsWith('edge://') && !url.startsWith('about:');
+}
+
+function connect() {
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
+
+  try {
+    ws = new WebSocket(RELAY_URL);
+  } catch (e) {
+    updateIcon();
+    return;
+  }
+
+  ws.onopen = async () => {
+    console.log('[npc] WebSocket connected to relay');
+    updateIcon();
+    await new Promise(r => setTimeout(r, 500));
+    await autoAttachActiveTab();
+  };
+  ws.onerror = () => {};
+  ws.onclose = () => {
+    ws = null;
+    connectedTabs.clear();
+    updateIcon();
+    setTimeout(connect, 3000);
+  };
+
+  ws.onmessage = async (e) => {
+    let msg;
+    try { msg = JSON.parse(e.data); } catch { return; }
+
+    if (msg.method === 'ping') {
+      ws.send(JSON.stringify({ method: 'pong' }));
+      return;
+    }
+
+    if (msg.method === 'attachActiveTab') {
+      await autoAttachActiveTab();
+      ws.send(JSON.stringify({ id: msg.id, result: { attached: connectedTabs.size } }));
+      return;
+    }
+
+    if (msg.method === 'corsFetch') {
+      const response = { id: msg.id };
+      try {
+        const { url, options = {} } = msg.params || {};
+
+        const cookies = await chrome.cookies.getAll({ url: url });
+        const cookieString = cookies
+          .filter(c => !c.expirationDate || c.expirationDate > Date.now() / 1000)
+          .map(c => `${c.name}=${c.value}`)
+          .join('; ');
+
+        const fetchOpts = {
+          method: options.method || 'GET',
+          headers: {
+            ...(options.headers || { 'Accept': 'application/json' }),
+            'Cookie': cookieString
+          }
+        };
+        if (options.body) fetchOpts.body = options.body;
+
+        const resp = await fetch(url, fetchOpts);
+        const text = await resp.text();
+        let data;
+        try { data = JSON.parse(text); } catch { data = text; }
+        response.result = { status: resp.status, ok: resp.ok, data };
+      } catch (err) {
+        response.error = err.message || 'Fetch failed';
+      }
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(response));
+      }
+      return;
+    }
+
+    if (msg.method === 'forwardCDPCommand') {
+      const response = { id: msg.id };
+      try {
+        response.result = await handleCDP(msg.params);
+      } catch (err) {
+        response.error = err.message || 'Unknown error';
+      }
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(response));
+      }
+    }
+  };
+}
+
+async function handleCDP({ method, params, sessionId }) {
+  const browserLevelCommands = [
+    'Target.createTarget',
+    'Target.closeTarget',
+    'Target.activateTarget',
+    'Target.getTargets',
+    'Target.attachToTarget'
+  ];
+
+  if (browserLevelCommands.includes(method)) {
+    if (method === 'Target.attachToTarget') {
+      const targetId = params?.targetId;
+      for (const [tid, info] of connectedTabs) {
+        if (info.targetId === targetId) {
+          return { sessionId: info.sessionId };
+        }
+      }
+      throw new Error('Target not found: ' + targetId);
+    }
+
+    if (method === 'Target.createTarget') {
+      let tab;
+      if (params?.newWindow) {
+        const win = await chrome.windows.create({ url: params?.url || 'about:blank', focused: false });
+        tab = win.tabs[0];
+      } else {
+        tab = await chrome.tabs.create({ url: params?.url || 'about:blank', active: false });
+      }
+      await new Promise(r => setTimeout(r, 500));
+
+      try {
+        await chrome.debugger.detach({ tabId: tab.id });
+      } catch (e) {
+      }
+
+      const { targetInfo } = await attachTab(tab.id);
+      return { targetId: targetInfo.targetId };
+    }
+
+    if (method === 'Target.closeTarget') {
+      const targetId = params?.targetId;
+      let foundTabId = null;
+      let foundWindowId = null;
+      for (const [tid, info] of connectedTabs) {
+        if (info.targetId === targetId) { foundTabId = tid; break; }
+      }
+      if (foundTabId) {
+        try {
+          const tab = await chrome.tabs.get(foundTabId);
+          foundWindowId = tab.windowId;
+
+          const win = await chrome.windows.get(foundWindowId, { populate: true });
+          const isLastTab = win.tabs.length <= 1;
+
+          await chrome.debugger.detach({ tabId: foundTabId }).catch(() => {});
+          connectedTabs.delete(foundTabId);
+
+          if (isLastTab) {
+            await chrome.windows.remove(foundWindowId);
+          } else {
+            await chrome.tabs.remove(foundTabId);
+          }
+
+          if (ws?.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+              method: 'forwardCDPEvent',
+              params: {
+                method: 'Target.targetDestroyed',
+                params: { targetId }
+              }
+            }));
+          }
+          return { success: true };
+        } catch (e) {
+          throw new Error('Could not close tab: ' + e.message);
+        }
+      }
+      throw new Error('Target not found: ' + targetId);
+    }
+
+    if (method === 'Target.activateTarget') {
+      const targetId = params?.targetId;
+      let foundTabId = null;
+      for (const [tid, info] of connectedTabs) {
+        if (info.targetId === targetId) { foundTabId = tid; break; }
+      }
+      if (foundTabId) {
+        await chrome.tabs.update(foundTabId, { active: true });
+        const tab = await chrome.tabs.get(foundTabId);
+        if (tab.windowId) {
+          await chrome.windows.update(tab.windowId, { focused: true });
+        }
+        return { success: true };
+      }
+      throw new Error('Target not found: ' + targetId);
+    }
+
+    if (method === 'Target.getTargets') {
+      return {
+        targetInfos: Array.from(connectedTabs.values()).map(info => ({
+          targetId: info.targetId,
+          type: 'page',
+          attached: true
+        }))
+      };
+    }
+  }
+
+  let tabId = null;
+  for (const [tid, info] of connectedTabs) {
+    if (info.sessionId === sessionId) { tabId = tid; break; }
+  }
+
+  if (!tabId) throw new Error('Session not found');
+  return await chrome.debugger.sendCommand({ tabId }, method, params);
+}
+
+async function attachTab(tabId) {
+  console.log('[npc] Attempting to attach tab:', tabId);
+  try {
+    await chrome.debugger.attach({ tabId }, '1.3');
+    console.log('[npc] Debugger attached to tab:', tabId);
+  } catch (e) {
+    console.log('[npc] Attach failed:', e.message);
+    throw new Error('Could not attach to tab: ' + e.message);
+  }
+
+  try {
+    await chrome.debugger.sendCommand({ tabId }, 'Page.enable');
+  } catch {}
+
+  let targetInfo;
+  try {
+    const result = await chrome.debugger.sendCommand({ tabId }, 'Target.getTargetInfo');
+    targetInfo = result.targetInfo;
+  } catch {
+    targetInfo = { targetId: `tab-${tabId}`, url: '', type: 'page' };
+  }
+
+  const sessionId = `session-${nextSessionId++}`;
+  connectedTabs.set(tabId, { sessionId, targetId: targetInfo.targetId });
+
+  if (ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({
+      method: 'forwardCDPEvent',
+      params: {
+        method: 'Target.attachedToTarget',
+        params: { sessionId, targetInfo: { ...targetInfo, attached: true }, waitingForDebugger: false }
+      }
+    }));
+  }
+
+  updateIcon();
+  return { targetInfo, sessionId };
+}
+
+function detachTab(tabId) {
+  const info = connectedTabs.get(tabId);
+  if (!info) return;
+
+  if (ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({
+      method: 'forwardCDPEvent',
+      params: {
+        method: 'Target.detachedFromTarget',
+        params: { sessionId: info.sessionId, targetId: info.targetId }
+      }
+    }));
+  }
+
+  connectedTabs.delete(tabId);
+  chrome.debugger.detach({ tabId }).catch(() => {});
+  updateIcon();
+}
+
+function updateIcon() {
+  const n = connectedTabs.size;
+  const ok = ws?.readyState === WebSocket.OPEN;
+  chrome.action.setBadgeText({ text: n > 0 ? String(n) : (ok ? '' : '!') });
+  chrome.action.setBadgeBackgroundColor({ color: n > 0 ? '#22c55e' : (ok ? '#64748b' : '#ef4444') });
+}
+
+chrome.debugger.onEvent.addListener((src, method, params) => {
+  const info = connectedTabs.get(src.tabId);
+  if (info && ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ method: 'forwardCDPEvent', params: { sessionId: info.sessionId, method, params } }));
+  }
+});
+
+chrome.debugger.onDetach.addListener((src) => {
+  if (connectedTabs.has(src.tabId)) {
+    detachTab(src.tabId);
+    ensureConnected();
+  }
+});
+
+chrome.tabs.onRemoved.addListener((tabId) => {
+  if (connectedTabs.has(tabId)) {
+    detachTab(tabId);
+    ensureConnected();
+  }
+});
+
+async function ensureConnected() {
+  if (ws?.readyState !== WebSocket.OPEN) return;
+  if (connectedTabs.size > 0) return;
+
+  console.log('[npc] No tabs connected, auto-attaching...');
+  await autoAttachActiveTab();
+}
+
+chrome.action.onClicked.addListener(async (tab) => {
+  console.log('[npc] Extension icon clicked, tab:', tab?.id, tab?.url);
+  if (!tab.id || !isAttachable(tab.url)) {
+    console.log('[npc] Skipping non-attachable page');
+    return;
+  }
+
+  if (connectedTabs.has(tab.id)) {
+    console.log('[npc] Tab already connected, detaching');
+    detachTab(tab.id);
+  } else {
+    console.log('[npc] Connecting to relay and attaching tab');
+    connect();
+    try {
+      await attachTab(tab.id);
+      console.log('[npc] Successfully attached tab');
+    } catch (e) {
+      console.log('[npc] Failed to attach:', e.message);
+    }
+  }
+});
+
+connect();
+
+setInterval(() => {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    connect();
+  } else if (connectedTabs.size === 0) {
+    autoAttachActiveTab();
+  }
+}, 3000);
+
+chrome.alarms.create('keepalive', { periodInMinutes: 0.5 });
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'keepalive') {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ method: 'ping' }));
+    }
+  }
+});
+
+let autoAttaching = false;
+async function autoAttachActiveTab() {
+  if (autoAttaching) return;
+  autoAttaching = true;
+  console.log('[npc] autoAttachActiveTab called');
+  try {
+    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+
+    for (const tab of tabs) {
+      if (tab && tab.id && isAttachable(tab.url)) {
+        if (!connectedTabs.has(tab.id)) {
+          try {
+            await attachTab(tab.id);
+            console.log('[npc] Auto-attached to tab:', tab.url);
+            return;
+          } catch (e) {
+            console.log('[npc] Failed to attach tab:', tab.id, e.message);
+          }
+        }
+      }
+    }
+    console.log('[npc] No valid tabs found to attach');
+  } catch (e) {
+    console.log('[npc] Auto-attach failed:', e.message);
+  } finally {
+    autoAttaching = false;
+  }
+}
+
+chrome.tabs.onActivated.addListener(async (activeInfo) => {
+  if (ws?.readyState !== WebSocket.OPEN) return;
+  try {
+    const tab = await chrome.tabs.get(activeInfo.tabId);
+    if (tab && isAttachable(tab.url)) {
+      if (!connectedTabs.has(tab.id)) {
+        await attachTab(tab.id);
+        console.log('[npc] Auto-attached on tab switch:', tab.url);
+      }
+    }
+  } catch {}
+});
+
+chrome.tabs.onCreated.addListener(async (tab) => {
+  if (ws?.readyState !== WebSocket.OPEN) return;
+  if (connectedTabs.size > 0) return;
+
+  await new Promise(r => setTimeout(r, 1000));
+
+  try {
+    const updatedTab = await chrome.tabs.get(tab.id);
+    if (updatedTab && isAttachable(updatedTab.url)) {
+      await attachTab(tab.id);
+      console.log('[npc] Auto-attached to new tab:', updatedTab.url);
+    }
+  } catch {}
+});
+
+chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+  if (changeInfo.status !== 'complete') return;
+  if (ws?.readyState !== WebSocket.OPEN) return;
+  if (connectedTabs.size > 0) return;
+
+  if (tab && isAttachable(tab.url)) {
+    try {
+      await attachTab(tabId);
+      console.log('[npc] Auto-attached on tab load:', tab.url);
+    } catch {}
+  }
+});

package/extension/icons/icon.svg

@@ -0,0 +1,154 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 168 168">
+  <defs>
+    <filter id="fShadow" x="-25%" y="-15%" width="150%" height="160%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="shadowBlur"/>
+      <feOffset dx="4" dy="7" result="shadowOff"/>
+      <feFlood flood-color="#000000" flood-opacity="0.65" result="shadowColor"/>
+      <feComposite in="shadowColor" in2="shadowOff" operator="in" result="shadow"/>
+      <feMerge>
+        <feMergeNode in="shadow"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="f3d" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
+      <feSpecularLighting in="blur" surfaceScale="8" specularConstant="1.2" specularExponent="35" result="spec" lighting-color="#e0ffff">
+        <fePointLight x="-50" y="-70" z="130"/>
+      </feSpecularLighting>
+      <feComposite in="spec" in2="SourceAlpha" operator="in" result="specMask"/>
+      <feDiffuseLighting in="blur" surfaceScale="5" diffuseConstant="1.0" result="diff" lighting-color="#ccffee">
+        <fePointLight x="-40" y="-60" z="110"/>
+      </feDiffuseLighting>
+      <feComposite in="diff" in2="SourceAlpha" operator="in" result="diffMask"/>
+      <feComposite in="SourceGraphic" in2="diffMask" operator="arithmetic" k1="0" k2="0.55" k3="0.45" k4="0" result="lit"/>
+      <feComposite in="lit" in2="specMask" operator="arithmetic" k1="0" k2="1" k3="0.5" k4="0"/>
+    </filter>
+
+    <filter id="fGlow" x="-60%" y="-60%" width="220%" height="220%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="glow"/>
+      <feColorMatrix in="glow" type="saturate" values="2" result="saturated"/>
+      <feMerge>
+        <feMergeNode in="saturated"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0c1929"/>
+      <stop offset="100%" stop-color="#050d16"/>
+    </linearGradient>
+
+    <radialGradient id="gBody" cx="0.35" cy="0.3" r="0.7" fx="0.3" fy="0.25">
+      <stop offset="0%" stop-color="#b0f5e8"/>
+      <stop offset="25%" stop-color="#5dcaa5"/>
+      <stop offset="55%" stop-color="#1d9e75"/>
+      <stop offset="80%" stop-color="#0f6e56"/>
+      <stop offset="100%" stop-color="#04342c"/>
+    </radialGradient>
+
+    <radialGradient id="gHead" cx="0.38" cy="0.32" r="0.68" fx="0.33" fy="0.27">
+      <stop offset="0%" stop-color="#c0faf0"/>
+      <stop offset="25%" stop-color="#6ee0bb"/>
+      <stop offset="55%" stop-color="#2db08a"/>
+      <stop offset="80%" stop-color="#157a60"/>
+      <stop offset="100%" stop-color="#053d30"/>
+    </radialGradient>
+
+    <linearGradient id="gNeck" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#5dcaa5"/>
+      <stop offset="30%" stop-color="#1d9e75"/>
+      <stop offset="70%" stop-color="#0f6e56"/>
+      <stop offset="100%" stop-color="#085041"/>
+    </linearGradient>
+
+    <radialGradient id="gAntenna" cx="0.4" cy="0.3" r="0.55">
+      <stop offset="0%" stop-color="#ffffff"/>
+      <stop offset="25%" stop-color="#a0ffe0"/>
+      <stop offset="55%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#0a7a3a"/>
+    </radialGradient>
+
+    <radialGradient id="gSpec" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0%" stop-color="white" stop-opacity="0.75"/>
+      <stop offset="100%" stop-color="white" stop-opacity="0"/>
+    </radialGradient>
+
+    <linearGradient id="gAO" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="black" stop-opacity="0"/>
+      <stop offset="100%" stop-color="black" stop-opacity="0.45"/>
+    </linearGradient>
+  </defs>
+
+  <rect x="-20" y="-20" width="168" height="168" rx="32" fill="url(#bg)"/>
+  <ellipse cx="64" cy="70" rx="45" ry="50" fill="#1d9e75" opacity="0.08"/>
+
+  <g filter="url(#fShadow)">
+
+    <!-- EXTRUSION -->
+    <g opacity="0.5">
+      <g transform="translate(3, 5)">
+        <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="#021a14"/>
+        <rect x="38" y="18" width="52" height="38" rx="13" fill="#021a14"/>
+        <rect x="55" y="52" width="18" height="14" rx="5" fill="#021a14"/>
+      </g>
+      <g transform="translate(2, 3.5)">
+        <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="#042e24"/>
+        <rect x="38" y="18" width="52" height="38" rx="13" fill="#042e24"/>
+        <rect x="55" y="52" width="18" height="14" rx="5" fill="#042e24"/>
+      </g>
+      <g transform="translate(1, 2)">
+        <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="#064538"/>
+        <rect x="38" y="18" width="52" height="38" rx="13" fill="#064538"/>
+        <rect x="55" y="52" width="18" height="14" rx="5" fill="#064538"/>
+      </g>
+    </g>
+
+    <!-- Dark edge strokes -->
+    <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="none" stroke="#021a14" stroke-width="2.5" opacity="0.6"/>
+    <rect x="38" y="18" width="52" height="38" rx="13" fill="none" stroke="#021a14" stroke-width="2.5" opacity="0.6"/>
+
+    <!-- BODY -->
+    <g filter="url(#f3d)">
+      <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="url(#gBody)"/>
+    </g>
+    <ellipse cx="52" cy="72" rx="18" ry="10" fill="url(#gSpec)" opacity="0.6"/>
+    <path d="M32 76 Q32 65 41 63 L55 59 Q64 57 73 59 L87 63 Q96 65 96 76 L96 102 Q96 110 87 110 L41 110 Q32 110 32 102 Z" fill="url(#gAO)" opacity="0.4"/>
+    <path d="M87 63 Q96 65 96 76 L96 102 Q96 110 87 110" fill="none" stroke="#b0f5e8" stroke-width="1.5" opacity="0.2"/>
+
+    <!-- NPC text -->
+    <text x="64" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="800" fill="#042e24" letter-spacing="4" opacity="0.5">NPC</text>
+    <line x1="46" y1="79" x2="82" y2="79" stroke="#b0f5e8" stroke-width="0.8" opacity="0.25"/>
+
+    <!-- NECK -->
+    <rect x="55" y="52" width="18" height="14" rx="5" fill="url(#gNeck)"/>
+
+    <!-- HEAD -->
+    <g filter="url(#f3d)">
+      <rect x="38" y="18" width="52" height="38" rx="13" fill="url(#gHead)"/>
+    </g>
+    <ellipse cx="52" cy="27" rx="16" ry="9" fill="url(#gSpec)" opacity="0.6"/>
+    <rect x="38" y="18" width="52" height="38" rx="13" fill="url(#gAO)" opacity="0.35"/>
+    <path d="M90 31 Q90 18 77 18" fill="none" stroke="#c0faf0" stroke-width="1.2" opacity="0.2"/>
+
+    <!-- EYES -->
+    <circle cx="52" cy="38" r="6" fill="#050d16"/>
+    <circle cx="76" cy="38" r="6" fill="#050d16"/>
+    <circle cx="52" cy="38" r="6" fill="none" stroke="#22c55e" stroke-width="0.8" opacity="0.3"/>
+    <circle cx="76" cy="38" r="6" fill="none" stroke="#22c55e" stroke-width="0.8" opacity="0.3"/>
+    <circle cx="52" cy="37.5" r="3.5" fill="#5dcaa5"/>
+    <circle cx="76" cy="37.5" r="3.5" fill="#5dcaa5"/>
+    <circle cx="54.5" cy="35" r="1.8" fill="white" opacity="0.95"/>
+    <circle cx="78.5" cy="35" r="1.8" fill="white" opacity="0.95"/>
+    <circle cx="50" cy="39.5" r="0.9" fill="white" opacity="0.5"/>
+    <circle cx="74" cy="39.5" r="0.9" fill="white" opacity="0.5"/>
+
+    <!-- ANTENNA -->
+    <line x1="64" y1="18" x2="64" y2="6" stroke="#1d9e75" stroke-width="3" stroke-linecap="round"/>
+    <line x1="65.5" y1="18" x2="65.5" y2="6" stroke="#064538" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
+    <g filter="url(#fGlow)">
+      <circle cx="64" cy="5" r="5" fill="url(#gAntenna)"/>
+    </g>
+
+  </g>
+</svg>

package/extension/manifest.json

@@ -0,0 +1,33 @@
+{
+  "manifest_version": 3,
+  "name": "NPC",
+  "version": "1.0.0",
+  "description": "Connect your browser to NPC - handles the side quests.",
+  "permissions": [
+    "debugger",
+    "tabs",
+    "activeTab",
+    "offscreen",
+    "alarms",
+    "cookies"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "NPC - connect this tab",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}

package/extension/offscreen.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="offscreen.js"></script>
+</head>
+<body></body>
+</html>

package/extension/offscreen.js

@@ -0,0 +1,7 @@
+setInterval(() => {
+  chrome.runtime.sendMessage({ type: 'keepalive' }).catch(() => {});
+}, 20000);
+
+setTimeout(() => {
+  chrome.runtime.sendMessage({ type: 'keepalive' }).catch(() => {});
+}, 1000);