playwriter 0.0.103 → 0.1.0

package/dist/extension/background.js

@@ -27,6 +27,337 @@ var createStoreImpl = (createState) => {
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
 //#endregion
+//#region src/toolbar/toolbar.ts
+function initPlaywriterToolbar() {
+	if (window.__playwriterToolbarInstalled) return;
+	window.__playwriterToolbarInstalled = true;
+	try {
+		if (window !== window.top) return;
+	} catch {
+		return;
+	}
+	let pinModeActive = false;
+	let pinCount = 0;
+	let toastTimer = null;
+	let overlayEl = null;
+	let pinBtn;
+	const host = document.createElement("div");
+	host.setAttribute("data-playwriter-toolbar", "1");
+	host.style.cssText = "position:fixed;top:12px;right:12px;z-index:2147483647;pointer-events:none;font-size:0;line-height:0;";
+	const shadow = host.attachShadow({ mode: "closed" });
+	const styleEl = document.createElement("style");
+	styleEl.textContent = `
+    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 3px;
+      background: #fff;
+      border-radius: 10px;
+      pointer-events: all;
+      user-select: none;
+      box-shadow: 0px 0px 0.5px rgba(0,0,0,0.18), 0px 3px 8px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.1);
+    }
+    .divider {
+      width: 1px;
+      height: 12px;
+      background: rgba(0, 0, 0, 0.08);
+      margin: 0 1px;
+      flex-shrink: 0;
+    }
+    .btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: none;
+      border-radius: 7px;
+      background: transparent;
+      color: #000;
+      cursor: pointer;
+      transition: background 0.1s;
+      padding: 0;
+      flex-shrink: 0;
+      outline: none;
+    }
+    .btn:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .btn.active {
+      background: #0d99ff;
+      color: #fff;
+    }
+    .btn.active:hover {
+      background: #0d99ff;
+      filter: brightness(1.05);
+    }
+    /* When active, the logo inner cursor path needs to match the blue bg
+       so it appears as a "cutout" through the white outer shape */
+    .btn.active .logo-inner { fill: #0d99ff; }
+    .toast {
+      position: fixed;
+      background: #0f172a;
+      border-radius: 8px;
+      padding: 9px 18px;
+      color: rgba(255, 255, 255, 0.85);
+      font-size: 11px;
+      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+      pointer-events: none;
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+      white-space: nowrap;
+      z-index: 1;
+      --toast-transform: translateX(-50%);
+      animation: toast-in 0.15s ease;
+    }
+    @keyframes toast-in {
+      from { opacity: 0; transform: var(--toast-transform) translateY(4px); }
+      to   { opacity: 1; transform: var(--toast-transform); }
+    }
+  `;
+	const toolbarEl = document.createElement("div");
+	toolbarEl.className = "toolbar";
+	toolbarEl.setAttribute("role", "toolbar");
+	toolbarEl.setAttribute("aria-label", "Playwriter tools");
+	shadow.appendChild(styleEl);
+	shadow.appendChild(toolbarEl);
+	function showToast(msg, anchorRect) {
+		shadow.querySelectorAll(".toast").forEach((el) => {
+			el.remove();
+		});
+		if (toastTimer !== null) clearTimeout(toastTimer);
+		const toastEl = document.createElement("div");
+		toastEl.className = "toast";
+		toastEl.textContent = msg;
+		if (anchorRect) {
+			const GAP = 8;
+			const centerX = anchorRect.left + anchorRect.width / 2;
+			const belowY = anchorRect.bottom + GAP;
+			const fitsBelow = belowY + 36 < window.innerHeight;
+			const top = fitsBelow ? belowY : anchorRect.top - GAP;
+			const transformOrigin = fitsBelow ? "top center" : "bottom center";
+			toastEl.style.left = Math.max(8, Math.min(centerX, window.innerWidth - 8)) + "px";
+			toastEl.style.top = top + "px";
+			const baseTransform = fitsBelow ? "translateX(-50%)" : "translateX(-50%) translateY(-100%)";
+			toastEl.style.setProperty("--toast-transform", baseTransform);
+			toastEl.style.transform = baseTransform;
+			toastEl.style.transformOrigin = transformOrigin;
+		} else {
+			toastEl.style.bottom = "20px";
+			toastEl.style.left = "50%";
+			toastEl.style.transform = "translateX(-50%)";
+		}
+		shadow.appendChild(toastEl);
+		toastTimer = window.setTimeout(() => {
+			toastEl.remove();
+		}, 1900);
+	}
+	function getOverlay() {
+		if (!overlayEl) {
+			const EDGE = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
+			const FILL = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
+			const container = document.createElement("div");
+			container.setAttribute("data-playwriter-overlay", "1");
+			container.style.cssText = [
+				"position:fixed",
+				"pointer-events:none",
+				"z-index:2147483646",
+				`background:${FILL}`,
+				"display:none"
+			].join(";");
+			const edgeTop = document.createElement("div");
+			edgeTop.style.cssText = `position:absolute;top:0;left:0;width:100%;height:1px;background:${EDGE};`;
+			const edgeRight = document.createElement("div");
+			edgeRight.style.cssText = `position:absolute;top:0;right:0;width:1px;height:100%;background:${EDGE};`;
+			const edgeBottom = document.createElement("div");
+			edgeBottom.style.cssText = `position:absolute;bottom:0;left:0;width:100%;height:1px;background:${EDGE};`;
+			const edgeLeft = document.createElement("div");
+			edgeLeft.style.cssText = `position:absolute;top:0;left:0;width:1px;height:100%;background:${EDGE};`;
+			container.appendChild(edgeTop);
+			container.appendChild(edgeRight);
+			container.appendChild(edgeBottom);
+			container.appendChild(edgeLeft);
+			document.documentElement.appendChild(container);
+			overlayEl = container;
+		}
+		return overlayEl;
+	}
+	function positionOverlay(target) {
+		const rect = target.getBoundingClientRect();
+		if (!rect.width && !rect.height) return;
+		const overlay = getOverlay();
+		overlay.style.display = "block";
+		overlay.style.top = rect.top + "px";
+		overlay.style.left = rect.left + "px";
+		overlay.style.width = rect.width + "px";
+		overlay.style.height = rect.height + "px";
+	}
+	function hideOverlay() {
+		if (overlayEl) overlayEl.style.display = "none";
+	}
+	function removeOverlay() {
+		if (overlayEl) {
+			overlayEl.remove();
+			overlayEl = null;
+		}
+	}
+	function getTargetAt(x, y) {
+		return document.elementsFromPoint(x, y).find((el) => !el.hasAttribute("data-playwriter-overlay") && !el.hasAttribute("data-playwriter-toolbar") && el !== document.documentElement && el !== document.body) ?? null;
+	}
+	function isOverToolbar(e) {
+		return e.composedPath().some((node) => node === host);
+	}
+	function flashElement(el) {
+		const s = el.style;
+		if (!s) return;
+		const prevOutline = s.outline;
+		const prevOffset = s.outlineOffset;
+		s.outline = "1px solid #22c55e";
+		s.outlineOffset = "2px";
+		window.setTimeout(() => {
+			s.outline = prevOutline;
+			s.outlineOffset = prevOffset;
+		}, 350);
+	}
+	function copyText(text) {
+		navigator.clipboard.writeText(text).catch(() => {
+			try {
+				const ta = document.createElement("textarea");
+				ta.value = text;
+				ta.style.cssText = "position:fixed;top:0;left:0;opacity:0;pointer-events:none;";
+				document.body.appendChild(ta);
+				ta.focus();
+				ta.select();
+				document.execCommand("copy");
+				ta.remove();
+			} catch {}
+		});
+	}
+	function allocatePinName() {
+		const shared = window.__playwriterPinCount;
+		if (typeof shared === "number" && shared > pinCount) pinCount = shared;
+		pinCount++;
+		window.__playwriterPinCount = pinCount;
+		return `playwriterPinnedElem${pinCount}`;
+	}
+	function onMouseMove(e) {
+		if (isOverToolbar(e)) {
+			hideOverlay();
+			return;
+		}
+		const target = getTargetAt(e.clientX, e.clientY);
+		if (target) positionOverlay(target);
+		else hideOverlay();
+	}
+	function describeElement(el, n) {
+		const tag = el.tagName ? el.tagName.toLowerCase() : "";
+		const id = el.id || "";
+		const cls = typeof el.className === "string" ? el.className : "";
+		const role = el.getAttribute("role") || "";
+		const aria = el.getAttribute("aria-label") || "";
+		const nameAttr = el.getAttribute("name") || "";
+		const href = el.getAttribute("href") || "";
+		const typeAttr = el.getAttribute("type") || "";
+		const text = (el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 300);
+		const r = el.getBoundingClientRect();
+		const rect = `x=${Math.round(r.x)} y=${Math.round(r.y)} w=${Math.round(r.width)} h=${Math.round(r.height)}`;
+		const visible = r.width > 0 && r.height > 0;
+		return [
+			`Pinned #${n} (globalThis.playwriterPinnedElem${n})`,
+			`URL: ${location.href}`,
+			`Tag: ${tag}`,
+			!!id && `ID: ${id}`,
+			!!cls && `Classes: ${cls.slice(0, 200)}`,
+			!!role && `Role: ${role}`,
+			!!aria && `Aria-label: ${aria}`,
+			!!nameAttr && `Name: ${nameAttr}`,
+			!!href && `Href: ${href.slice(0, 200)}`,
+			!!typeAttr && `Type: ${typeAttr}`,
+			!!text && `Text: ${text}`,
+			`Rect: ${rect}`,
+			`Visible: ${visible}`
+		].filter((line) => typeof line === "string").join("\n");
+	}
+	function buildInspectionCode(n, url, summary) {
+		return `state.page=context.pages().find(x=>x.url()===${JSON.stringify(url).replace(/'/g, "\\u0027")})||context.pages()[0]; console.log(${JSON.stringify(summary).replace(/'/g, "\\u0027")}+"\\n\\nouterHTML:\\n"+await state.page.evaluate(n=>globalThis["playwriterPinnedElem"+n]?.outerHTML,${n}))`;
+	}
+	function onClick(e) {
+		if (isOverToolbar(e)) return;
+		e.preventDefault();
+		e.stopImmediatePropagation();
+		const target = getTargetAt(e.clientX, e.clientY);
+		if (!target) return;
+		const name = allocatePinName();
+		const n = pinCount;
+		window[name] = target;
+		flashElement(target);
+		const url = location.href;
+		copyText("see the element I pinned in the playwriter tab `playwriter -e '" + buildInspectionCode(n, url, describeElement(target, n)) + "'`");
+		showToast(`Copied pin #${n}`, target.getBoundingClientRect());
+		setPinMode(false);
+	}
+	function onKeyDown(e) {
+		if (e.key === "Escape") setPinMode(false);
+	}
+	function setPinMode(on) {
+		pinModeActive = on;
+		pinBtn.classList.toggle("active", on);
+		if (on) {
+			document.documentElement.style.cursor = "crosshair";
+			getOverlay();
+			document.addEventListener("mousemove", onMouseMove, {
+				capture: true,
+				passive: true
+			});
+			document.addEventListener("click", onClick, true);
+			document.addEventListener("keydown", onKeyDown, true);
+		} else {
+			document.documentElement.style.cursor = "";
+			hideOverlay();
+			document.removeEventListener("mousemove", onMouseMove, true);
+			document.removeEventListener("click", onClick, true);
+			document.removeEventListener("keydown", onKeyDown, true);
+		}
+	}
+	const CLIPBOARD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 424 424" aria-hidden="true"><path d="M 0 212 C 0 112.063 0 62.095 31.037 31.037 C 62.116 0 112.063 0 212 0 C 311.937 0 361.905 0 392.942 31.037 C 424 62.116 424 112.063 424 212 C 424 311.937 424 361.905 392.942 392.942 C 361.926 424 311.937 424 212 424 C 112.063 424 62.095 424 31.037 392.942 C 0 361.926 0 311.937 0 212" fill="currentColor"/><path class="logo-inner" d="M 225.732 260.521 L 277.905 312.673 C 283.311 318.1 286.003 320.793 289.014 322.043 C 293.042 323.718 297.557 323.718 301.585 322.043 C 304.596 320.793 307.309 318.1 312.694 312.694 C 318.1 307.288 320.793 304.596 322.043 301.585 C 323.722 297.563 323.722 293.036 322.043 289.014 C 320.793 286.003 318.1 283.29 312.694 277.905 L 260.521 225.732 L 276.442 209.789 C 292.766 193.465 300.907 185.325 298.999 176.548 C 297.07 167.792 286.237 163.785 264.591 155.814 L 192.384 129.208 C 149.2 113.308 127.618 105.358 116.488 116.488 C 105.358 127.618 113.308 149.2 129.208 192.384 L 155.814 264.591 C 163.785 286.237 167.792 297.07 176.548 298.999 C 185.303 300.928 193.465 292.766 209.789 276.442 Z" fill="white"/></svg>`;
+	const CLOSE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+	pinBtn = document.createElement("button");
+	pinBtn.className = "btn";
+	pinBtn.setAttribute("aria-label", "Pin element — click any element to copy inspection code for a playwriter -e call");
+	pinBtn.setAttribute("title", "Pin element (click to copy inspection code)");
+	pinBtn.innerHTML = CLIPBOARD_SVG;
+	pinBtn.addEventListener("click", (e) => {
+		e.stopPropagation();
+		setPinMode(!pinModeActive);
+	});
+	const dividerEl = document.createElement("div");
+	dividerEl.className = "divider";
+	dividerEl.setAttribute("aria-hidden", "true");
+	const closeBtn = document.createElement("button");
+	closeBtn.className = "btn";
+	closeBtn.setAttribute("aria-label", "Close Playwriter toolbar");
+	closeBtn.setAttribute("title", "Close toolbar");
+	closeBtn.innerHTML = CLOSE_SVG;
+	closeBtn.addEventListener("click", (e) => {
+		e.stopPropagation();
+		setPinMode(false);
+		host.style.display = "none";
+	});
+	toolbarEl.appendChild(pinBtn);
+	toolbarEl.appendChild(dividerEl);
+	toolbarEl.appendChild(closeBtn);
+	document.documentElement.appendChild(host);
+	window.__playwriterToolbarDestroy = function() {
+		setPinMode(false);
+		removeOverlay();
+		host.remove();
+		delete window.__playwriterToolbarInstalled;
+		delete window.__playwriterToolbarDestroy;
+		delete window.__playwriterPinCount;
+	};
+}
+//#endregion
 //#region ../playwriter/src/ghost-browser.ts
 /**
 * Handles ghost-browser commands in the extension.
@@ -72,6 +403,9 @@ async function handleGhostBrowserCommand(params, chromeApi) {
 	}
 }
 //#endregion
+//#region ../playwriter/dist/ghost-cursor-client.js?raw
+var ghost_cursor_client_default = "(() => {\n  var __defProp = Object.defineProperty;\n  var __getOwnPropNames = Object.getOwnPropertyNames;\n  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;\n  var __hasOwnProp = Object.prototype.hasOwnProperty;\n  function __accessProp(key) {\n    return this[key];\n  }\n  var __toCommonJS = (from) => {\n    var entry = (__moduleCache ??= new WeakMap).get(from), desc;\n    if (entry)\n      return entry;\n    entry = __defProp({}, \"__esModule\", { value: true });\n    if (from && typeof from === \"object\" || typeof from === \"function\") {\n      for (var key of __getOwnPropNames(from))\n        if (!__hasOwnProp.call(entry, key))\n          __defProp(entry, key, {\n            get: __accessProp.bind(from, key),\n            enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable\n          });\n    }\n    __moduleCache.set(from, entry);\n    return entry;\n  };\n  var __moduleCache;\n\n  // src/ghost-cursor-client.ts\n  var exports_ghost_cursor_client = {};\n\n  // src/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.ts\n  var SCREENSTUDIO_POINTER_MACOS_TAHOE_DATA_URL = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjE4IiBoZWlnaHQ9Ijk1OCIgdmlld0JveD0iMCAwIDYxOCA5NTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfMzg0XzI3KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTI3LjA2MiAzNy4wMzMxTDU0MC42OTYgNDUxLjU1NUM1OTIuNjUzIDUwMy42NiA1NTUuNzk0IDU5Mi41NzQgNDgyLjIyNiA1OTIuNTc0TDQyMS44MzEgNTkyLjU2OUw0ODEuODIxIDczNS4wNTRDNDkyLjMzMSA3NjAuMDIxIDQ5Mi40NzkgNzg3LjY1MiA0ODIuMjY1IDgxMi43NjdDNDcyLjAwMiA4MzcuOTMyIDQ1Mi41NjEgODU3LjU3IDQyNy40OTYgODY4LjA4QzQxNC44NjQgODczLjM1OSA0MDEuNjQgODc2LjAyNCAzODguMTIxIDg3Ni4wMjRDMzQ3LjExNyA4NzYuMDI0IDMxMC4zNTggODUxLjYgMjk0LjQ3IDgxMy44MDRMMjMxLjQyIDY2My45MThMMTkwLjM2OCA3MDAuMzM3QzEzNy4wMjkgNzQ3LjUwOCA1MyA3MDkuNjYzIDUzIDYzOC40MTNWNjcuNjc0NEM1MyAyOC45OTAzIDk5LjcyNjggOS42NDgyOCAxMjcuMDYyIDM3LjAzMzFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwMi4zMTYgOTkuNjUyQzEwMi4zMTYgOTMuMTg4MiAxMTAuMTYyIDg5LjkzMTYgMTE0LjcwMSA5NC41MjA0TDUwNC44OTcgNDg1LjU1NUM1MjYuMTY0IDUwNi44NzEgNTExLjA2NSA1NDMuMjM2IDQ4MC45NjcgNTQzLjIzNkwzNDcuNTQ2IDU0My4xNjFMNDM2LjM0MiA3NTQuMTQzQzQ0Ny41NDIgNzgwLjc4OCA0MzUuMDA5IDgxMS40MjkgNDA4LjQxNCA4MjIuNTgxQzM4MS43MiA4MzMuNzgxIDM1MS4xMjggODIxLjI5OCAzMzkuOTc3IDc5NC43MDJMMjUwLjI5MyA1ODEuMzUyTDE1OC41MTcgNjYyLjY0NEMxMzcuOTkxIDY4MC44MDEgMTA2LjMxOSA2NjguMTQ1IDEwMi42NjQgNjQyLjMyM0wxMDIuMzE2IDYzNy4zMzFWOTkuNjUyWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzM4NF8yNyIgeD0iMC4zNCIgeT0iMC43OTkyMTkiIHdpZHRoPSI2MTcuMzIiIGhlaWdodD0iOTU3LjE0NCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIyOS4yNiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyNi4zMyIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuNjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18zODRfMjciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMzg0XzI3IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPg==\";\n\n  // src/ghost-cursor-client.ts\n  var isTopFrame = (() => {\n    try {\n      return window === window.top;\n    } catch {\n      return false;\n    }\n  })();\n  var CURSOR_ID = \"__playwriter_ghost_cursor__\";\n  var SCREENSTUDIO_POINTER_ASPECT_RATIO = 618 / 958;\n  var SCREENSTUDIO_HOTSPOT_X_RATIO = 0.14;\n  var SCREENSTUDIO_HOTSPOT_Y_RATIO = 0.06;\n  var MINIMAL_TRIANGLE_HOTSPOT_X_RATIO = 0.07;\n  var MINIMAL_TRIANGLE_HOTSPOT_Y_RATIO = 0.06;\n  var MOVE_EASING = \"cubic-bezier(0.65, 0, 0.35, 1)\";\n  var PRESS_EASING = \"cubic-bezier(0.23, 1, 0.32, 1)\";\n  var PRESS_DURATION_MS = 140;\n  var IDLE_HIDE_DELAY_MS = 5000;\n  var IDLE_FADE_OUT_MS = 600;\n  var DEFAULT_OPTIONS = {\n    style: \"minimal\",\n    color: \"#111827\",\n    size: 22,\n    zIndex: 2147483647,\n    easing: MOVE_EASING,\n    minDurationMs: 220,\n    maxDurationMs: 1500,\n    speedPxPerMs: 1.2\n  };\n  var runtime = {\n    outerElement: null,\n    innerElement: null,\n    options: DEFAULT_OPTIONS,\n    x: 0,\n    y: 0,\n    scale: 1,\n    hasPosition: false,\n    enabled: false,\n    idleHidden: false\n  };\n  var idleHideTimer = null;\n  function clamp(options) {\n    const { value, min, max } = options;\n    return Math.min(max, Math.max(min, value));\n  }\n  function mergeOptions(options) {\n    if (!options) {\n      return DEFAULT_OPTIONS;\n    }\n    return {\n      style: options.style ?? DEFAULT_OPTIONS.style,\n      color: options.color ?? DEFAULT_OPTIONS.color,\n      size: options.size ?? DEFAULT_OPTIONS.size,\n      zIndex: options.zIndex ?? DEFAULT_OPTIONS.zIndex,\n      easing: options.easing ?? DEFAULT_OPTIONS.easing,\n      minDurationMs: options.minDurationMs ?? DEFAULT_OPTIONS.minDurationMs,\n      maxDurationMs: options.maxDurationMs ?? DEFAULT_OPTIONS.maxDurationMs,\n      speedPxPerMs: options.speedPxPerMs ?? DEFAULT_OPTIONS.speedPxPerMs\n    };\n  }\n  function getCursorDimensions() {\n    if (runtime.options.style === \"screenstudio\") {\n      const height = runtime.options.size;\n      const width = Math.max(10, Math.round(height * SCREENSTUDIO_POINTER_ASPECT_RATIO));\n      return { width, height };\n    }\n    if (runtime.options.style === \"minimal\") {\n      const size = Math.max(12, runtime.options.size);\n      return { width: size, height: size };\n    }\n    return { width: runtime.options.size, height: runtime.options.size };\n  }\n  function getHotspotOffsetPx() {\n    const dimensions = getCursorDimensions();\n    if (runtime.options.style === \"screenstudio\") {\n      return {\n        x: Math.round(dimensions.width * SCREENSTUDIO_HOTSPOT_X_RATIO),\n        y: Math.round(dimensions.height * SCREENSTUDIO_HOTSPOT_Y_RATIO)\n      };\n    }\n    if (runtime.options.style === \"minimal\") {\n      return {\n        x: Math.round(dimensions.width * MINIMAL_TRIANGLE_HOTSPOT_X_RATIO),\n        y: Math.round(dimensions.height * MINIMAL_TRIANGLE_HOTSPOT_Y_RATIO)\n      };\n    }\n    return {\n      x: Math.round(dimensions.width / 2),\n      y: Math.round(dimensions.height / 2)\n    };\n  }\n  function getBaseOpacity() {\n    if (runtime.options.style === \"screenstudio\") {\n      return \"0.95\";\n    }\n    if (runtime.options.style === \"minimal\") {\n      return \"1\";\n    }\n    return \"0.72\";\n  }\n  function applyTranslate() {\n    if (!runtime.outerElement) {\n      return;\n    }\n    const hotspot = getHotspotOffsetPx();\n    runtime.outerElement.style.transform = `translate3d(${runtime.x - hotspot.x}px, ${runtime.y - hotspot.y}px, 0)`;\n  }\n  function applyScale() {\n    if (!runtime.innerElement) {\n      return;\n    }\n    runtime.innerElement.style.transform = `scale(${runtime.scale})`;\n  }\n  function computeDurationMs(options) {\n    if (!runtime.hasPosition) {\n      return 0;\n    }\n    const dx = options.targetX - runtime.x;\n    const dy = options.targetY - runtime.y;\n    const distance = Math.hypot(dx, dy);\n    const rawDurationMs = distance / runtime.options.speedPxPerMs;\n    return clamp({\n      value: rawDurationMs,\n      min: runtime.options.minDurationMs,\n      max: runtime.options.maxDurationMs\n    });\n  }\n  function createCursorElement() {\n    const outer = document.createElement(\"div\");\n    outer.id = CURSOR_ID;\n    outer.setAttribute(\"aria-hidden\", \"true\");\n    outer.style.position = \"fixed\";\n    outer.style.left = \"0\";\n    outer.style.top = \"0\";\n    outer.style.pointerEvents = \"none\";\n    outer.style.zIndex = `${runtime.options.zIndex}`;\n    outer.style.transitionProperty = \"transform\";\n    outer.style.transitionTimingFunction = runtime.options.easing;\n    outer.style.transitionDuration = \"0ms\";\n    outer.style.willChange = \"transform\";\n    const inner = document.createElement(\"div\");\n    inner.style.transitionProperty = \"transform, opacity\";\n    inner.style.transitionTimingFunction = PRESS_EASING;\n    inner.style.transitionDuration = `${PRESS_DURATION_MS}ms`;\n    inner.style.opacity = getBaseOpacity();\n    outer.appendChild(inner);\n    runtime.outerElement = outer;\n    runtime.innerElement = inner;\n    applyRuntimeVisualOptions();\n    return outer;\n  }\n  function ensureCursorElement() {\n    const existing = document.getElementById(CURSOR_ID);\n    if (existing) {\n      runtime.outerElement = existing;\n      runtime.innerElement = existing.firstElementChild || null;\n      return existing;\n    }\n    const outer = createCursorElement();\n    const root = document.documentElement || document.body;\n    root.appendChild(outer);\n    return outer;\n  }\n  function applyRuntimeVisualOptions() {\n    if (!runtime.innerElement) {\n      return;\n    }\n    const dimensions = getCursorDimensions();\n    runtime.innerElement.style.width = `${dimensions.width}px`;\n    runtime.innerElement.style.height = `${dimensions.height}px`;\n    if (runtime.outerElement) {\n      runtime.outerElement.style.zIndex = `${runtime.options.zIndex}`;\n      runtime.outerElement.style.transitionTimingFunction = runtime.options.easing;\n    }\n    const hotspot = getHotspotOffsetPx();\n    runtime.innerElement.style.transformOrigin = `${hotspot.x}px ${hotspot.y}px`;\n    if (runtime.options.style === \"screenstudio\") {\n      runtime.innerElement.style.borderRadius = \"0\";\n      runtime.innerElement.style.border = \"none\";\n      runtime.innerElement.style.backgroundColor = \"transparent\";\n      runtime.innerElement.style.backgroundImage = `url(\"${SCREENSTUDIO_POINTER_MACOS_TAHOE_DATA_URL}\")`;\n      runtime.innerElement.style.backgroundRepeat = \"no-repeat\";\n      runtime.innerElement.style.backgroundPosition = \"left top\";\n      runtime.innerElement.style.backgroundSize = \"contain\";\n      runtime.innerElement.style.backdropFilter = \"none\";\n      runtime.innerElement.style.filter = \"none\";\n      runtime.innerElement.style.boxShadow = \"none\";\n      runtime.innerElement.style.opacity = getBaseOpacity();\n      return;\n    }\n    if (runtime.options.style === \"minimal\") {\n      const triangleSvg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"-1 -1 26 26\"><path fill=\"white\" stroke=\"${runtime.options.color}\" stroke-width=\"1.5\" stroke-linejoin=\"round\" d=\"m23.284 19.124l-6.866-6.895a.4.4 0 0 1-.118-.296a.43.43 0 0 1 .163-.282l4.439-3.077a1.48 1.48 0 0 0 .621-1.48a1.48 1.48 0 0 0-1.036-1.198L1.623.302a1.14 1.14 0 0 0-1.11.282A1.13 1.13 0 0 0 .29 1.649L5.928 20.44a1.48 1.48 0 0 0 1.183 1.035a1.48 1.48 0 0 0 1.48-.621l3.078-4.44a.37.37 0 0 1 .31-.118a.43.43 0 0 1 .296.104l6.91 6.91a1.48 1.48 0 0 0 2.087 0l2.086-2.086a1.48 1.48 0 0 0-.074-2.101\"/></svg>`;\n      const triangleDataUrl = `url(\"data:image/svg+xml,${encodeURIComponent(triangleSvg)}\")`;\n      runtime.innerElement.style.borderRadius = \"0\";\n      runtime.innerElement.style.border = \"none\";\n      runtime.innerElement.style.backgroundColor = \"transparent\";\n      runtime.innerElement.style.backgroundImage = triangleDataUrl;\n      runtime.innerElement.style.backgroundRepeat = \"no-repeat\";\n      runtime.innerElement.style.backgroundSize = \"contain\";\n      runtime.innerElement.style.backgroundPosition = \"left top\";\n      runtime.innerElement.style.backdropFilter = \"none\";\n      runtime.innerElement.style.boxShadow = \"none\";\n      runtime.innerElement.style.filter = \"drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4))\";\n      runtime.innerElement.style.opacity = getBaseOpacity();\n      return;\n    }\n    runtime.innerElement.style.borderRadius = \"999px\";\n    runtime.innerElement.style.border = \"none\";\n    runtime.innerElement.style.backgroundColor = runtime.options.color;\n    runtime.innerElement.style.backgroundImage = \"none\";\n    runtime.innerElement.style.backdropFilter = \"none\";\n    runtime.innerElement.style.filter = \"none\";\n    runtime.innerElement.style.boxShadow = \"0 2px 10px rgba(0, 0, 0, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.55)\";\n    runtime.innerElement.style.opacity = getBaseOpacity();\n  }\n  function clearIdleHideTimer() {\n    if (idleHideTimer !== null) {\n      clearTimeout(idleHideTimer);\n      idleHideTimer = null;\n    }\n  }\n  function scheduleIdleHide() {\n    clearIdleHideTimer();\n    idleHideTimer = setTimeout(() => {\n      idleHideTimer = null;\n      if (!runtime.enabled || !runtime.innerElement) {\n        return;\n      }\n      runtime.idleHidden = true;\n      runtime.innerElement.style.transitionDuration = `${IDLE_FADE_OUT_MS}ms`;\n      runtime.innerElement.style.transitionTimingFunction = PRESS_EASING;\n      runtime.innerElement.style.opacity = \"0\";\n    }, IDLE_HIDE_DELAY_MS);\n  }\n  function wakeFromIdle(options) {\n    runtime.x = options.x;\n    runtime.y = options.y;\n    runtime.hasPosition = true;\n    if (runtime.innerElement) {\n      runtime.innerElement.style.transitionDuration = `${PRESS_DURATION_MS}ms`;\n      runtime.innerElement.style.transitionTimingFunction = PRESS_EASING;\n      runtime.innerElement.style.opacity = getBaseOpacity();\n    }\n  }\n  function moveCursor(options) {\n    if (!runtime.enabled) {\n      return;\n    }\n    ensureCursorElement();\n    const durationMs = computeDurationMs({ targetX: options.x, targetY: options.y });\n    if (runtime.outerElement) {\n      runtime.outerElement.style.transitionDuration = `${Math.round(durationMs)}ms`;\n      runtime.outerElement.style.transitionTimingFunction = runtime.options.easing;\n    }\n    runtime.x = options.x;\n    runtime.y = options.y;\n    runtime.hasPosition = true;\n    applyTranslate();\n  }\n  function setPressed(options) {\n    if (!runtime.enabled || !runtime.innerElement) {\n      return;\n    }\n    runtime.scale = options.pressed ? runtime.options.style === \"dot\" ? 0.92 : 0.95 : 1;\n    runtime.innerElement.style.transitionDuration = `${PRESS_DURATION_MS}ms`;\n    runtime.innerElement.style.transitionTimingFunction = PRESS_EASING;\n    runtime.innerElement.style.opacity = options.pressed ? \"1\" : getBaseOpacity();\n    applyScale();\n  }\n  function enable(options) {\n    runtime.options = mergeOptions(options);\n    runtime.enabled = true;\n    ensureCursorElement();\n    applyRuntimeVisualOptions();\n    if (!runtime.hasPosition) {\n      runtime.x = Math.round(window.innerWidth / 2);\n      runtime.y = Math.round(window.innerHeight / 2);\n      runtime.scale = 1;\n      runtime.hasPosition = true;\n    }\n    runtime.idleHidden = false;\n    if (runtime.innerElement) {\n      runtime.innerElement.style.opacity = getBaseOpacity();\n    }\n    applyTranslate();\n    applyScale();\n    scheduleIdleHide();\n  }\n  function disable() {\n    runtime.enabled = false;\n    runtime.scale = 1;\n    runtime.hasPosition = false;\n    runtime.idleHidden = false;\n    clearIdleHideTimer();\n    if (runtime.outerElement) {\n      runtime.outerElement.remove();\n      runtime.outerElement = null;\n      runtime.innerElement = null;\n    }\n  }\n  function applyMouseAction(action) {\n    if (!runtime.enabled) {\n      return;\n    }\n    if (runtime.idleHidden) {\n      runtime.idleHidden = false;\n      wakeFromIdle({ x: action.x, y: action.y });\n    }\n    if (action.type === \"move\" || action.type === \"wheel\") {\n      moveCursor({ x: action.x, y: action.y });\n    } else if (action.type === \"down\") {\n      moveCursor({ x: action.x, y: action.y });\n      setPressed({ pressed: true });\n    } else if (action.type === \"up\") {\n      moveCursor({ x: action.x, y: action.y });\n      setPressed({ pressed: false });\n    }\n    scheduleIdleHide();\n  }\n  var api = {\n    enable,\n    disable,\n    applyMouseAction,\n    isEnabled: () => {\n      return runtime.enabled;\n    }\n  };\n  if (isTopFrame) {\n    globalThis.__playwriterGhostCursor = api;\n    try {\n      if (document.readyState === \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", () => {\n          try {\n            api.enable();\n          } catch {}\n        }, { once: true });\n      } else {\n        api.enable();\n      }\n    } catch {}\n  }\n})();\n";
+//#endregion
 //#region src/recording.ts
 var activeRecordings = /* @__PURE__ */ new Map();
 var offscreenDocumentCreating = null;
@@ -295,6 +629,13 @@ var RELAY_PORT = 19988;
 function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
+function createInstallId() {
+	const values = new Uint32Array(2);
+	crypto.getRandomValues(values);
+	return Array.from(values).map((value) => {
+		return value.toString(36);
+	}).join("");
+}
 async function detectBrowserName() {
 	if (chrome.ghostPublicAPI) return "Ghost";
 	const brands = navigator.userAgentData?.brands;
@@ -318,6 +659,7 @@ async function detectBrowserName() {
 	return "Chromium";
 }
 var identityPromise = null;
+var installIdPromise = null;
 var tabSessionScope = (() => {
 	const values = new Uint32Array(2);
 	crypto.getRandomValues(values);
@@ -325,22 +667,42 @@ var tabSessionScope = (() => {
 		return value.toString(36);
 	}).join("");
 })();
+async function getInstallId() {
+	if (installIdPromise) return installIdPromise;
+	installIdPromise = (async () => {
+		const existing = await chrome.storage.local.get("playwriterInstallId");
+		const storedInstallId = typeof existing.playwriterInstallId === "string" ? existing.playwriterInstallId : "";
+		if (storedInstallId) return storedInstallId;
+		const installId = createInstallId();
+		await chrome.storage.local.set({ playwriterInstallId: installId });
+		return installId;
+	})().catch((error) => {
+		installIdPromise = null;
+		throw error;
+	});
+	return installIdPromise;
+}
 async function getExtensionIdentity() {
 	if (identityPromise) return identityPromise;
 	identityPromise = (async () => {
 		const browser = await detectBrowserName();
+		const installId = await getInstallId().catch(() => {
+			return tabSessionScope;
+		});
 		try {
 			const info = await chrome.identity.getProfileUserInfo({ accountStatus: "ANY" });
 			return {
 				browser,
 				email: info.email || "",
-				id: info.id || ""
+				id: info.id || "",
+				installId
 			};
 		} catch {
 			return {
 				browser,
 				email: "",
-				id: ""
+				id: "",
+				installId
 			};
 		}
 	})();
@@ -415,7 +777,8 @@ var ConnectionManager = class {
 		if (identity.browser) relayUrl.searchParams.set("browser", identity.browser);
 		if (identity.email) relayUrl.searchParams.set("email", identity.email);
 		if (identity.id) relayUrl.searchParams.set("id", identity.id);
-		relayUrl.searchParams.set("v", "0.0.103");
+		if (identity.installId) relayUrl.searchParams.set("installId", identity.installId);
+		relayUrl.searchParams.set("v", "0.1.0");
 		logger.debug("Creating WebSocket connection to:", relayUrl);
 		const socket = new WebSocket(relayUrl.toString());
 		await new Promise((resolve, reject) => {
@@ -677,7 +1040,7 @@ var ConnectionManager = class {
 						method: "GET",
 						signal: AbortSignal.timeout(2e3)
 					})).json();
-					if (!data.connected || data.activeTargets === 0) {
+					if (!data.connected) {
 						store.setState({
 							connectionState: "idle",
 							errorText: void 0
@@ -1158,6 +1521,12 @@ async function attachTab(tabId, { skipAttachedEvent = false } = {}) {
     `;
 		await chrome.debugger.sendCommand(debuggee, "Page.addScriptToEvaluateOnNewDocument", { source: contextMenuScript });
 		await chrome.debugger.sendCommand(debuggee, "Runtime.evaluate", { expression: contextMenuScript });
+		try {
+			await chrome.debugger.sendCommand(debuggee, "Page.addScriptToEvaluateOnNewDocument", { source: ghost_cursor_client_default });
+			await chrome.debugger.sendCommand(debuggee, "Runtime.evaluate", { expression: ghost_cursor_client_default });
+		} catch (err) {
+			logger.debug("Could not inject ghost cursor (restricted page):", err.message);
+		}
 		const targetInfo = (await chrome.debugger.sendCommand(debuggee, "Target.getTargetInfo")).targetInfo;
 		if (!targetInfo.url || targetInfo.url === "" || targetInfo.url === ":") logger.error("WARNING: Target.attachedToTarget will be sent with empty URL! tabId:", tabId, "targetInfo:", JSON.stringify(targetInfo));
 		const attachOrder = nextSessionId;
@@ -1191,6 +1560,16 @@ async function attachTab(tabId, { skipAttachedEvent = false } = {}) {
 			}
 		});
 		logger.debug("Tab attached successfully:", tabId, "sessionId:", sessionId, "targetId:", targetInfo.targetId, "url:", targetInfo.url, "skipAttachedEvent:", skipAttachedEvent);
+		chrome.scripting.executeScript({
+			target: {
+				tabId,
+				allFrames: false
+			},
+			world: "MAIN",
+			func: initPlaywriterToolbar
+		}).catch((err) => {
+			logger.debug("Could not inject toolbar (restricted page):", err.message);
+		});
 		return {
 			targetInfo,
 			sessionId
@@ -1210,6 +1589,20 @@ function detachTab(tabId, shouldDetachDebugger) {
 		return;
 	}
 	cleanupRecordingForTab(tabId);
+	chrome.scripting.executeScript({
+		target: { tabId },
+		world: "MAIN",
+		func: () => {
+			window.__playwriterToolbarDestroy?.();
+		}
+	}).catch(() => {});
+	chrome.scripting.executeScript({
+		target: { tabId },
+		world: "MAIN",
+		func: () => {
+			globalThis.__playwriterGhostCursor?.disable?.();
+		}
+	}).catch(() => {});
 	logger.warn(`DISCONNECT: detachTab tabId=${tabId} shouldDetach=${shouldDetachDebugger} stack=${getCallStack()}`);
 	if (tab.sessionId && tab.targetId) sendMessage({
 		method: "forwardCDPEvent",
@@ -1254,14 +1647,31 @@ async function connectTab(tabId) {
 				};
 			});
 		} else if (isWsError) logger.debug(`WS connection failed, keeping tab ${tabId} in connecting state for retry`);
-		else store.setState((state) => {
-			const newTabs = new Map(state.tabs);
-			newTabs.set(tabId, {
-				state: "error",
-				errorText: `Error: ${error.message}`
+		else {
+			let tabStillExists = true;
+			try {
+				await chrome.tabs.get(tabId);
+			} catch {
+				tabStillExists = false;
+			}
+			if (!tabStillExists) {
+				logger.debug(`Tab ${tabId} was closed during connect, dropping error state`);
+				store.setState((state) => {
+					const newTabs = new Map(state.tabs);
+					newTabs.delete(tabId);
+					return { tabs: newTabs };
+				});
+				return;
+			}
+			store.setState((state) => {
+				const newTabs = new Map(state.tabs);
+				newTabs.set(tabId, {
+					state: "error",
+					errorText: `Error: ${error.message}`
+				});
+				return { tabs: newTabs };
 			});
-			return { tabs: newTabs };
-		});
+		}
 	}
 }
 function setTabConnecting(tabId) {
@@ -1478,6 +1888,7 @@ async function updateIcons() {
 	}
 }
 async function onTabRemoved(tabId) {
+	popupSourceTabMap.delete(tabId);
 	const { tabs } = store.getState();
 	if (!tabs.has(tabId)) return;
 	logger.debug(`Connected tab ${tabId} was closed, disconnecting`);
@@ -1598,6 +2009,75 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 		logger.debug("onTabUpdated handler error:", e);
 	});
 });
+var popupSourceTabMap = /* @__PURE__ */ new Map();
+chrome.webNavigation.onCreatedNavigationTarget.addListener((details) => {
+	popupSourceTabMap.set(details.tabId, details.sourceTabId);
+	setTimeout(() => {
+		popupSourceTabMap.delete(details.tabId);
+	}, 1e4);
+});
+chrome.windows.onCreated.addListener(async (popupWindow) => {
+	if (popupWindow.type !== "popup" || popupWindow.id === void 0) return;
+	try {
+		let popupTabs = [];
+		for (let attempt = 0; attempt < 5; attempt++) {
+			popupTabs = await chrome.tabs.query({ windowId: popupWindow.id });
+			if (popupTabs.length > 0) break;
+			await sleep(20);
+		}
+		const tabIds = popupTabs.map((t) => t.id).filter((id) => {
+			return id !== void 0;
+		});
+		if (tabIds.length === 0) {
+			logger.debug(`Popup window ${popupWindow.id} has no tabs after retry, skipping`);
+			return;
+		}
+		const { tabs: connectedTabs } = store.getState();
+		let sourceTabId;
+		for (const tabId of tabIds) {
+			const candidate = popupSourceTabMap.get(tabId);
+			if (candidate !== void 0 && connectedTabs.has(candidate)) {
+				sourceTabId = candidate;
+				break;
+			}
+		}
+		for (const tabId of tabIds) popupSourceTabMap.delete(tabId);
+		if (sourceTabId === void 0) {
+			logger.debug(`Popup window ${popupWindow.id} not opened by a Playwriter-connected tab, leaving alone (tabs=${JSON.stringify(tabIds)})`);
+			return;
+		}
+		let destinationWindowId;
+		try {
+			const sourceTab = await chrome.tabs.get(sourceTabId);
+			if (sourceTab.windowId === void 0) {
+				const focused = await chrome.windows.getLastFocused({ populate: false });
+				if (focused.id === void 0 || focused.id === popupWindow.id) return;
+				destinationWindowId = focused.id;
+			} else destinationWindowId = sourceTab.windowId;
+		} catch (e) {
+			logger.debug(`Source tab ${sourceTabId} no longer exists, skipping relocation:`, e);
+			return;
+		}
+		logger.debug(`Relocating ${tabIds.length} popup tab(s) from window ${popupWindow.id} into source window ${destinationWindowId} (sourceTabId=${sourceTabId})`);
+		await chrome.tabs.move(tabIds, {
+			windowId: destinationWindowId,
+			index: -1
+		});
+		try {
+			await chrome.windows.remove(popupWindow.id);
+		} catch {}
+		for (const tabId of tabIds) {
+			if (connectedTabs.has(tabId)) continue;
+			try {
+				await connectTab(tabId);
+			} catch (e) {
+				logger.warn(`Failed to auto-connect relocated popup tab ${tabId}:`, e);
+			}
+		}
+	} catch (e) {
+		logger.warn("Failed to relocate popup window:", e);
+	}
+});
 chrome.contextMenus?.onClicked.addListener(async (info, tab) => {
 	if (info.menuItemId !== "playwriter-pin-element" || !tab?.id) return;
 	const tabInfo = store.getState().tabs.get(tab.id);
@@ -1606,21 +2086,19 @@ chrome.contextMenus?.onClicked.addListener(async (info, tab) => {
 		return;
 	}
 	const debuggee = { tabId: tab.id };
-	const count = (tabInfo.pinnedCount || 0) + 1;
-	store.setState((state) => {
-		const newTabs = new Map(state.tabs);
-		const existing = newTabs.get(tab.id);
-		if (existing) newTabs.set(tab.id, {
-			...existing,
-			pinnedCount: count
-		});
-		return { tabs: newTabs };
-	});
-	const name = `playwriterPinnedElem${count}`;
 	const connectedTabs = Array.from(store.getState().tabs.entries()).filter(([_, t]) => t.state === "connected").sort((a, b) => (a[1].attachOrder ?? 0) - (b[1].attachOrder ?? 0));
 	const pageIndex = connectedTabs.findIndex(([id]) => id === tab.id);
 	const hasMultiplePages = connectedTabs.length > 1;
 	try {
+		const name = `playwriterPinnedElem${(await chrome.debugger.sendCommand(debuggee, "Runtime.evaluate", {
+			expression: `
+        (function() {
+          window.__playwriterPinCount = (window.__playwriterPinCount || 0) + 1;
+          return window.__playwriterPinCount;
+        })()
+      `,
+			returnByValue: true
+		})).result?.value ?? 1}`;
 		const result = await chrome.debugger.sendCommand(debuggee, "Runtime.evaluate", {
 			expression: `
         if (window.__playwriter_lastRightClicked) {
@@ -1701,4 +2179,20 @@ chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
 	}
 	return false;
 });
+chrome.webNavigation.onDOMContentLoaded.addListener((details) => {
+	if (details.frameId !== 0) return;
+	const { tabs } = store.getState();
+	const tabInfo = tabs.get(details.tabId);
+	if (!tabInfo || tabInfo.state !== "connected") return;
+	chrome.scripting.executeScript({
+		target: {
+			tabId: details.tabId,
+			allFrames: false
+		},
+		world: "MAIN",
+		func: initPlaywriterToolbar
+	}).catch((err) => {
+		logger.debug("Could not re-inject toolbar after navigation:", err.message);
+	});
+});
 //#endregion