src/content/extractor.ts

@@ -175,8 +175,6 @@ function parseVideo(renderer: any): PlaylistVideo | null {
         (b: any) =>
           b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
       ) ?? false,
-    addedBy: null,
-    voteCount: null,
   };
 }
 

src/content/index.ts

@@ -3,7 +3,7 @@ import { onPlaylistPageReady, getPlaylistId } from "./navigation";
 import { parseInitialData, buildPlaylistData } from "./extractor";
 import type { PlaylistVideo } from "../types/playlist";
 import type { Message } from "../shared/messages";
-import { mountTable, appendToTable, setTableComplete } from "./ui/lifecycle";
+import { mountTable } from "./ui/lifecycle";
 
 const LOG = "[yt-playlist-features]";
 
@@ -31,9 +31,6 @@ function handlePlaylistData(event: Event): void {
     return;
   }
 
-  // Skip append messages — handled separately
-  if (payload.type === "append") return;
-
   if (payload.error) {
     console.warn(LOG, "Page script error:", payload.error);
     return;
@@ -78,7 +75,7 @@ function handlePlaylistData(event: Event): void {
     } satisfies PlaylistVideo;
   });
 
-  const playlistData = buildPlaylistData(metadata, videos, payload.isComplete !== false);
+  const playlistData = buildPlaylistData(metadata, videos, true);
 
   console.log(
     LOG,
@@ -93,54 +90,8 @@ function handlePlaylistData(event: Event): void {
   });
 }
 
-function handlePlaylistAppend(event: Event): void {
-  const detail = (event as CustomEvent).detail;
-  if (!detail) return;
-
-  let payload: any;
-  try {
-    payload = JSON.parse(detail);
-  } catch {
-    return;
-  }
-
-  if (payload.type === "append") {
-    const newVideos: PlaylistVideo[] = payload.videos.map((v: any) => {
-      const bylineRun = v.shortBylineText?.runs?.[0];
-      const bylineEndpoint = bylineRun?.navigationEndpoint?.browseEndpoint;
-      return {
-        videoId: v.videoId,
-        title: v.title,
-        index: v.index,
-        durationSeconds: v.lengthSeconds,
-        durationText: v.lengthText || null,
-        thumbnails: v.thumbnails,
-        channel: {
-          name: bylineRun?.text ?? "",
-          channelId: bylineEndpoint?.browseId ?? "",
-          url: bylineRun?.navigationEndpoint?.commandMetadata
-            ?.webCommandMetadata?.url ?? "",
-        },
-        isPlayable: v.isPlayable,
-        isLive:
-          v.badges?.some(
-            (b: any) =>
-              b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
-          ) ?? false,
-        addedBy: v.addedBy ?? null,
-        voteCount: v.voteCount ?? null,
-      } satisfies PlaylistVideo;
-    });
-    appendToTable(newVideos);
-    if (payload.isComplete) {
-      setTableComplete(payload.totalCount);
-    }
-  }
-}
-
 // Listen for data from the injected page script
 document.addEventListener("__yt_playlist_ext_data", handlePlaylistData);
-document.addEventListener("__yt_playlist_ext_data", handlePlaylistAppend);
 
 // Detect playlist page navigation and trigger extraction
 onPlaylistPageReady(() => {

src/content/ui/i18n.ts

@@ -9,8 +9,7 @@ type MessageKey =
   | "filterChannel"
   | "filterAddedBy"
   | "badgeLive"
-  | "headerVideos"
+  | "headerVideos";
-  | "headerLoading";
 
 const messages: Record<string, Record<MessageKey, string>> = {
   ja: {
@@ -25,7 +24,6 @@ const messages: Record<string, Record<MessageKey, string>> = {
     filterAddedBy: "追加者...",
     badgeLive: "ライブ",
     headerVideos: "本の動画",
-    headerLoading: "読み込み中…",
   },
   en: {
     colIndex: "#",
@@ -39,7 +37,6 @@ const messages: Record<string, Record<MessageKey, string>> = {
     filterAddedBy: "Added by...",
     badgeLive: "LIVE",
     headerVideos: "videos",
-    headerLoading: "loading…",
   },
 };
 

src/content/ui/lifecycle.ts

@@ -1,16 +1,21 @@
-import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
+import type { PlaylistData } from "../../types/playlist";
 import { injectStyles } from "./styles";
-import { renderPlaylistTable, type PlaylistTableHandle } from "./table-renderer";
+import { renderPlaylistTable } from "./table-renderer";
 
 const CONTAINER_ID = "ytpf-playlist-table";
 
-let currentHandle: PlaylistTableHandle | null = null;
+export function mountTable(data: PlaylistData): void {
+  unmountTable();
+  injectStyles();
+
+  const el = renderPlaylistTable(data);
+  el.id = CONTAINER_ID;
 
-function findAnchor(): { parent: Element; before: Element | null } | null {
   // Primary: before ytd-playlist-video-list-renderer (sibling)
   const videoList = document.querySelector("ytd-playlist-video-list-renderer");
   if (videoList?.parentElement) {
-    return { parent: videoList.parentElement, before: videoList };
+    videoList.parentElement.insertBefore(el, videoList);
+    return;
   }
 
   // Fallback: end of ytd-section-list-renderer > #contents
@@ -18,7 +23,8 @@ function findAnchor(): { parent: Element; before: Element | null } | null {
     "ytd-section-list-renderer > #contents",
   );
   if (sectionContents) {
-    return { parent: sectionContents, before: null };
+    sectionContents.appendChild(el);
+    return;
   }
 
   // Last resort: #primary
@@ -26,58 +32,14 @@ function findAnchor(): { parent: Element; before: Element | null } | null {
     "ytd-two-column-browse-results-renderer > #primary",
   );
   if (primary) {
-    return { parent: primary, before: null };
+    primary.appendChild(el);
-  }
-
-  return null;
-}
-
-function insertAt(el: HTMLElement, anchor: { parent: Element; before: Element | null }): void {
-  anchor.parent.insertBefore(el, anchor.before);
-}
-
-let pendingObserver: MutationObserver | null = null;
-
-export function mountTable(data: PlaylistData): void {
-  unmountTable();
-  injectStyles();
-
-  currentHandle = renderPlaylistTable(data);
-  const el = currentHandle.element;
-  el.id = CONTAINER_ID;
-
-  const anchor = findAnchor();
-  if (anchor) {
-    insertAt(el, anchor);
     return;
   }
 
-  // DOM not ready yet — wait for the anchor element to appear
+  console.warn("[yt-playlist-features] Could not find anchor to mount table");
-  pendingObserver = new MutationObserver(() => {
-    const a = findAnchor();
-    if (a) {
-      pendingObserver!.disconnect();
-      pendingObserver = null;
-      insertAt(el, a);
-    }
-  });
-  pendingObserver.observe(document.body, { childList: true, subtree: true });
-}
-
-export function appendToTable(newVideos: PlaylistVideo[]): void {
-  currentHandle?.appendVideos(newVideos);
-}
-
-export function setTableComplete(extractedCount: number): void {
-  currentHandle?.setComplete(extractedCount);
 }
 
 export function unmountTable(): void {
-  if (pendingObserver) {
-    pendingObserver.disconnect();
-    pendingObserver = null;
-  }
-  currentHandle = null;
   document.getElementById(CONTAINER_ID)?.remove();
 }
 

src/content/ui/table-renderer.ts

@@ -25,15 +25,13 @@ function getAllColumns(): Column[] {
 interface TagInput {
   container: HTMLElement;
   getTags(): string[];
-  addCandidates(names: string[]): void;
 }
 
 function createTagInput(
   placeholder: string,
-  initialCandidates: string[],
+  candidates: string[],
   onChange: () => void,
 ): TagInput {
-  const candidates = [...initialCandidates];
   const tags: string[] = [];
 
   const container = document.createElement("div");
@@ -187,16 +185,7 @@ function createTagInput(
   container.addEventListener("click", () => input.focus());
 
   container.append(input, dropdown);
-  return {
+  return { container, getTags: () => [...tags] };
-    container,
-    getTags: () => [...tags],
-    addCandidates(names: string[]) {
-      for (const name of names) {
-        if (!candidates.includes(name)) candidates.push(name);
-      }
-      candidates.sort();
-    },
-  };
 }
 
 function compareFn(key: SortKey, dir: SortDir) {
@@ -289,13 +278,7 @@ function buildRow(
   return tr;
 }
 
-export interface PlaylistTableHandle {
+export function renderPlaylistTable(data: PlaylistData): HTMLElement {
-  element: HTMLElement;
-  appendVideos(newVideos: PlaylistVideo[]): void;
-  setComplete(extractedCount: number): void;
-}
-
-export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   const isCollab = data.videos.some(
     (v) => v.addedBy != null || v.voteCount != null,
   );
@@ -308,17 +291,9 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   const header = document.createElement("div");
   header.className = "ytpf-header";
 
-  let extractedCount = data.extractedCount;
-  let complete = data.isComplete;
-
   const titleSpan = document.createElement("span");
   titleSpan.className = "ytpf-header-title";
-
+  titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} ${t("headerVideos")}`;
-  function updateHeader() {
-    const status = complete ? "" : ` (${t("headerLoading")})`;
-    titleSpan.textContent = `${data.metadata.title} — ${extractedCount} ${t("headerVideos")}${status}`;
-  }
-  updateHeader();
 
   const metaSpan = document.createElement("span");
   metaSpan.className = "ytpf-header-meta";
@@ -470,31 +445,5 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     toggle.classList.toggle("ytpf-toggle--collapsed");
   });
 
-  function appendVideos(newVideos: PlaylistVideo[]) {
+  return wrapper;
-    videos.push(...newVideos);
-    extractedCount += newVideos.length;
-
-    // Update filter candidates
-    channelTagInput.addCandidates(newVideos.map((v) => v.channel.name));
-    if (addedByTagInput) {
-      addedByTagInput.addCandidates(
-        newVideos.map((v) => v.addedBy).filter((n): n is string => n != null),
-      );
-    }
-
-    // Re-sort if a sort is active
-    if (sortKey) {
-      videos.sort(compareFn(sortKey, sortDir));
-    }
-    renderRows();
-    updateHeader();
-  }
-
-  function setComplete(count: number) {
-    extractedCount = count;
-    complete = true;
-    updateHeader();
-  }
-
-  return { element: wrapper, appendVideos, setComplete };
 }

src/injected/page-script.ts

@@ -16,7 +16,6 @@
   w.__yt_playlist_ext_injected = true;
 
   let extractingUrl: string | null = null;
-  let isInitialLoad = true;
   let collabCache: Map<string, string> = new Map();
   let collabCachePlaylistId: string | null = null;
 
@@ -65,13 +64,12 @@
     const { cfg, apiKey, baseContext } = getConfig();
     const authHeaders = buildAuthHeaders(cfg, baseContext);
 
-    // Try ytInitialData only on initial page load.
+    // Try ytInitialData first (works on initial page load)
-    // On SPA navigation ytInitialData is stale (still holds the previous page's data),
+    let initialData = w.ytInitialData;
-    // so we must always fetch fresh data via the browse API.
-    let initialData = isInitialLoad ? w.ytInitialData : null;
     let videoList = initialData ? findVideoListContents(initialData) : null;
-    isInitialLoad = false;
 
+    // If ytInitialData doesn't have the video list (SPA navigation),
+    // fetch the playlist data ourselves via the browse API
     if (!videoList) {
       const playlistId = getPlaylistId();
       if (!playlistId) {
@@ -96,13 +94,13 @@
       }
     }
 
-    const firstPageRenderers: any[] = [];
+    const allRenderers: any[] = [];
     let continuation: string | null = null;
     let continuationClickTracking: string | null = null;
 
     for (const item of videoList) {
       if (item.playlistVideoRenderer) {
-        firstPageRenderers.push(item.playlistVideoRenderer);
+        allRenderers.push(item.playlistVideoRenderer);
       }
       if (item.continuationItemRenderer) {
         const extracted = extractContinuationInfo(item.continuationItemRenderer);
@@ -111,40 +109,7 @@
       }
     }
 
-    // Fetch collaborator names for collaborative playlists
+    // Fetch remaining pages
-    const avatarToName = await fetchCollaboratorMap(initialData, cfg, baseContext, authHeaders);
-
-    function mapRenderers(renderers: any[], startIndex: number) {
-      return renderers.map((d, i) => ({
-        videoId: d.videoId,
-        title: textOf(d.title),
-        index: startIndex + i,
-        lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
-        lengthText: textOf(d.lengthText),
-        thumbnails: d.thumbnail?.thumbnails ?? [],
-        shortBylineText: d.shortBylineText,
-        isPlayable: d.isPlayable !== false,
-        badges: d.badges ?? [],
-        voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
-        addedBy: resolveAddedBy(d, avatarToName),
-      }));
-    }
-
-    // Send first page immediately
-    const hasContinuation = !!continuation;
-    const firstPageVideos = mapRenderers(firstPageRenderers, 0);
-    console.log(LOG, `First page: ${firstPageVideos.length} videos (has more: ${hasContinuation})`);
-
-    sendResult({
-      videos: firstPageVideos,
-      initialData,
-      innertubeApiKey: apiKey,
-      innertubeContext: baseContext,
-      isComplete: !hasContinuation,
-    });
-
-    // Fetch remaining pages lazily and send incremental updates
-    let totalCount = firstPageVideos.length;
     let page = 1;
     while (continuation && page < 50) {
       try {
@@ -167,13 +132,12 @@
         continuation = null;
         continuationClickTracking = null;
 
-        const pageRenderers: any[] = [];
         for (const action of data.onResponseReceivedActions ?? []) {
           const items = action?.appendContinuationItemsAction?.continuationItems;
           if (!items) continue;
           for (const item of items) {
             if (item.playlistVideoRenderer) {
-              pageRenderers.push(item.playlistVideoRenderer);
+              allRenderers.push(item.playlistVideoRenderer);
             }
             if (item.continuationItemRenderer) {
               const extracted = extractContinuationInfo(item.continuationItemRenderer);
@@ -182,26 +146,38 @@
             }
           }
         }
-
-        const pageVideos = mapRenderers(pageRenderers, totalCount);
-        totalCount += pageVideos.length;
-
-        console.log(LOG, `Continuation page ${page}: +${pageVideos.length} videos (total: ${totalCount})`);
-        sendResult({
-          type: "append",
-          videos: pageVideos,
-          isComplete: !continuation,
-          totalCount,
-        });
-
         page++;
       } catch (e) {
         console.error(LOG, `Continuation page ${page} failed:`, e);
-        // Send completion even on error so the loading indicator goes away
-        sendResult({ type: "append", videos: [], isComplete: true, totalCount });
         break;
       }
     }
+
+    // Fetch collaborator names for collaborative playlists
+    const avatarToName = await fetchCollaboratorMap(initialData, cfg, baseContext, authHeaders);
+
+    const videos = allRenderers.map((d, i) => ({
+      videoId: d.videoId,
+      title: textOf(d.title),
+      index: i,
+      lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
+      lengthText: textOf(d.lengthText),
+      thumbnails: d.thumbnail?.thumbnails ?? [],
+      shortBylineText: d.shortBylineText,
+      isPlayable: d.isPlayable !== false,
+      badges: d.badges ?? [],
+      voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
+      addedBy: resolveAddedBy(d, avatarToName),
+    }));
+
+    console.log(LOG, `Extraction: ${videos.length} videos (${page - 1} continuation pages)`);
+
+    sendResult({
+      videos,
+      initialData,
+      innertubeApiKey: apiKey,
+      innertubeContext: baseContext,
+    });
   }
 
   // --- helpers ---