Bump to 0.2.0

esbuild.config.mjs

@@ -30,8 +30,16 @@ async function build(browser) {
       outfile: `${outdir}/injected/page-script.js`,
       format: "iife",
     }),
+    esbuild.build({
+      ...common,
+      entryPoints: ["src/options/options.ts"],
+      outfile: `${outdir}/options/options.js`,
+      format: "iife",
+    }),
   ]);
 
+  cpSync("src/options/options.html", `${outdir}/options/options.html`);
+
   cpSync(`manifest.${browser}.json`, `${outdir}/manifest.json`);
 }
 

manifest.chrome.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 3,
   "name": "YT Playlist Features",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Extract and work with YouTube playlist data",
-  "permissions": [],
+  "permissions": ["storage"],
   "background": {
     "service_worker": "background/service-worker.js"
   },
@@ -14,6 +14,13 @@
       "run_at": "document_idle"
     }
   ],
+  "action": {
+    "default_popup": "options/options.html"
+  },
+  "options_ui": {
+    "page": "options/options.html",
+    "open_in_tab": false
+  },
   "web_accessible_resources": [
     {
       "resources": ["injected/page-script.js"],

manifest.firefox.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 3,
   "name": "YT Playlist Features",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Extract and work with YouTube playlist data",
-  "permissions": [],
+  "permissions": ["storage"],
   "background": {
     "scripts": ["background/service-worker.js"]
   },
@@ -14,6 +14,13 @@
       "run_at": "document_idle"
     }
   ],
+  "action": {
+    "default_popup": "options/options.html"
+  },
+  "options_ui": {
+    "page": "options/options.html",
+    "open_in_tab": false
+  },
   "web_accessible_resources": [
     {
       "resources": ["injected/page-script.js"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-playlist-features",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {

src/background/service-worker.ts

@@ -1,19 +1,118 @@
 import browser from "webextension-polyfill";
 import type { Message } from "../shared/messages";
+import type { DetailUpdate } from "../types/playlist";
+import { CATEGORY_MAP } from "../shared/category-map";
 
-const LOG_PREFIX = "[yt-playlist-features:bg]";
+const LOG = "[yt-playlist-features:bg]";
+const DEFAULT_API_KEY = "AIzaSyDPyWG3ABnVV3en_KBhIxUH6O2_A0oP4Wk";
+const BATCH_SIZE = 50;
+
+async function getApiKey(): Promise<string> {
+  const result = await browser.storage.sync.get("apiKey");
+  return (result.apiKey as string) || DEFAULT_API_KEY;
+}
+
+const BATCH_DELAY = 500; // ms between batches
+const RETRY_DELAY = 5000; // ms before retrying after rate limit
+const MAX_RETRIES = 3;
+
+async function fetchVideoDetails(
+  videoIds: string[],
+  tabId: number,
+): Promise<void> {
+  const apiKey = await getApiKey();
+  if (!apiKey) {
+    browser.tabs.sendMessage(tabId, {
+      type: "VIDEO_DETAILS_ERROR",
+      error: "no-api-key",
+    } satisfies Message);
+    return;
+  }
+
+  for (let i = 0; i < videoIds.length; i += BATCH_SIZE) {
+    if (i > 0) await new Promise((r) => setTimeout(r, BATCH_DELAY));
+
+    const batch = videoIds.slice(i, i + BATCH_SIZE);
+    const ids = batch.join(",");
+    const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=${ids}&key=${apiKey}`;
+
+    let success = false;
+    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+      try {
+        if (attempt > 0) {
+          console.log(LOG, `Retry ${attempt} after rate limit, waiting ${RETRY_DELAY}ms...`);
+          await new Promise((r) => setTimeout(r, RETRY_DELAY));
+        }
+
+        const res = await fetch(url);
+        if (res.status === 403) {
+          console.warn(LOG, `Rate limited (attempt ${attempt + 1}/${MAX_RETRIES})`);
+          continue;
+        }
+        if (!res.ok) {
+          const body = await res.text();
+          console.error(LOG, `API error ${res.status}:`, body);
+          browser.tabs.sendMessage(tabId, {
+            type: "VIDEO_DETAILS_ERROR",
+            error: `api-error-${res.status}`,
+          } satisfies Message);
+          return;
+        }
+
+        const data = await res.json();
+        const updates: DetailUpdate[] = (data.items ?? []).map((item: any) => ({
+          videoId: item.id,
+          viewCountText: item.statistics?.viewCount
+            ? parseInt(item.statistics.viewCount, 10).toLocaleString()
+            : null,
+          publishedAt: item.snippet?.publishedAt?.slice(0, 10) ?? null,
+          category: CATEGORY_MAP[item.snippet?.categoryId] ?? null,
+        }));
+
+        browser.tabs.sendMessage(tabId, {
+          type: "VIDEO_DETAILS_UPDATE",
+          updates,
+        } satisfies Message);
+        success = true;
+        break;
+      } catch (e) {
+        console.error(LOG, "Fetch failed:", e);
+        browser.tabs.sendMessage(tabId, {
+          type: "VIDEO_DETAILS_ERROR",
+          error: "network-error",
+        } satisfies Message);
+        return;
+      }
+    }
+
+    if (!success) {
+      console.error(LOG, "Max retries exceeded for batch");
+      browser.tabs.sendMessage(tabId, {
+        type: "VIDEO_DETAILS_ERROR",
+        error: "rate-limit-exceeded",
+      } satisfies Message);
+      return;
+    }
+  }
+}
 
 browser.runtime.onMessage.addListener(
-  async (message: unknown, _sender: browser.Runtime.MessageSender) => {
+  async (message: unknown, sender: browser.Runtime.MessageSender) => {
     const msg = message as Message;
 
     if (msg.type === "PLAYLIST_EXTRACTED") {
       console.log(
-        LOG_PREFIX,
+        LOG,
         `Playlist: "${msg.data.metadata.title}" (${msg.data.extractedCount} videos)`,
       );
     }
+
+    if (msg.type === "FETCH_VIDEO_DETAILS") {
+      const tabId = sender.tab?.id;
+      if (!tabId) return;
+      fetchVideoDetails(msg.videoIds, tabId);
+    }
   },
 );
 
-console.log(LOG_PREFIX, "Service worker started.");
+console.log(LOG, "Service worker started.");

src/content/extractor.ts

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

src/content/index.ts

@@ -3,13 +3,43 @@ 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, appendToTable, setTableComplete, updateTableDetails } from "./ui/lifecycle";
 
 const LOG = "[yt-playlist-features]";
 
 let lastExtractedId: string | null = null;
 let pageScriptInjected = false;
 
+function mapRawVideo(v: any): PlaylistVideo {
+  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,
+    viewCountText: v.viewCountText ?? null,
+    publishedAt: v.publishedAt ?? null,
+    category: v.category ?? null,
+    addedBy: v.addedBy ?? null,
+    voteCount: v.voteCount ?? null,
+  } satisfies PlaylistVideo;
+}
+
 function ensurePageScript(): void {
   if (pageScriptInjected) return;
   const script = document.createElement("script");
@@ -50,33 +80,7 @@ function handlePlaylistData(event: Event): void {
   }
 
   // Convert DOM-extracted videos to PlaylistVideo[]
-  const videos: PlaylistVideo[] = domVideos.map((v: any) => {
+  const videos: PlaylistVideo[] = domVideos.map(mapRawVideo);
-    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;
-  });
 
   const playlistData = buildPlaylistData(metadata, videos, payload.isComplete !== false);
 
@@ -105,32 +109,7 @@ function handlePlaylistAppend(event: Event): void {
   }
 
   if (payload.type === "append") {
-    const newVideos: PlaylistVideo[] = payload.videos.map((v: any) => {
+    const newVideos: PlaylistVideo[] = payload.videos.map(mapRawVideo);
-      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);
@@ -142,6 +121,17 @@ function handlePlaylistAppend(event: Event): void {
 document.addEventListener("__yt_playlist_ext_data", handlePlaylistData);
 document.addEventListener("__yt_playlist_ext_data", handlePlaylistAppend);
 
+// Listen for detail updates from background service worker
+browser.runtime.onMessage.addListener((message: unknown) => {
+  const msg = message as Message;
+  if (msg.type === "VIDEO_DETAILS_UPDATE") {
+    updateTableDetails(msg.updates);
+  }
+  if (msg.type === "VIDEO_DETAILS_ERROR") {
+    console.error(LOG, "Detail fetch error:", msg.error);
+  }
+});
+
 // Detect playlist page navigation and trigger extraction
 onPlaylistPageReady(() => {
   const playlistId = getPlaylistId();

src/content/ui/i18n.ts

@@ -3,14 +3,21 @@ type MessageKey =
   | "colTitle"
   | "colChannel"
   | "colDuration"
+  | "colViews"
+  | "colPublished"
+  | "colCategory"
   | "colAddedBy"
   | "colVotes"
   | "filterTitle"
   | "filterChannel"
   | "filterAddedBy"
+  | "filterCategory"
   | "badgeLive"
   | "headerVideos"
-  | "headerLoading";
+  | "headerLoading"
+  | "fetchViews"
+  | "fetchViewsProgress"
+  | "fetchViewsDone";
 
 const messages: Record<string, Record<MessageKey, string>> = {
   ja: {
@@ -18,28 +25,42 @@ const messages: Record<string, Record<MessageKey, string>> = {
     colTitle: "タイトル",
     colChannel: "チャンネル",
     colDuration: "長さ",
+    colViews: "再生数",
+    colPublished: "公開日",
+    colCategory: "カテゴリ",
     colAddedBy: "追加者",
     colVotes: "投票",
     filterTitle: "タイトル検索...",
     filterChannel: "チャンネル...",
     filterAddedBy: "追加者...",
+    filterCategory: "カテゴリ...",
     badgeLive: "ライブ",
     headerVideos: "本の動画",
     headerLoading: "読み込み中…",
+    fetchViews: "再生数を取得",
+    fetchViewsProgress: "取得中…",
+    fetchViewsDone: "取得完了",
   },
   en: {
     colIndex: "#",
     colTitle: "Title",
     colChannel: "Channel",
     colDuration: "Duration",
+    colViews: "Views",
+    colPublished: "Published",
+    colCategory: "Category",
     colAddedBy: "Added by",
     colVotes: "Votes",
     filterTitle: "Search title...",
     filterChannel: "Channel...",
     filterAddedBy: "Added by...",
+    filterCategory: "Category...",
     badgeLive: "LIVE",
     headerVideos: "videos",
     headerLoading: "loading…",
+    fetchViews: "Fetch views",
+    fetchViewsProgress: "Fetching…",
+    fetchViewsDone: "Done",
   },
 };
 

src/content/ui/lifecycle.ts

@@ -1,5 +1,6 @@
 import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
 import { injectStyles } from "./styles";
+import type { DetailUpdate } from "../../types/playlist";
 import { renderPlaylistTable, type PlaylistTableHandle } from "./table-renderer";
 
 const CONTAINER_ID = "ytpf-playlist-table";
@@ -7,10 +8,12 @@ const CONTAINER_ID = "ytpf-playlist-table";
 let currentHandle: PlaylistTableHandle | null = null;
 
 function findAnchor(): { parent: Element; before: Element | null } | null {
-  // Primary: before ytd-playlist-video-list-renderer (sibling)
+  // Primary: top of ytd-item-section-renderer (before any header/content)
-  const videoList = document.querySelector("ytd-playlist-video-list-renderer");
+  const itemSection = document.querySelector(
-  if (videoList?.parentElement) {
+    "ytd-section-list-renderer ytd-item-section-renderer",
-    return { parent: videoList.parentElement, before: videoList };
+  );
+  if (itemSection) {
+    return { parent: itemSection, before: itemSection.firstElementChild };
   }
 
   // Fallback: end of ytd-section-list-renderer > #contents
@@ -72,6 +75,10 @@ export function setTableComplete(extractedCount: number): void {
   currentHandle?.setComplete(extractedCount);
 }
 
+export function updateTableDetails(updates: DetailUpdate[]): void {
+  currentHandle?.updateDetails(updates);
+}
+
 export function unmountTable(): void {
   if (pendingObserver) {
     pendingObserver.disconnect();

src/content/ui/styles.ts

@@ -307,8 +307,41 @@ html[dark] .ytpf-tr:hover {
 .ytpf-col-title { width: auto; }
 .ytpf-col-channel { width: 180px; }
 .ytpf-col-duration { width: 80px; font-family: "Roboto Mono", monospace; }
+.ytpf-col-views { width: 120px; text-align: right; font-family: "Roboto Mono", monospace; }
+.ytpf-col-published { width: 110px; font-family: "Roboto Mono", monospace; }
+.ytpf-col-category { width: 120px; }
 .ytpf-col-addedby { width: 140px; }
 .ytpf-col-votes { width: 60px; text-align: center; font-family: "Roboto Mono", monospace; }
+
+.ytpf-fetch-views-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.2));
+  border-radius: 16px;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 12px;
+  font-family: "Roboto", "Arial", sans-serif;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+html[dark] .ytpf-fetch-views-btn {
+  border-color: rgba(255,255,255,0.2);
+  color: #aaa;
+}
+
+.ytpf-fetch-views-btn:hover:not(:disabled) {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-fetch-views-btn:hover:not(:disabled) {
+  background: #3e3e3e;
+}
+
+.ytpf-fetch-views-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
 .ytpf-tr--unplayable {
   opacity: 0.45;
 }

src/content/ui/table-renderer.ts

@@ -1,7 +1,9 @@
-import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
+import browser from "webextension-polyfill";
+import type { PlaylistData, PlaylistVideo, DetailUpdate } from "../../types/playlist";
+import type { Message } from "../../shared/messages";
 import { t } from "./i18n";
 
-type SortKey = "index" | "title" | "channel" | "duration" | "addedBy" | "votes";
+type SortKey = "index" | "title" | "channel" | "duration" | "views" | "published" | "category" | "addedBy" | "votes";
 type SortDir = "asc" | "desc";
 
 interface Column {
@@ -9,14 +11,18 @@ interface Column {
   cls: string;
   key: SortKey;
   collab?: boolean; // only shown for collaborative playlists
+  detail?: boolean; // shown after detail fetch
 }
 
-function getAllColumns(): Column[] {
+function getAllColumns(hasDetails: boolean): Column[] {
   return [
     { label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
     { label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
     { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
     { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
+    { label: t("colViews"), cls: "ytpf-col-views", key: "views" },
+    { label: t("colPublished"), cls: "ytpf-col-published", key: "published", detail: true },
+    { label: t("colCategory"), cls: "ytpf-col-category", key: "category", detail: true },
     { label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
     { label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
   ];
@@ -199,6 +205,18 @@ function createTagInput(
   };
 }
 
+function parseViewCount(text: string | null): number {
+  if (!text) return -1;
+  const cleaned = text.replace(/,/g, "");
+  const m = cleaned.match(/([\d.]+)\s*(万|億)?/);
+  if (!m) return -1;
+  let num = parseFloat(m[1]);
+  if (m[2] === "万") num *= 10000;
+  else if (m[2] === "億") num *= 100000000;
+  return Math.round(num);
+}
+
+
 function compareFn(key: SortKey, dir: SortDir) {
   const m = dir === "asc" ? 1 : -1;
   return (a: PlaylistVideo, b: PlaylistVideo): number => {
@@ -211,6 +229,12 @@ function compareFn(key: SortKey, dir: SortDir) {
         return a.channel.name.localeCompare(b.channel.name) * m;
       case "duration":
         return ((a.durationSeconds ?? -1) - (b.durationSeconds ?? -1)) * m;
+      case "views":
+        return (parseViewCount(a.viewCountText) - parseViewCount(b.viewCountText)) * m;
+      case "published":
+        return (a.publishedAt ?? "").localeCompare(b.publishedAt ?? "") * m;
+      case "category":
+        return (a.category ?? "").localeCompare(b.category ?? "") * m;
       case "addedBy":
         return (a.addedBy ?? "").localeCompare(b.addedBy ?? "") * m;
       case "votes":
@@ -223,6 +247,7 @@ function buildRow(
   video: PlaylistVideo,
   playlistId: string,
   isCollab: boolean,
+  hasDetails: boolean,
 ): HTMLTableRowElement {
   const tr = document.createElement("tr");
   tr.className = "ytpf-tr";
@@ -272,6 +297,26 @@ function buildRow(
   }
   tr.appendChild(tdDuration);
 
+  // Views
+  const tdViews = document.createElement("td");
+  tdViews.className = "ytpf-td ytpf-col-views";
+  tdViews.textContent = video.viewCountText ?? "--";
+  tr.appendChild(tdViews);
+
+  if (hasDetails) {
+    // Published
+    const tdPublished = document.createElement("td");
+    tdPublished.className = "ytpf-td ytpf-col-published";
+    tdPublished.textContent = video.publishedAt ?? "--";
+    tr.appendChild(tdPublished);
+
+    // Category
+    const tdCategory = document.createElement("td");
+    tdCategory.className = "ytpf-td ytpf-col-category";
+    tdCategory.textContent = video.category ?? "--";
+    tr.appendChild(tdCategory);
+  }
+
   if (isCollab) {
     // Added by
     const tdAddedBy = document.createElement("td");
@@ -293,13 +338,15 @@ export interface PlaylistTableHandle {
   element: HTMLElement;
   appendVideos(newVideos: PlaylistVideo[]): void;
   setComplete(extractedCount: number): void;
+  updateDetails(updates: DetailUpdate[]): void;
 }
 
 export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   const isCollab = data.videos.some(
     (v) => v.addedBy != null || v.voteCount != null,
   );
-  const columns = getAllColumns().filter((c) => !c.collab || isCollab);
+  let hasDetails = data.videos.some((v) => v.publishedAt != null || v.category != null);
+  let columns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
 
   const wrapper = document.createElement("div");
   wrapper.className = "ytpf-wrapper";
@@ -330,7 +377,26 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   toggle.className = "ytpf-toggle";
   toggle.textContent = "\u25BC";
 
-  header.append(titleSpan, metaSpan, toggle);
+  // Fetch details button
+  const fetchBtn = document.createElement("button");
+  fetchBtn.className = "ytpf-fetch-views-btn";
+  fetchBtn.textContent = t("fetchViews");
+  let detailsFetched = false;
+  fetchBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (detailsFetched) return;
+    const targetIds = videos.filter((v) => v.isPlayable).map((v) => v.videoId);
+    if (targetIds.length === 0) return;
+    detailsFetched = true;
+    fetchBtn.disabled = true;
+    fetchBtn.textContent = `${t("fetchViewsProgress")} 0/${targetIds.length}`;
+    browser.runtime.sendMessage({
+      type: "FETCH_VIDEO_DETAILS",
+      videoIds: targetIds,
+    } satisfies Message);
+  });
+
+  header.append(titleSpan, metaSpan, fetchBtn, toggle);
   wrapper.appendChild(header);
 
   // Filter bar
@@ -349,6 +415,23 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
   filters.appendChild(channelTagInput.container);
 
+  // Category tag input (shown after detail fetch)
+  let categoryTagInput: TagInput | null = null;
+  const categoryFilterContainer = document.createElement("div");
+  categoryFilterContainer.style.display = "none";
+  filters.appendChild(categoryFilterContainer);
+
+  function ensureCategoryFilter() {
+    if (categoryTagInput) return;
+    const categoryNames = [...new Set(
+      videos.map((v) => v.category).filter((c): c is string => c != null),
+    )].sort();
+    if (categoryNames.length === 0) return;
+    categoryTagInput = createTagInput(t("filterCategory"), categoryNames, () => applyFilters());
+    categoryFilterContainer.appendChild(categoryTagInput.container);
+    categoryFilterContainer.style.display = "";
+  }
+
   // Added-by tag input (collab only)
   let addedByTagInput: TagInput | null = null;
   if (isCollab) {
@@ -396,11 +479,13 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   function getFilteredVideos(): PlaylistVideo[] {
     const titleQuery = titleInput.value.toLowerCase();
     const channelTags = channelTagInput.getTags();
+    const categoryTags = categoryTagInput?.getTags() ?? [];
     const addedByTags = addedByTagInput?.getTags() ?? [];
 
     return videos.filter((v) => {
       if (titleQuery && !v.title.toLowerCase().includes(titleQuery)) return false;
       if (channelTags.length > 0 && !channelTags.includes(v.channel.name)) return false;
+      if (categoryTags.length > 0 && (!v.category || !categoryTags.includes(v.category))) return false;
       if (addedByTags.length > 0 && (!v.addedBy || !addedByTags.includes(v.addedBy))) return false;
       return true;
     });
@@ -410,7 +495,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     const filtered = getFilteredVideos();
     tbody.textContent = "";
     for (const video of filtered) {
-      tbody.appendChild(buildRow(video, playlistId, isCollab));
+      tbody.appendChild(buildRow(video, playlistId, isCollab, hasDetails));
     }
     filterCount.textContent = filtered.length < videos.length
       ? `${filtered.length} / ${videos.length}`
@@ -496,5 +581,64 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     updateHeader();
   }
 
-  return { element: wrapper, appendVideos, setComplete };
+  let detailsReceived = 0;
+  let detailsTotal = 0;
+
+  function updateDetails(updates: DetailUpdate[]) {
+    const map = new Map(updates.map((u) => [u.videoId, u]));
+    for (const v of videos) {
+      const u = map.get(v.videoId);
+      if (u) {
+        v.viewCountText = u.viewCountText ?? v.viewCountText;
+        v.publishedAt = u.publishedAt;
+        v.category = u.category;
+      }
+    }
+
+    detailsReceived += updates.length;
+    if (detailsTotal === 0) {
+      detailsTotal = videos.filter((v) => v.isPlayable).length;
+    }
+
+    // Add detail columns on first update if not present
+    if (!hasDetails) {
+      hasDetails = true;
+      columns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+      // Rebuild thead
+      headRow.textContent = "";
+      thElements.length = 0;
+      for (const col of columns) {
+        const th = document.createElement("th");
+        th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
+        th.dataset.sortKey = col.key;
+        th.textContent = col.label;
+        thElements.push(th);
+        headRow.appendChild(th);
+      }
+      updateSortIndicators();
+    }
+
+    // Update category filter
+    ensureCategoryFilter();
+    if (categoryTagInput) {
+      categoryTagInput.addCandidates(
+        updates.map((u) => u.category).filter((c): c is string => c != null),
+      );
+    }
+
+    // Update progress
+    if (detailsReceived < detailsTotal) {
+      fetchBtn.textContent = `${t("fetchViewsProgress")} ${detailsReceived}/${detailsTotal}`;
+    } else {
+      fetchBtn.textContent = t("fetchViewsDone");
+      setTimeout(() => { fetchBtn.style.display = "none"; }, 1500);
+    }
+
+    if (sortKey) {
+      videos.sort(compareFn(sortKey, sortDir));
+    }
+    renderRows();
+  }
+
+  return { element: wrapper, appendVideos, setComplete, updateDetails };
 }

src/injected/page-script.ts

@@ -114,20 +114,37 @@
     // Fetch collaborator names for collaborative playlists
     const avatarToName = await fetchCollaboratorMap(initialData, cfg, baseContext, authHeaders);
 
+    function parseVideoInfo(videoInfo: any): { viewCountText: string | null } {
+      if (!videoInfo) return { viewCountText: null };
+      if (!videoInfo.runs) {
+        const text = textOf(videoInfo);
+        return { viewCountText: text || null };
+      }
+      const runs: string[] = videoInfo.runs.map((r: any) => r.text);
+      // Runs format: ["126万 回視聴", " · ", "6年前"]
+      return { viewCountText: runs[0]?.trim() || null };
+    }
+
     function mapRenderers(renderers: any[], startIndex: number) {
-      return renderers.map((d, i) => ({
+      return renderers.map((d, i) => {
-        videoId: d.videoId,
+        const { viewCountText } = parseVideoInfo(d.videoInfo);
-        title: textOf(d.title),
+        return {
-        index: startIndex + i,
+          videoId: d.videoId,
-        lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
+          title: textOf(d.title),
-        lengthText: textOf(d.lengthText),
+          index: startIndex + i,
-        thumbnails: d.thumbnail?.thumbnails ?? [],
+          lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
-        shortBylineText: d.shortBylineText,
+          lengthText: textOf(d.lengthText),
-        isPlayable: d.isPlayable !== false,
+          thumbnails: d.thumbnail?.thumbnails ?? [],
-        badges: d.badges ?? [],
+          shortBylineText: d.shortBylineText,
-        voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
+          isPlayable: d.isPlayable !== false,
-        addedBy: resolveAddedBy(d, avatarToName),
+          badges: d.badges ?? [],
-      }));
+          viewCountText,
+          publishedAt: null as string | null,
+          category: null as string | null,
+          voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
+          addedBy: resolveAddedBy(d, avatarToName),
+        };
+      });
     }
 
     // Send first page immediately

src/options/options.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <style>
+            body {
+                font-family: "Roboto", "Arial", sans-serif;
+                font-size: 14px;
+                padding: 16px;
+                min-width: 360px;
+                color: #333;
+            }
+            h2 {
+                font-size: 16px;
+                margin: 0 0 12px;
+            }
+            label {
+                display: block;
+                font-size: 12px;
+                color: #606060;
+                margin-bottom: 4px;
+            }
+            input[type="text"] {
+                width: 100%;
+                box-sizing: border-box;
+                padding: 8px 10px;
+                border: 1px solid #ccc;
+                border-radius: 6px;
+                font-size: 13px;
+                font-family: "Roboto Mono", monospace;
+            }
+            .hint {
+                font-size: 11px;
+                color: #999;
+                margin-top: 4px;
+            }
+            .actions {
+                margin-top: 12px;
+                display: flex;
+                gap: 8px;
+            }
+            button {
+                padding: 6px 16px;
+                border: 1px solid #ccc;
+                border-radius: 16px;
+                background: #fff;
+                font-size: 13px;
+                cursor: pointer;
+            }
+            button:hover {
+                background: #f2f2f2;
+            }
+            button.primary {
+                background: #065fd4;
+                color: #fff;
+                border-color: #065fd4;
+            }
+            button.primary:hover {
+                background: #0554b8;
+            }
+            .status {
+                font-size: 12px;
+                margin-top: 8px;
+                color: #1a8a1a;
+            }
+        </style>
+    </head>
+    <body>
+        <h2>YT Playlist Features</h2>
+        <label for="apiKey">YouTube Data API Key</label>
+        <input type="text" id="apiKey" placeholder="..." />
+        <div class="hint">
+            Leave blank to use the default key.
+            <a
+                href="https://console.cloud.google.com/apis/credentials"
+                target="_blank"
+                >Get your own key</a
+            >
+        </div>
+        <div class="actions">
+            <button class="primary" id="save">Save</button>
+            <button id="clear">Clear</button>
+        </div>
+        <div class="status" id="status"></div>
+        <script src="options.js"></script>
+    </body>
+</html>

src/options/options.ts

@@ -0,0 +1,32 @@
+import browser from "webextension-polyfill";
+
+const input = document.getElementById("apiKey") as HTMLInputElement;
+const saveBtn = document.getElementById("save") as HTMLButtonElement;
+const clearBtn = document.getElementById("clear") as HTMLButtonElement;
+const status = document.getElementById("status") as HTMLDivElement;
+
+function flash(text: string) {
+  status.textContent = text;
+  setTimeout(() => { status.textContent = ""; }, 2000);
+}
+
+// Load
+browser.storage.sync.get("apiKey").then((result) => {
+  input.value = (result.apiKey as string) || "";
+});
+
+// Save
+saveBtn.addEventListener("click", () => {
+  const key = input.value.trim();
+  if (key) {
+    browser.storage.sync.set({ apiKey: key }).then(() => flash("Saved"));
+  } else {
+    browser.storage.sync.remove("apiKey").then(() => flash("Using default key"));
+  }
+});
+
+// Clear
+clearBtn.addEventListener("click", () => {
+  input.value = "";
+  browser.storage.sync.remove("apiKey").then(() => flash("Cleared"));
+});

src/shared/category-map.ts

@@ -0,0 +1,18 @@
+/** YouTube video category ID to name mapping */
+export const CATEGORY_MAP: Record<string, string> = {
+  "1": "Film & Animation",
+  "2": "Autos & Vehicles",
+  "10": "Music",
+  "15": "Pets & Animals",
+  "17": "Sports",
+  "19": "Travel & Events",
+  "20": "Gaming",
+  "22": "People & Blogs",
+  "23": "Comedy",
+  "24": "Entertainment",
+  "25": "News & Politics",
+  "26": "Howto & Style",
+  "27": "Education",
+  "28": "Science & Technology",
+  "29": "Nonprofits & Activism",
+};

src/shared/messages.ts

@@ -1,3 +1,7 @@
-import type { PlaylistData } from "../types/playlist";
+import type { PlaylistData, DetailUpdate } from "../types/playlist";
 
-export type Message = { type: "PLAYLIST_EXTRACTED"; data: PlaylistData };
+export type Message =
+  | { type: "PLAYLIST_EXTRACTED"; data: PlaylistData }
+  | { type: "FETCH_VIDEO_DETAILS"; videoIds: string[] }
+  | { type: "VIDEO_DETAILS_UPDATE"; updates: DetailUpdate[] }
+  | { type: "VIDEO_DETAILS_ERROR"; error: string };

src/types/playlist.ts

@@ -21,6 +21,12 @@ export interface PlaylistVideo {
   };
   isPlayable: boolean;
   isLive: boolean;
+  /** Human-readable view count text */
+  viewCountText: string | null;
+  /** Publication date, e.g. "2019-01-15" */
+  publishedAt: string | null;
+  /** Video category, e.g. "Music", "Gaming" */
+  category: string | null;
   /** Name of the collaborator who added this video (collaborative playlists only) */
   addedBy: string | null;
   /** Vote count / approvals (collaborative playlists only) */
@@ -44,6 +50,13 @@ export interface PlaylistMetadata {
   privacy: "public" | "unlisted" | "private" | "unknown";
 }
 
+export interface DetailUpdate {
+  videoId: string;
+  viewCountText: string | null;
+  publishedAt: string | null;
+  category: string | null;
+}
+
 export interface PlaylistData {
   metadata: PlaylistMetadata;
   videos: PlaylistVideo[];