Extension: auto-fill the Space's PO-token / visitor-data fields

- app.py: stable elem_ids (tm_pot_token, tm_visitor_data) on the Gradio inputs
- extension: "Fill the Space tab" injects values into the Space (all frames, so it works
at *.hf.space and embedded in huggingface.co/spaces) using the native value setter +
input/change events so Gradio's Svelte bindings update; visitor_data cached in session
storage so fill works when the Space tab is focused; add *://*.hf.space/* host permission
- READMEs updated with the auto-fill flow

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

README.md

@@ -72,8 +72,10 @@ Paste the values into the app's **"YouTube access — cookies / proxy"** panel:
 
 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
+(`chrome://extensions` → Developer mode → Load unpacked), open a YouTube video and press
+play, then click the extension **while on the YouTube tab** to capture the values. Open
+this Space in another tab and hit **⤵ Fill the Space tab** to inject them straight into
+the fields below (or use the Copy buttons and paste). 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.)
 

app.py

@@ -297,9 +297,11 @@ def build_ui():
             with gr.Row():
                 po_token_in = gr.Textbox(
                     label="PO token (see README) — CLIENT.CONTEXT+TOKEN", lines=2, scale=3,
+                    elem_id="tm_pot_token",
                     placeholder="web.gvs+AbC…,  web.player+XyZ…")
                 visitor_data_in = gr.Textbox(
                     label="Visitor data (pairs with the PO token)", scale=2,
+                    elem_id="tm_visitor_data",
                     placeholder="Cgt...%3D%3D")
             proxy_url = gr.Textbox(
                 label="Proxy URL (optional)", type="password",

extension/README.md

@@ -25,10 +25,15 @@ It just surfaces these for one-click copy; it sends nothing anywhere.
 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.
+3. Click the extension icon **while on the YouTube tab** — this captures the PO token and
+   reads your visitor data.
+4. Open the **TutorialMaker Space** in another tab (the direct `https://<space>.hf.space`
+   app URL is the most reliable target).
+5. Click the extension icon again, then **⤵ Fill the Space tab** — it injects both values
+   straight into the Space's "PO token" and "Visitor data" fields (expand the "YouTube
+   access" panel to see them).
+   - Or use **Copy PO token** / **Copy visitor data** and paste manually.
+6. Run the Space. Tokens expire within hours — re-grab when downloads start failing.
 
 ## How it works
 
@@ -36,8 +41,13 @@ It just surfaces these for one-click copy; it sends nothing anywhere.
   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>`.
+  YouTube tab to read `visitor_data` (cached in session storage), reads the captured
+  `pot`, and formats the PO token as `web.gvs+<token>`.
+- **Auto-fill** — "Fill the Space tab" injects `fillSpaceFields` into the Space tab (all
+  frames, so it works both at `*.hf.space` and when embedded in `huggingface.co/spaces`).
+  It sets `#tm_pot_token` / `#tm_visitor_data` using the native value setter plus `input`
+  events so Gradio's Svelte bindings register the change. Requires the `*://*.hf.space/*`
+  host permission.
 
 ## Caveats
 

extension/manifest.json

@@ -4,7 +4,11 @@
   "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/*"],
+  "host_permissions": [
+    "*://*.youtube.com/*",
+    "*://*.googlevideo.com/*",
+    "*://*.hf.space/*"
+  ],
   "background": { "service_worker": "background.js" },
   "action": {
     "default_popup": "popup.html",

extension/popup.html

@@ -26,10 +26,11 @@
   <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>
+    <button id="fillSpace"><b>⤵ Fill the Space tab</b></button>
   </div>
   <div class="row">
+    <button id="copyPot">Copy PO token</button>
+    <button id="copyVis">Copy visitor data</button>
     <button id="refresh">Refresh</button>
   </div>
 

extension/popup.js

@@ -1,5 +1,5 @@
-// 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.
+// Popup: read visitor_data from the active YouTube tab (main world) + the captured gvs PO
+// token from session storage, then either copy the values or auto-fill the Space's fields.
 
 // Runs in the page's MAIN world via chrome.scripting; must be self-contained.
 function readVisitorData() {
@@ -20,6 +20,33 @@ function readVisitorData() {
   return null;
 }
 
+// Injected into the Space tab (default/isolated world) to fill the Gradio inputs by their
+// elem_id. Uses the native value setter so Gradio's Svelte bindings register the change.
+function fillSpaceFields(poToken, visitorData) {
+  function setVal(id, val) {
+    if (!val) return false;
+    const root = document.getElementById(id);
+    if (!root) return false;
+    const el = root.querySelector("textarea, input");
+    if (!el) return false;
+    const proto =
+      el.tagName === "TEXTAREA"
+        ? window.HTMLTextAreaElement.prototype
+        : window.HTMLInputElement.prototype;
+    const setter = Object.getOwnPropertyDescriptor(proto, "value").set;
+    setter.call(el, val);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+    return true;
+  }
+  let n = 0;
+  if (setVal("tm_pot_token", poToken)) n++;
+  if (setVal("tm_visitor_data", visitorData)) n++;
+  return n;
+}
+
+const SPACE_RE = /(\.hf\.space)|(huggingface\.co\/spaces\/)/i;
+
 function setStatus(msg, kind) {
   const el = document.getElementById("status");
   el.textContent = msg;
@@ -40,7 +67,10 @@ async function load() {
   const visEl = document.getElementById("visField");
 
   const tab = await getActiveTab();
-  let visitor = null;
+
+  // Read visitor_data live if we're on YouTube, and remember it for later (e.g. when the
+  // Space tab is the one in focus during fill).
+  let liveVisitor = null;
   if (tab && isYouTube(tab.url)) {
     try {
       const res = await chrome.scripting.executeScript({
@@ -48,34 +78,43 @@ async function load() {
         world: "MAIN",
         func: readVisitorData,
       });
-      visitor = res && res[0] ? res[0].result : null;
+      liveVisitor = res && res[0] ? res[0].result : null;
     } catch (e) {}
+    if (liveVisitor) await chrome.storage.session.set({ visitorData: liveVisitor });
   }
 
-  const { gvsPot, gvsClient, potTime } = await chrome.storage.session.get([
+  const store = await chrome.storage.session.get([
     "gvsPot",
     "gvsClient",
     "potTime",
+    "visitorData",
   ]);
+  const visitor = liveVisitor || store.visitorData || "";
 
-  visEl.value = visitor || "";
-  potEl.value = gvsPot ? "web.gvs+" + gvsPot : "";
+  visEl.value = visitor;
+  potEl.value = store.gvsPot ? "web.gvs+" + store.gvsPot : "";
+
+  // Is the Space open in some tab? Enable the fill button if so.
+  const all = await chrome.tabs.query({});
+  const spaceTabs = all.filter((t) => SPACE_RE.test(t.url || ""));
+  document.getElementById("fillSpace").disabled = spaceTabs.length === 0;
 
   const notes = [];
-  if (!isYouTube(tab && tab.url)) {
-    notes.push("Open a YouTube video tab, then reopen this popup.");
+  if (!isYouTube(tab && tab.url) && !store.gvsPot) {
+    notes.push("Open a YouTube video, press play, 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 (!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 (gvsPot && gvsClient && gvsClient !== "WEB") {
-    notes.push("Captured client is '" + gvsClient + "', not WEB — play in the normal web player.");
+  if (store.gvsPot && store.gvsClient && store.gvsClient !== "WEB") {
+    notes.push("Captured client is '" + store.gvsClient + "', not WEB — use the normal web player.");
   }
-  if (potTime) {
-    const mins = Math.round((Date.now() - potTime) / 60000);
+  if (spaceTabs.length === 0) notes.push("Open the TutorialMaker Space in a tab to enable auto-fill.");
+  if (store.potTime) {
+    const mins = Math.round((Date.now() - store.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");
+  setStatus(notes.join(" ") || "Ready.", notes.length ? "warn" : "ok");
 }
 
 async function copy(id, label) {
@@ -92,9 +131,41 @@ async function copy(id, label) {
   }
 }
 
+async function fillSpace() {
+  const poToken = document.getElementById("potField").value;
+  const visitorData = document.getElementById("visField").value;
+  if (!poToken && !visitorData) {
+    setStatus("Nothing to fill yet — capture the values first.", "warn");
+    return;
+  }
+  const all = await chrome.tabs.query({});
+  const spaceTabs = all.filter((t) => SPACE_RE.test(t.url || ""));
+  if (spaceTabs.length === 0) {
+    setStatus("No TutorialMaker Space tab found — open it first.", "warn");
+    return;
+  }
+  let filled = 0;
+  for (const t of spaceTabs) {
+    try {
+      const results = await chrome.scripting.executeScript({
+        target: { tabId: t.id, allFrames: true },
+        func: fillSpaceFields,
+        args: [poToken, visitorData],
+      });
+      for (const r of results) filled += r.result || 0;
+    } catch (e) {}
+  }
+  if (filled > 0) {
+    setStatus("Filled " + filled + " field(s) in the Space ✓ (expand the panel to see).", "ok");
+  } else {
+    setStatus("Couldn't find the fields — make sure the Space finished loading.", "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("fillSpace").addEventListener("click", fillSpace);
   document.getElementById("refresh").addEventListener("click", load);
 });