6 changed files with 56 additions and 223 deletions
--- a/src/content/extractor.ts
+++ b/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,
  };
 }

--- a/src/content/index.ts
+++ b/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(() => {
--- a/src/content/ui/i18n.ts
+++ b/src/content/ui/i18n.ts
@ -9,8 +9,7 @@ type MessageKey =
  | "filterChannel"
  | "filterAddedBy"
  | "badgeLive"
-  | "headerVideos"
-  | "headerLoading";
+  | "headerVideos";

 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…",
  },
 };

--- a/src/content/ui/lifecycle.ts
+++ b/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 };
-  }
-
-  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);
+    primary.appendChild(el);
    return;
  }

-  // DOM not ready yet — wait for the anchor element to appear
-  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);
+  console.warn("[yt-playlist-features] Could not find anchor to mount table");
 }

 export function unmountTable(): void {
-  if (pendingObserver) {
-    pendingObserver.disconnect();
-    pendingObserver = null;
-  }
-  currentHandle = null;
  document.getElementById(CONTAINER_ID)?.remove();
 }

--- a/src/content/ui/table-renderer.ts
+++ b/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 {
-    container,
-    getTags: () => [...tags],
-    addCandidates(names: string[]) {
-      for (const name of names) {
-        if (!candidates.includes(name)) candidates.push(name);
-      }
-      candidates.sort();
-    },
-  };
+  return { container, getTags: () => [...tags] };
 }

 function compareFn(key: SortKey, dir: SortDir) {
@ -289,13 +278,7 @@ function buildRow(
  return tr;
 }

-export interface PlaylistTableHandle {
-  element: HTMLElement;
-  appendVideos(newVideos: PlaylistVideo[]): void;
-  setComplete(extractedCount: number): void;
-}
-
-export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
+export function renderPlaylistTable(data: PlaylistData): HTMLElement {
  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";
-
-  function updateHeader() {
-    const status = complete ? "" : ` (${t("headerLoading")})`;
-    titleSpan.textContent = `${data.metadata.title} — ${extractedCount} ${t("headerVideos")}${status}`;
-  }
-  updateHeader();
+  titleSpan.textContent = `${data.metadata.title} — ${data.extractedCount} ${t("headerVideos")}`;

  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[]) {
-    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 };
+  return wrapper;
 }
--- a/src/injected/page-script.ts
+++ b/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.
-    // On SPA navigation ytInitialData is stale (still holds the previous page's data),
-    // so we must always fetch fresh data via the browse API.
-    let initialData = isInitialLoad ? w.ytInitialData : null;
+    // Try ytInitialData first (works on initial page load)
+    let initialData = w.ytInitialData;
    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
-    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;
+    // Fetch remaining pages
    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 ---