Capture PO token via in-page fetch/XHR hook (fix: token not captured)

YouTube fetches media via fetch()/SABR, which the MV3 service-worker webRequest path can
miss. Add MAIN-world content_hook.js that patches fetch + XHR to read the gvs `pot` from
videoplayback URLs (and visitor_data from ytcfg), bridged to session storage via
content_bridge.js. Background now raises session-storage access level for content scripts
and keeps a broadened webRequest capture as backup. Popup gives a precise diagnostic
(media seen vs. token present). Bump to 1.1.0.

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

extension/README.md

@@ -52,6 +52,21 @@ It just surfaces these for one-click copy; it sends nothing anywhere.
   events so Gradio's Svelte bindings register the change. Requires the `*://*.hf.space/*`
   host permission.
 
+## Troubleshooting
+
+**"No PO token yet" even though the video is playing.** YouTube fetches media via
+`fetch`/XHR (SABR), so the token is captured by a page-level hook (`content_hook.js`), not
+only the service worker. If it still doesn't appear:
+
+- **Reload the video page** after installing the extension (the hook must be in place
+  *before* the player starts).
+- Press **play** and let it **buffer a few seconds**, then click **Refresh** in the popup.
+- If the popup says *"Media requests were seen but none carried a PO token,"* your current
+  session isn't attaching one — try a **logged-out Incognito** window (with the extension
+  allowed in Incognito), or just use **cookies** instead.
+- Make sure the extension is **allowed in Incognito** if you test there
+  (`chrome://extensions` → Details → Allow in Incognito).
+
 ## Caveats
 
 - **Unpublished / sideloaded** — you load it yourself; trust accordingly. The code is

extension/background.js

@@ -1,27 +1,28 @@
-// 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.
+// Service worker. Two jobs:
+//  1. Raise the session-storage access level so the youtube.com content-script bridge
+//     (an "untrusted" context) can persist captured values for the popup to read.
+//  2. A secondary, read-only webRequest capture of the gvs PO token from
+//     *.googlevideo.com/videoplayback requests (the page-level fetch/XHR hook is primary).
 
-const FILTER = { urls: ["*://*.googlevideo.com/videoplayback*"] };
+try {
+  chrome.storage.session.setAccessLevel({ accessLevel: "TRUSTED_AND_UNTRUSTED_CONTEXTS" });
+} catch (e) {}
+
+const FILTER = { urls: ["*://*.googlevideo.com/*"] };
 
 chrome.webRequest.onBeforeRequest.addListener(
   (details) => {
     try {
+      if (details.url.indexOf("videoplayback") === -1) return;
+      chrome.storage.session.set({ gvAnySeen: true, lastSeen: Date.now() });
       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) => {
+      chrome.storage.session.get(["gvsClient"]).then((cur) => {
         const haveWeb = cur.gvsClient === "WEB";
         if (!haveWeb || client === "WEB") {
-          chrome.storage.session.set({
-            gvsPot: pot,
-            gvsClient: client,
-            potTime: Date.now(),
-          });
+          chrome.storage.session.set({ gvsPot: pot, gvsClient: client, potTime: Date.now() });
         }
       });
     } catch (e) {

extension/content_bridge.js

@@ -0,0 +1,25 @@
+// Isolated-world bridge: receives postMessages from the MAIN-world hook and persists the
+// captured values to session storage (which the popup reads). Needs the background script
+// to have raised the session-storage access level for untrusted contexts.
+window.addEventListener("message", function (e) {
+  if (e.source !== window) return;
+  const d = e.data;
+  if (!d || d.__potgrab !== true) return;
+
+  if (d.type === "seen") {
+    chrome.storage.session.set({ gvAnySeen: true, lastSeen: Date.now() });
+  } else if (d.type === "pot" && d.data && d.data.pot) {
+    chrome.storage.session.get(["gvsClient"]).then(function (cur) {
+      const haveWeb = cur.gvsClient === "WEB";
+      if (!haveWeb || d.data.c === "WEB") {
+        chrome.storage.session.set({
+          gvsPot: d.data.pot,
+          gvsClient: d.data.c || "",
+          potTime: Date.now(),
+        });
+      }
+    });
+  } else if (d.type === "visitor" && d.data && d.data.v) {
+    chrome.storage.session.set({ visitorData: d.data.v });
+  }
+});

extension/content_hook.js

@@ -0,0 +1,56 @@
+// MAIN-world hook (runs in the page's JS context at document_start).
+//
+// Modern YouTube fetches media via fetch()/XHR to *.googlevideo.com/videoplayback?...&pot=...
+// (the MV3 service-worker webRequest path can miss these). We patch fetch + XHR to observe
+// those request URLs, pull the gvs `pot`, and post it to the isolated bridge script. We
+// also report visitor_data once it's available. We only observe — requests pass through
+// untouched.
+(function () {
+  function report(type, data) {
+    try { window.postMessage({ __potgrab: true, type: type, data: data }, "*"); } catch (e) {}
+  }
+
+  function scanUrl(url) {
+    try {
+      if (!url || String(url).indexOf("videoplayback") === -1) return;
+      report("seen", null);
+      const u = new URL(url, location.href);
+      const pot = u.searchParams.get("pot");
+      if (pot) report("pot", { pot: pot, c: u.searchParams.get("c") || "" });
+    } catch (e) {}
+  }
+
+  try {
+    const origFetch = window.fetch;
+    if (origFetch) {
+      window.fetch = function (input) {
+        try { scanUrl(typeof input === "string" ? input : (input && input.url)); } catch (e) {}
+        return origFetch.apply(this, arguments);
+      };
+    }
+  } catch (e) {}
+
+  try {
+    const origOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function (method, url) {
+      try { scanUrl(url); } catch (e) {}
+      return origOpen.apply(this, arguments);
+    };
+  } catch (e) {}
+
+  function reportVisitor() {
+    try {
+      if (window.ytcfg && typeof ytcfg.get === "function") {
+        const v = ytcfg.get("VISITOR_DATA");
+        if (v) { report("visitor", { v: v }); return true; }
+      }
+    } catch (e) {}
+    return false;
+  }
+  if (!reportVisitor()) {
+    let tries = 0;
+    const iv = setInterval(function () {
+      if (reportVisitor() || ++tries > 30) clearInterval(iv);
+    }, 1000);
+  }
+})();

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TutorialMaker PO Token Grabber",
-  "version": "1.0.0",
+  "version": "1.1.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": [
@@ -10,6 +10,21 @@
     "*://*.hf.space/*"
   ],
   "background": { "service_worker": "background.js" },
+  "content_scripts": [
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["content_hook.js"],
+      "run_at": "document_start",
+      "world": "MAIN",
+      "all_frames": true
+    },
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["content_bridge.js"],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
   "action": {
     "default_popup": "popup.html",
     "default_title": "PO Token Grabber"

extension/popup.js

@@ -88,6 +88,7 @@ async function load() {
     "gvsClient",
     "potTime",
     "visitorData",
+    "gvAnySeen",
   ]);
   const visitor = liveVisitor || store.visitorData || "";
 
@@ -100,11 +101,18 @@ async function load() {
   document.getElementById("fillSpace").disabled = spaceTabs.length === 0;
 
   const notes = [];
-  if (!isYouTube(tab && tab.url) && !store.gvsPot) {
-    notes.push("Open a YouTube video, press play, then reopen this popup.");
-  } else {
-    if (!visitor) notes.push("No visitor data yet — open the popup once on the YouTube tab.");
-    if (!store.gvsPot) notes.push("No PO token yet — press play on a video, then reopen.");
+  if (!visitor) notes.push("No visitor data yet — open the popup once on the YouTube tab.");
+  if (!store.gvsPot) {
+    if (store.gvAnySeen) {
+      notes.push("Media requests were seen but none carried a PO token — this session may "
+        + "not attach one. Try a logged-out Incognito window, reload the video, or use "
+        + "cookies instead.");
+    } else if (isYouTube(tab && tab.url)) {
+      notes.push("No media captured yet — press play and let the video buffer a few "
+        + "seconds, then Refresh. If a video is already playing, reload the page.");
+    } else {
+      notes.push("Open a YouTube video and press play to capture a PO token.");
+    }
   }
   if (store.gvsPot && store.gvsClient && store.gvsClient !== "WEB") {
     notes.push("Captured client is '" + store.gvsClient + "', not WEB — use the normal web player.");