Add PO Token Grabber browser extension (one-click visitor data + gvs PO token)

Chrome/Edge MV3 extension under extension/: a read-only webRequest listener captures the
gvs `pot` from googlevideo videoplayback requests, and the popup reads `visitor_data` from
the active YouTube tab's ytcfg (MAIN-world scripting). Formats the PO token as
`web.gvs+<token>` for one-click copy into the Space's PO-token / visitor-data fields.
README points users to it as the easy alternative to manual DevTools extraction.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -68,6 +68,15 @@ start failing.
 Paste the values into the app's **"YouTube access — cookies / proxy"** panel:
 **PO token** field and **Visitor data** field.
 
+### Easiest: the PO Token Grabber extension (one click)
+
+This repo ships a tiny Chrome/Edge extension in [`extension/`](extension/) that reads the
+PO token + visitor data for you. Download that folder, load it unpacked
+(`chrome://extensions` → Developer mode → Load unpacked), open a YouTube video, press
+play, click the extension, and **Copy** each value into the Space. See
+[`extension/README.md`](extension/README.md). (It's unpublished/sideloaded and may need
+updates when YouTube changes; the manual steps below always work as a fallback.)
+
 ### Get them manually (web client, ~2 min)
 
 1. Open a fresh **Incognito** window and go to <https://www.youtube.com> (a throwaway

extension/README.md

@@ -0,0 +1,50 @@
+# TutorialMaker — PO Token Grabber (browser extension)
+
+A tiny **Chrome/Edge (Manifest V3)** extension that reads the two values the
+[TutorialMaker Space](https://huggingface.co/spaces/vivekchakraverty/TutorialMaker) needs
+to get past YouTube's bot-check **without a proxy**:
+
+- **`visitor_data`** — read from the YouTube page's `ytcfg`.
+- **gvs `pot`** (Proof-of-Origin token) — captured from the player's
+  `googlevideo.com/videoplayback` request.
+
+It just surfaces these for one-click copy; it sends nothing anywhere.
+
+## Install (unpacked)
+
+1. Open `chrome://extensions` (or `edge://extensions`).
+2. Turn on **Developer mode** (top-right).
+3. Click **Load unpacked** and select this `extension/` folder.
+
+> Firefox: it's MV3-compatible in spirit, but Firefox needs a `background.scripts` entry
+> and a `browser_specific_settings` block instead of `service_worker`. Minor manifest
+> tweaks required.
+
+## Use
+
+1. **Use a throwaway Google account**, not your main one.
+2. Open a YouTube **video** and press **play** (this makes the player fetch
+   `videoplayback`, which carries the `pot`).
+3. Click the extension icon.
+4. **Copy PO token** → paste into the Space's **"PO token"** field.
+   **Copy visitor data** → paste into the Space's **"Visitor data"** field.
+5. Run the Space. Tokens expire within hours — re-grab when downloads start failing.
+
+## How it works
+
+- `background.js` — a read-only `webRequest` listener on `*://*.googlevideo.com/videoplayback*`
+  pulls the `pot` (and `c`/client) query params and stores the latest in
+  `chrome.storage.session`. It prefers `c=WEB` tokens (what yt-dlp's web client uses).
+- `popup.js` — on open, runs a MAIN-world script via `chrome.scripting` on the active
+  YouTube tab to read `visitor_data`, reads the captured `pot`, and formats the PO token
+  as `web.gvs+<token>`.
+
+## Caveats
+
+- **Unpublished / sideloaded** — you load it yourself; trust accordingly. The code is
+  small and dependency-free on purpose.
+- **YouTube changes break it** — the `pot`/`visitor_data` locations move over time; this
+  may need updates. The authoritative manual method lives in the
+  [yt-dlp PO Token Guide](https://github.com/yt-dlp/yt-dlp/wiki/PO-Token-Guide).
+- **Per session** — tokens are short-lived; this is a one-click refresh, not a permanent fix.
+- Automating bot-check bypass is the same YouTube-ToS gray area as the rest of this tooling.

extension/background.js

@@ -0,0 +1,32 @@
+// Service worker: watch the player's videoplayback requests and capture the gvs PO token.
+//
+// YouTube's web player fetches video data from *.googlevideo.com/videoplayback?...&pot=...
+// where `pot` is the gvs Proof-of-Origin token and `c` is the client (e.g. WEB). We read
+// it (read-only; no blocking) and stash the latest into session storage for the popup.
+
+const FILTER = { urls: ["*://*.googlevideo.com/videoplayback*"] };
+
+chrome.webRequest.onBeforeRequest.addListener(
+  (details) => {
+    try {
+      const u = new URL(details.url);
+      const pot = u.searchParams.get("pot");
+      if (!pot) return;
+      const client = u.searchParams.get("c") || "";
+      // Prefer WEB tokens (what yt-dlp's web client needs); still record others as backup.
+      chrome.storage.session.get(["gvsPot", "gvsClient"]).then((cur) => {
+        const haveWeb = cur.gvsClient === "WEB";
+        if (!haveWeb || client === "WEB") {
+          chrome.storage.session.set({
+            gvsPot: pot,
+            gvsClient: client,
+            potTime: Date.now(),
+          });
+        }
+      });
+    } catch (e) {
+      // ignore malformed URLs
+    }
+  },
+  FILTER
+);

extension/manifest.json

@@ -0,0 +1,13 @@
+{
+  "manifest_version": 3,
+  "name": "TutorialMaker PO Token Grabber",
+  "version": "1.0.0",
+  "description": "Reads your YouTube visitor data and gvs PO token so you can paste them into the TutorialMaker Space.",
+  "permissions": ["webRequest", "storage", "scripting", "tabs"],
+  "host_permissions": ["*://*.youtube.com/*", "*://*.googlevideo.com/*"],
+  "background": { "service_worker": "background.js" },
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "PO Token Grabber"
+  }
+}

extension/popup.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    body { font-family: system-ui, sans-serif; width: 340px; margin: 0; padding: 12px; }
+    h1 { font-size: 14px; margin: 0 0 8px; }
+    label { display: block; font-size: 11px; color: #444; margin: 8px 0 2px; }
+    textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 11px;
+               resize: vertical; }
+    .row { display: flex; gap: 6px; margin-top: 6px; }
+    button { flex: 1; padding: 6px; font-size: 12px; cursor: pointer; }
+    #status { margin-top: 10px; font-size: 11px; min-height: 14px; }
+    #status.ok { color: #1a7f37; }
+    #status.warn { color: #9a6700; }
+    .hint { font-size: 10px; color: #666; margin-top: 8px; line-height: 1.4; }
+  </style>
+</head>
+<body>
+  <h1>PO Token Grabber</h1>
+
+  <label for="potField">PO token (paste into the Space's "PO token" field)</label>
+  <textarea id="potField" rows="2" readonly placeholder="web.gvs+…"></textarea>
+
+  <label for="visField">Visitor data (paste into the Space's "Visitor data" field)</label>
+  <textarea id="visField" rows="2" readonly placeholder="Cgt…%3D%3D"></textarea>
+
+  <div class="row">
+    <button id="copyPot">Copy PO token</button>
+    <button id="copyVis">Copy visitor data</button>
+  </div>
+  <div class="row">
+    <button id="refresh">Refresh</button>
+  </div>
+
+  <div id="status"></div>
+  <div class="hint">
+    Tip: open a YouTube video, press <b>play</b> (so the token is generated), then click
+    this icon. Use a throwaway account. Tokens expire within hours.
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

extension/popup.js

@@ -0,0 +1,100 @@
+// Popup: read visitor_data from the active YouTube tab (main world) and the captured gvs
+// PO token from session storage, then offer ready-to-paste values for the Space.
+
+// Runs in the page's MAIN world via chrome.scripting; must be self-contained.
+function readVisitorData() {
+  try {
+    if (window.ytcfg && typeof window.ytcfg.get === "function") {
+      const v = window.ytcfg.get("VISITOR_DATA");
+      if (v) return v;
+      const ctx = window.ytcfg.get("INNERTUBE_CONTEXT");
+      if (ctx && ctx.client && ctx.client.visitorData) return ctx.client.visitorData;
+    }
+  } catch (e) {}
+  try {
+    const r = window.ytInitialPlayerResponse;
+    if (r && r.responseContext && r.responseContext.visitorData) {
+      return r.responseContext.visitorData;
+    }
+  } catch (e) {}
+  return null;
+}
+
+function setStatus(msg, kind) {
+  const el = document.getElementById("status");
+  el.textContent = msg;
+  el.className = kind || "";
+}
+
+async function getActiveTab() {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  return tab;
+}
+
+function isYouTube(url) {
+  return /^https?:\/\/([^/]*\.)?youtube\.com\//.test(url || "");
+}
+
+async function load() {
+  const potEl = document.getElementById("potField");
+  const visEl = document.getElementById("visField");
+
+  const tab = await getActiveTab();
+  let visitor = null;
+  if (tab && isYouTube(tab.url)) {
+    try {
+      const res = await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        world: "MAIN",
+        func: readVisitorData,
+      });
+      visitor = res && res[0] ? res[0].result : null;
+    } catch (e) {}
+  }
+
+  const { gvsPot, gvsClient, potTime } = await chrome.storage.session.get([
+    "gvsPot",
+    "gvsClient",
+    "potTime",
+  ]);
+
+  visEl.value = visitor || "";
+  potEl.value = gvsPot ? "web.gvs+" + gvsPot : "";
+
+  const notes = [];
+  if (!isYouTube(tab && tab.url)) {
+    notes.push("Open a YouTube video tab, then reopen this popup.");
+  } else {
+    if (!visitor) notes.push("Couldn't read visitor data — refresh the video page.");
+    if (!gvsPot) notes.push("No PO token yet — press play on a video, then reopen.");
+  }
+  if (gvsPot && gvsClient && gvsClient !== "WEB") {
+    notes.push("Captured client is '" + gvsClient + "', not WEB — play in the normal web player.");
+  }
+  if (potTime) {
+    const mins = Math.round((Date.now() - potTime) / 60000);
+    notes.push("Token captured ~" + mins + " min ago (they expire within hours).");
+  }
+  setStatus(notes.join(" ") || "Ready — copy the values into the Space.", notes.length ? "warn" : "ok");
+}
+
+async function copy(id, label) {
+  const val = document.getElementById(id).value;
+  if (!val) {
+    setStatus("Nothing to copy yet for " + label + ".", "warn");
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(val);
+    setStatus("Copied " + label + " ✓", "ok");
+  } catch (e) {
+    setStatus("Copy failed — select the text and copy manually.", "warn");
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  load();
+  document.getElementById("copyPot").addEventListener("click", () => copy("potField", "PO token"));
+  document.getElementById("copyVis").addEventListener("click", () => copy("visField", "visitor data"));
+  document.getElementById("refresh").addEventListener("click", load);
+});