Bump to 0.3.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.3.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.3.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-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "yt-playlist-features",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "yt-playlist-features",
-      "version": "0.1.1",
+      "version": "0.3.0",
       "dependencies": {
         "webextension-polyfill": "^0.12.0"
       },

package.json

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

src/background/service-worker.ts

@@ -1,19 +1,121 @@
 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,
+          likeCount: item.statistics?.likeCount
+            ? parseInt(item.statistics.likeCount, 10)
+            : 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,8 +175,14 @@ 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,
+    likeCount: null,
+    setVideoId: null,
+    voteStatus: null,
   };
 }
 

src/content/index.ts

@@ -3,13 +3,46 @@ 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, updateVoteStatuses } 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,
+    likeCount: v.likeCount ?? null,
+    setVideoId: v.setVideoId ?? null,
+    voteStatus: v.voteStatus ?? null,
+  } satisfies PlaylistVideo;
+}
+
 function ensurePageScript(): void {
   if (pageScriptInjected) return;
   const script = document.createElement("script");
@@ -50,33 +83,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 +112,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 +124,18 @@ 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,35 @@ type MessageKey =
   | "colTitle"
   | "colChannel"
   | "colDuration"
+  | "colViews"
+  | "colPublished"
+  | "colCategory"
+  | "colLikes"
   | "colAddedBy"
   | "colVotes"
   | "filterTitle"
   | "filterChannel"
   | "filterAddedBy"
+  | "filterCategory"
   | "badgeLive"
   | "headerVideos"
-  | "headerLoading";
+  | "headerLoading"
+  | "fetchViews"
+  | "fetchViewsProgress"
+  | "fetchViewsDone"
+  | "colSettings"
+  | "colSettingsReset"
+  | "statsDuration"
+  | "statsChannels"
+  | "statsPlayable"
+  | "statsTotalViews"
+  | "statsDetail"
+  | "statsDetailChannelRank"
+  | "statsDetailAddedByRank"
+  | "statsDetailCategoryBreak"
+  | "statsDetailDurationAvg"
+  | "statsDetailDurationMedian"
+  | "statsDetailVideos";
 
 const messages: Record<string, Record<MessageKey, string>> = {
   ja: {
@@ -18,28 +39,70 @@ const messages: Record<string, Record<MessageKey, string>> = {
     colTitle: "タイトル",
     colChannel: "チャンネル",
     colDuration: "長さ",
+    colViews: "再生数",
+    colPublished: "公開日",
+    colCategory: "カテゴリ",
+    colLikes: "高評価",
     colAddedBy: "追加者",
     colVotes: "投票",
     filterTitle: "タイトル検索...",
     filterChannel: "チャンネル...",
     filterAddedBy: "追加者...",
+    filterCategory: "カテゴリ...",
     badgeLive: "ライブ",
     headerVideos: "本の動画",
     headerLoading: "読み込み中…",
+    fetchViews: "全件詳細を取得",
+    fetchViewsProgress: "取得中…",
+    fetchViewsDone: "取得完了",
+    colSettings: "表示",
+    colSettingsReset: "リセット",
+    statsDuration: "合計時間",
+    statsChannels: "チャンネル",
+    statsPlayable: "再生可能",
+    statsTotalViews: "総再生数",
+    statsDetail: "詳細",
+    statsDetailChannelRank: "チャンネル別",
+    statsDetailAddedByRank: "追加者別",
+    statsDetailCategoryBreak: "カテゴリ別",
+    statsDetailDurationAvg: "平均再生時間",
+    statsDetailDurationMedian: "中央値",
+    statsDetailVideos: "本",
   },
   en: {
     colIndex: "#",
     colTitle: "Title",
     colChannel: "Channel",
     colDuration: "Duration",
+    colViews: "Views",
+    colPublished: "Published",
+    colCategory: "Category",
+    colLikes: "Likes",
     colAddedBy: "Added by",
     colVotes: "Votes",
     filterTitle: "Search title...",
     filterChannel: "Channel...",
     filterAddedBy: "Added by...",
+    filterCategory: "Category...",
     badgeLive: "LIVE",
     headerVideos: "videos",
     headerLoading: "loading…",
+    fetchViews: "Fetch all details",
+    fetchViewsProgress: "Fetching…",
+    fetchViewsDone: "Done",
+    colSettings: "View",
+    colSettingsReset: "Reset",
+    statsDuration: "Total",
+    statsChannels: "Channels",
+    statsPlayable: "Playable",
+    statsTotalViews: "Total views",
+    statsDetail: "Details",
+    statsDetailChannelRank: "By channel",
+    statsDetailAddedByRank: "By contributor",
+    statsDetailCategoryBreak: "By category",
+    statsDetailDurationAvg: "Avg. duration",
+    statsDetailDurationMedian: "Median",
+    statsDetailVideos: "videos",
   },
 };
 

src/content/ui/lifecycle.ts

@@ -1,16 +1,19 @@
 import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
 import { injectStyles } from "./styles";
-import { renderPlaylistTable, type PlaylistTableHandle } from "./table-renderer";
+import type { DetailUpdate } from "../../types/playlist";
+import { renderPlaylistTable, loadColumnPrefs, type PlaylistTableHandle } from "./table-renderer";
 
 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
@@ -38,11 +41,12 @@ function insertAt(el: HTMLElement, anchor: { parent: Element; before: Element |
 
 let pendingObserver: MutationObserver | null = null;
 
-export function mountTable(data: PlaylistData): void {
+export async function mountTable(data: PlaylistData): Promise<void> {
   unmountTable();
   injectStyles();
 
-  currentHandle = renderPlaylistTable(data);
+  const prefs = await loadColumnPrefs();
+  currentHandle = renderPlaylistTable(data, prefs);
   const el = currentHandle.element;
   el.id = CONTAINER_ID;
 
@@ -72,6 +76,14 @@ export function setTableComplete(extractedCount: number): void {
   currentHandle?.setComplete(extractedCount);
 }
 
+export function updateTableDetails(updates: DetailUpdate[]): void {
+  currentHandle?.updateDetails(updates);
+}
+
+export function updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]): void {
+  currentHandle?.updateVoteStatuses(statuses);
+}
+
 export function unmountTable(): void {
   if (pendingObserver) {
     pendingObserver.disconnect();

src/content/ui/styles.ts

@@ -49,6 +49,208 @@ html[dark] .ytpf-toggle {
   transform: rotate(-90deg);
 }
 
+.ytpf-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
+}
+
+html[dark] .ytpf-stats {
+  border-bottom-color: rgba(255,255,255,0.06);
+}
+
+.ytpf-stats--hidden {
+  display: none;
+}
+
+.ytpf-stat {
+  font-size: 12px;
+  color: var(--yt-spec-text-secondary, #606060);
+  white-space: nowrap;
+}
+
+html[dark] .ytpf-stat {
+  color: #aaa;
+}
+
+.ytpf-stat-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-stat-value {
+  color: #f1f1f1;
+}
+
+.ytpf-stats-detail-btn {
+  padding: 2px 8px;
+  border: 1px solid var(--yt-spec-10-percent-layer, rgba(0,0,0,0.2));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 11px;
+  font-family: "Roboto", "Arial", sans-serif;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+html[dark] .ytpf-stats-detail-btn {
+  border-color: rgba(255,255,255,0.2);
+  color: #aaa;
+}
+
+.ytpf-stats-detail-btn:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-stats-detail-btn:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-stats-spacer {
+  flex: 1;
+}
+
+.ytpf-detail-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 12px;
+  padding: 20px 24px;
+  min-width: 360px;
+  max-width: 560px;
+  max-height: 70vh;
+  overflow-y: auto;
+  z-index: 3000;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+  font-family: "Roboto", "Arial", sans-serif;
+  font-size: 13px;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-detail-popup {
+  background: #212121;
+  border-color: rgba(255,255,255,0.1);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  color: #f1f1f1;
+}
+
+.ytpf-detail-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 2999;
+}
+
+.ytpf-detail-popup h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin: 0 0 16px;
+}
+
+.ytpf-detail-section {
+  margin-bottom: 16px;
+}
+
+.ytpf-detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.ytpf-detail-section-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--yt-spec-text-secondary, #606060);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+html[dark] .ytpf-detail-section-title {
+  color: #aaa;
+}
+
+.ytpf-detail-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 3px;
+  font-size: 12px;
+}
+
+.ytpf-detail-bar-label {
+  width: 140px;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ytpf-detail-bar-track {
+  flex: 1;
+  height: 14px;
+  background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.06));
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+html[dark] .ytpf-detail-bar-track {
+  background: rgba(255,255,255,0.08);
+}
+
+.ytpf-detail-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--yt-spec-call-to-action, #065fd4);
+  opacity: 0.7;
+}
+
+html[dark] .ytpf-detail-bar-fill {
+  background: #3ea6ff;
+}
+
+.ytpf-detail-bar-count {
+  width: 48px;
+  flex-shrink: 0;
+  text-align: right;
+  font-family: "Roboto Mono", monospace;
+  font-size: 11px;
+  color: var(--yt-spec-text-secondary, #606060);
+}
+
+html[dark] .ytpf-detail-bar-count {
+  color: #aaa;
+}
+
+.ytpf-detail-kv {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.ytpf-detail-kv-item {
+  color: var(--yt-spec-text-secondary, #606060);
+}
+
+html[dark] .ytpf-detail-kv-item {
+  color: #aaa;
+}
+
+.ytpf-detail-kv-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-detail-kv-value {
+  color: #f1f1f1;
+}
+
 .ytpf-filters {
   display: flex;
   align-items: flex-start;
@@ -242,6 +444,7 @@ html[dark] .ytpf-filter-count {
 }
 
 .ytpf-th {
+  position: relative;
   text-align: left;
   padding: 8px 12px;
   font-weight: 500;
@@ -307,8 +510,249 @@ 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-likes { width: 90px; text-align: right; font-family: "Roboto Mono", monospace; }
 .ytpf-col-addedby { width: 140px; }
-.ytpf-col-votes { width: 60px; text-align: center; font-family: "Roboto Mono", monospace; }
+.ytpf-col-votes { width: 90px; text-align: center; font-family: "Roboto Mono", monospace; }
+
+.ytpf-vote {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ytpf-vote-btn {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+html[dark] .ytpf-vote-btn {
+  color: #aaa;
+}
+
+.ytpf-vote-btn:hover:not(:disabled) {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+  color: var(--yt-spec-text-primary, #0f0f0f);
+}
+
+html[dark] .ytpf-vote-btn:hover:not(:disabled) {
+  background: #3e3e3e;
+  color: #f1f1f1;
+}
+
+.ytpf-vote-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.ytpf-vote-count {
+  min-width: 16px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.ytpf-vote-count--voted {
+  font-weight: 700;
+}
+
+.ytpf-vote-btn--active {
+  color: var(--yt-spec-call-to-action, #065fd4);
+}
+
+html[dark] .ytpf-vote-btn--active {
+  color: #3ea6ff;
+}
+
+.ytpf-vote-btn--dim {
+  opacity: 0.25;
+}
+
+.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-menu-anchor {
+  position: relative;
+}
+
+.ytpf-menu-btn {
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.ytpf-menu-btn:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-btn {
+  color: #aaa;
+}
+
+html[dark] .ytpf-menu-btn:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 8px;
+  padding: 4px 0;
+  min-width: 160px;
+  z-index: 2001;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+html[dark] .ytpf-menu {
+  background: #282828;
+  border-color: rgba(255,255,255,0.1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+.ytpf-menu-heading {
+  padding: 6px 12px 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--yt-spec-text-secondary, #606060);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+html[dark] .ytpf-menu-heading {
+  color: #aaa;
+}
+
+.ytpf-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  font-size: 13px;
+  color: var(--yt-spec-text-primary, #0f0f0f);
+  cursor: pointer;
+}
+
+html[dark] .ytpf-menu-item {
+  color: #f1f1f1;
+}
+
+.ytpf-menu-item:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-item:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-menu-item input[type="checkbox"] {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.ytpf-menu-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--yt-spec-10-percent-layer, rgba(0,0,0,0.1));
+}
+
+html[dark] .ytpf-menu-sep {
+  background: rgba(255,255,255,0.1);
+}
+
+.ytpf-menu-action {
+  display: block;
+  width: 100%;
+  padding: 5px 12px;
+  border: none;
+  background: transparent;
+  color: var(--yt-spec-text-secondary, #606060);
+  font-size: 12px;
+  font-family: "Roboto", "Arial", sans-serif;
+  cursor: pointer;
+  text-align: left;
+}
+
+html[dark] .ytpf-menu-action {
+  color: #aaa;
+}
+
+.ytpf-menu-action:hover {
+  background: var(--yt-spec-badge-chip-background, #f2f2f2);
+}
+
+html[dark] .ytpf-menu-action:hover {
+  background: #3e3e3e;
+}
+
+.ytpf-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.ytpf-resize-handle:hover,
+.ytpf-resize-handle--active {
+  background: var(--yt-spec-call-to-action, #065fd4);
+  opacity: 0.4;
+}
+
+html[dark] .ytpf-resize-handle:hover,
+html[dark] .ytpf-resize-handle--active {
+  background: #3ea6ff;
+  opacity: 0.4;
+}
 .ytpf-tr--unplayable {
   opacity: 0.45;
 }

src/content/ui/table-renderer.ts

@@ -1,27 +1,75 @@
-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" | "likes" | "published" | "category" | "addedBy" | "votes";
 type SortDir = "asc" | "desc";
 
 interface Column {
   label: string;
   cls: string;
   key: SortKey;
-  collab?: boolean; // only shown for collaborative playlists
+  collab?: boolean;
+  detail?: boolean;
+  defaultWidth: number; // default width in %
 }
 
-function getAllColumns(): Column[] {
+function getAllColumns(hasDetails: boolean): Column[] {
   return [
-    { label: t("colIndex"), cls: "ytpf-col-index", key: "index" },
+    { label: t("colIndex"), cls: "ytpf-col-index", key: "index", defaultWidth: 5 },
-    { label: t("colTitle"), cls: "ytpf-col-title", key: "title" },
+    { label: t("colTitle"), cls: "ytpf-col-title", key: "title", defaultWidth: 40 },
-    { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel" },
+    { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel", defaultWidth: 20 },
-    { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration" },
+    { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration", defaultWidth: 8 },
-    { label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true },
+    { label: t("colViews"), cls: "ytpf-col-views", key: "views", defaultWidth: 12 },
-    { label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true },
+    { label: t("colLikes"), cls: "ytpf-col-likes", key: "likes", detail: true, defaultWidth: 9 },
+    { label: t("colPublished"), cls: "ytpf-col-published", key: "published", detail: true, defaultWidth: 10 },
+    { label: t("colCategory"), cls: "ytpf-col-category", key: "category", detail: true, defaultWidth: 10 },
+    { label: t("colAddedBy"), cls: "ytpf-col-addedby", key: "addedBy", collab: true, defaultWidth: 14 },
+    { label: t("colVotes"), cls: "ytpf-col-votes", key: "votes", collab: true, defaultWidth: 6 },
   ];
 }
 
+// --- Column preferences persistence ---
+
+interface ColumnPref {
+  visible: boolean;
+  width: number;
+}
+
+export type ColumnPrefs = Record<string, ColumnPref>;
+
+export async function loadColumnPrefs(): Promise<ColumnPrefs> {
+  const result = await browser.storage.local.get("ytpf-column-prefs");
+  return (result["ytpf-column-prefs"] as ColumnPrefs) ?? {};
+}
+
+async function saveColumnPrefs(prefs: ColumnPrefs): Promise<void> {
+  await browser.storage.local.set({ "ytpf-column-prefs": prefs });
+}
+
+function getColumnVisible(col: Column, prefs: ColumnPrefs): boolean {
+  return prefs[col.key]?.visible ?? true;
+}
+
+function getColumnWidth(col: Column, prefs: ColumnPrefs): number {
+  return prefs[col.key]?.width ?? col.defaultWidth;
+}
+
+function getVisibleColumns(available: Column[], prefs: ColumnPrefs): Column[] {
+  return available.filter((c) => getColumnVisible(c, prefs));
+}
+
+function applyColumnWidths(thElements: HTMLTableCellElement[], visibleColumns: Column[], prefs: ColumnPrefs): void {
+  const widths = visibleColumns.map((c) => getColumnWidth(c, prefs));
+  const total = widths.reduce((a, b) => a + b, 0);
+  for (let i = 0; i < thElements.length; i++) {
+    thElements[i].style.width = `${(widths[i] / total) * 100}%`;
+  }
+}
+
+// --- Tag input ---
+
 interface TagInput {
   container: HTMLElement;
   getTags(): string[];
@@ -199,6 +247,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 +271,14 @@ 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 "likes":
+        return ((a.likeCount ?? -1) - (b.likeCount ?? -1)) * 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":
@@ -219,71 +287,123 @@ function compareFn(key: SortKey, dir: SortDir) {
   };
 }
 
+type VoteHandler = (video: PlaylistVideo, action: "up" | "down") => void;
+
+function buildCell(
+  video: PlaylistVideo,
+  col: Column,
+  playlistId: string,
+  onVote?: VoteHandler,
+): HTMLTableCellElement {
+  const td = document.createElement("td");
+  td.className = `ytpf-td ${col.cls}`;
+
+  switch (col.key) {
+    case "index":
+      td.textContent = String(video.index + 1);
+      break;
+    case "title": {
+      const link = document.createElement("a");
+      link.className = "ytpf-link";
+      link.href = `/watch?v=${video.videoId}&list=${playlistId}`;
+      link.textContent = video.title;
+      link.title = video.title;
+      td.appendChild(link);
+      break;
+    }
+    case "channel":
+      if (video.channel.url) {
+        const link = document.createElement("a");
+        link.className = "ytpf-link";
+        link.href = video.channel.url;
+        link.textContent = video.channel.name;
+        td.appendChild(link);
+      } else {
+        td.textContent = video.channel.name;
+      }
+      break;
+    case "duration":
+      if (video.isLive) {
+        const badge = document.createElement("span");
+        badge.className = "ytpf-live";
+        badge.textContent = t("badgeLive");
+        td.appendChild(badge);
+      } else {
+        td.textContent = video.durationText ?? "--";
+      }
+      break;
+    case "views":
+      td.textContent = video.viewCountText ?? "--";
+      break;
+    case "likes":
+      td.textContent = video.likeCount != null ? video.likeCount.toLocaleString() : "--";
+      break;
+    case "published":
+      td.textContent = video.publishedAt ?? "--";
+      break;
+    case "category":
+      td.textContent = video.category ?? "--";
+      break;
+    case "addedBy":
+      td.textContent = video.addedBy ?? "--";
+      break;
+    case "votes":
+      if (video.setVideoId && onVote) {
+        const wrap = document.createElement("span");
+        wrap.className = "ytpf-vote";
+
+        const vs = video.voteStatus;
+
+        const upBtn = document.createElement("button");
+        upBtn.className = "ytpf-vote-btn";
+        if (vs === "up") upBtn.classList.add("ytpf-vote-btn--active");
+        else if (vs === "down") upBtn.classList.add("ytpf-vote-btn--dim");
+        upBtn.textContent = "\u25B2";
+        upBtn.title = "Vote up";
+        upBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onVote(video, "up");
+        });
+
+        const countSpan = document.createElement("span");
+        countSpan.className = "ytpf-vote-count";
+        if (vs) countSpan.classList.add("ytpf-vote-count--voted");
+        countSpan.textContent = video.voteCount != null ? String(video.voteCount) : "0";
+
+        const downBtn = document.createElement("button");
+        downBtn.className = "ytpf-vote-btn";
+        if (vs === "down") downBtn.classList.add("ytpf-vote-btn--active");
+        else if (vs === "up") downBtn.classList.add("ytpf-vote-btn--dim");
+        downBtn.textContent = "\u25BC";
+        downBtn.title = "Vote down";
+        downBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onVote(video, "down");
+        });
+
+        wrap.append(upBtn, countSpan, downBtn);
+        td.appendChild(wrap);
+      } else {
+        td.textContent = video.voteCount != null ? String(video.voteCount) : "--";
+      }
+      break;
+  }
+
+  return td;
+}
+
 function buildRow(
   video: PlaylistVideo,
   playlistId: string,
-  isCollab: boolean,
+  visibleColumns: Column[],
+  onVote?: VoteHandler,
 ): HTMLTableRowElement {
   const tr = document.createElement("tr");
   tr.className = "ytpf-tr";
   if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");
 
-  // Index
+  for (const col of visibleColumns) {
-  const tdIndex = document.createElement("td");
+    tr.appendChild(buildCell(video, col, playlistId, onVote));
-  tdIndex.className = "ytpf-td ytpf-col-index";
-  tdIndex.textContent = String(video.index + 1);
-  tr.appendChild(tdIndex);
-
-  // Title
-  const tdTitle = document.createElement("td");
-  tdTitle.className = "ytpf-td ytpf-col-title";
-  const titleLink = document.createElement("a");
-  titleLink.className = "ytpf-link";
-  titleLink.href = `/watch?v=${video.videoId}&list=${playlistId}`;
-  titleLink.textContent = video.title;
-  titleLink.title = video.title;
-  tdTitle.appendChild(titleLink);
-  tr.appendChild(tdTitle);
-
-  // Channel
-  const tdChannel = document.createElement("td");
-  tdChannel.className = "ytpf-td ytpf-col-channel";
-  if (video.channel.url) {
-    const chLink = document.createElement("a");
-    chLink.className = "ytpf-link";
-    chLink.href = video.channel.url;
-    chLink.textContent = video.channel.name;
-    tdChannel.appendChild(chLink);
-  } else {
-    tdChannel.textContent = video.channel.name;
-  }
-  tr.appendChild(tdChannel);
-
-  // Duration
-  const tdDuration = document.createElement("td");
-  tdDuration.className = "ytpf-td ytpf-col-duration";
-  if (video.isLive) {
-    const badge = document.createElement("span");
-    badge.className = "ytpf-live";
-    badge.textContent = t("badgeLive");
-    tdDuration.appendChild(badge);
-  } else {
-    tdDuration.textContent = video.durationText ?? "--";
-  }
-  tr.appendChild(tdDuration);
-
-  if (isCollab) {
-    // Added by
-    const tdAddedBy = document.createElement("td");
-    tdAddedBy.className = "ytpf-td ytpf-col-addedby";
-    tdAddedBy.textContent = video.addedBy ?? "--";
-    tr.appendChild(tdAddedBy);
-
-    // Votes
-    const tdVotes = document.createElement("td");
-    tdVotes.className = "ytpf-td ytpf-col-votes";
-    tdVotes.textContent = video.voteCount != null ? String(video.voteCount) : "--";
-    tr.appendChild(tdVotes);
   }
 
   return tr;
@@ -293,13 +413,18 @@ export interface PlaylistTableHandle {
   element: HTMLElement;
   appendVideos(newVideos: PlaylistVideo[]): void;
   setComplete(extractedCount: number): void;
+  updateDetails(updates: DetailUpdate[]): void;
+  updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]): void;
 }
 
-export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
+export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs): 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 availableColumns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+  let visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
 
   const wrapper = document.createElement("div");
   wrapper.className = "ytpf-wrapper";
@@ -320,19 +445,325 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   }
   updateHeader();
 
-  const metaSpan = document.createElement("span");
-  metaSpan.className = "ytpf-header-meta";
-  if (data.metadata.totalDurationText) {
-    metaSpan.textContent = data.metadata.totalDurationText;
-  }
-
   const toggle = document.createElement("span");
   toggle.className = "ytpf-toggle";
   toggle.textContent = "\u25BC";
 
-  header.append(titleSpan, metaSpan, toggle);
+  // ⋮ kebab menu
+  const menuAnchor = document.createElement("div");
+  menuAnchor.className = "ytpf-menu-anchor";
+
+  const menuBtn = document.createElement("button");
+  menuBtn.className = "ytpf-menu-btn";
+  menuBtn.textContent = "\u22EE"; // ⋮
+  menuAnchor.appendChild(menuBtn);
+
+  let menuPanel: HTMLElement | null = null;
+
+  function buildMenu(): HTMLElement {
+    const panel = document.createElement("div");
+    panel.className = "ytpf-menu";
+
+    const heading = document.createElement("div");
+    heading.className = "ytpf-menu-heading";
+    heading.textContent = t("colSettings");
+    panel.appendChild(heading);
+
+    for (const col of availableColumns) {
+      const item = document.createElement("label");
+      item.className = "ytpf-menu-item";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = getColumnVisible(col, columnPrefs);
+
+      const span = document.createElement("span");
+      span.textContent = col.label;
+
+      checkbox.addEventListener("change", () => {
+        if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
+        columnPrefs[col.key].visible = checkbox.checked;
+        onColumnsChanged();
+      });
+
+      item.append(checkbox, span);
+      panel.appendChild(item);
+    }
+
+    // Separator + reset
+    const sep = document.createElement("div");
+    sep.className = "ytpf-menu-sep";
+    panel.appendChild(sep);
+
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "ytpf-menu-action";
+    resetBtn.textContent = t("colSettingsReset");
+    resetBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      for (const key of Object.keys(columnPrefs)) delete columnPrefs[key];
+      onColumnsChanged();
+      // Sync checkboxes
+      panel.querySelectorAll<HTMLInputElement>('.ytpf-menu-item input[type="checkbox"]').forEach((cb) => {
+        cb.checked = true;
+      });
+    });
+    panel.appendChild(resetBtn);
+
+    return panel;
+  }
+
+  function closeMenu() {
+    if (menuPanel) {
+      menuPanel.remove();
+      menuPanel = null;
+    }
+  }
+
+  menuBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (menuPanel) {
+      closeMenu();
+    } else {
+      menuPanel = buildMenu();
+      menuAnchor.appendChild(menuPanel);
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    if (menuPanel && !menuAnchor.contains(e.target as Node)) {
+      closeMenu();
+    }
+  });
+
+  header.append(titleSpan, toggle);
   wrapper.appendChild(header);
 
+  // Stats bar (between header and filters)
+  const statsBar = document.createElement("div");
+  statsBar.className = "ytpf-stats";
+
+  function makeStat(label: string, value: string): HTMLElement {
+    const span = document.createElement("span");
+    span.className = "ytpf-stat";
+    span.textContent = `${label}: `;
+    const val = document.createElement("span");
+    val.className = "ytpf-stat-value";
+    val.textContent = value;
+    span.appendChild(val);
+    return span;
+  }
+
+  function formatNumber(n: number): string {
+    return n.toLocaleString();
+  }
+
+  function formatDuration(totalSec: number): string {
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${m}:${String(s).padStart(2, "0")}`;
+  }
+
+  const statDuration = makeStat(t("statsDuration"), data.metadata.totalDurationText ?? "--");
+  const statChannels = makeStat(t("statsChannels"), "0");
+  const statPlayable = makeStat(t("statsPlayable"), "0");
+  const statTotalViews = makeStat(t("statsTotalViews"), "--");
+  statTotalViews.style.display = "none";
+
+  function updateStats() {
+    const channelSet = new Set(videos.map((v) => v.channel.name));
+    statChannels.querySelector(".ytpf-stat-value")!.textContent = String(channelSet.size);
+    const playable = videos.filter((v) => v.isPlayable).length;
+    statPlayable.querySelector(".ytpf-stat-value")!.textContent =
+      playable === videos.length ? String(playable) : `${playable}/${videos.length}`;
+    // Duration from individual videos (more accurate than metadata when appending)
+    const totalSec = videos.reduce((sum, v) => sum + (v.durationSeconds ?? 0), 0);
+    if (totalSec > 0) {
+      statDuration.querySelector(".ytpf-stat-value")!.textContent = formatDuration(totalSec);
+    }
+    // Total views (only when some videos have viewCountText)
+    const viewCounts = videos.map((v) => parseViewCount(v.viewCountText)).filter((n) => n >= 0);
+    if (viewCounts.length > 0) {
+      const total = viewCounts.reduce((a, b) => a + b, 0);
+      statTotalViews.querySelector(".ytpf-stat-value")!.textContent = formatNumber(total);
+      statTotalViews.style.display = "";
+    }
+  }
+
+  // Stats detail button + popup
+  const detailBtn = document.createElement("button");
+  detailBtn.className = "ytpf-stats-detail-btn";
+  detailBtn.textContent = t("statsDetail");
+
+  function countBy<T>(arr: T[], keyFn: (item: T) => string | null): [string, number][] {
+    const map = new Map<string, number>();
+    for (const item of arr) {
+      const key = keyFn(item);
+      if (key != null) map.set(key, (map.get(key) ?? 0) + 1);
+    }
+    return [...map.entries()].sort((a, b) => b[1] - a[1]);
+  }
+
+  function buildDetailPopup(): { backdrop: HTMLElement; popup: HTMLElement } {
+    const backdrop = document.createElement("div");
+    backdrop.className = "ytpf-detail-popup-backdrop";
+
+    const popup = document.createElement("div");
+    popup.className = "ytpf-detail-popup";
+
+    const title = document.createElement("h3");
+    title.textContent = `${data.metadata.title} — ${t("statsDetail")}`;
+    popup.appendChild(title);
+
+    // Duration stats
+    const durations = videos
+      .map((v) => v.durationSeconds)
+      .filter((d): d is number => d != null && d > 0)
+      .sort((a, b) => a - b);
+
+    if (durations.length > 0) {
+      const avg = Math.round(durations.reduce((a, b) => a + b, 0) / durations.length);
+      const median = durations[Math.floor(durations.length / 2)];
+
+      const section = document.createElement("div");
+      section.className = "ytpf-detail-section";
+      const kv = document.createElement("div");
+      kv.className = "ytpf-detail-kv";
+
+      function addKV(label: string, value: string) {
+        const item = document.createElement("span");
+        item.className = "ytpf-detail-kv-item";
+        item.textContent = `${label}: `;
+        const val = document.createElement("span");
+        val.className = "ytpf-detail-kv-value";
+        val.textContent = value;
+        item.appendChild(val);
+        kv.appendChild(item);
+      }
+
+      addKV(t("statsDetailDurationAvg"), formatDuration(avg));
+      addKV(t("statsDetailDurationMedian"), formatDuration(median));
+      section.appendChild(kv);
+      popup.appendChild(section);
+    }
+
+    // Channel ranking
+    const channelCounts = countBy(videos, (v) => v.channel.name);
+    if (channelCounts.length > 0) {
+      popup.appendChild(buildBarSection(
+        t("statsDetailChannelRank"),
+        channelCounts.slice(0, 20),
+        channelCounts[0][1],
+      ));
+    }
+
+    // Added-by ranking (collab)
+    if (isCollab) {
+      const addedByCounts = countBy(videos, (v) => v.addedBy);
+      if (addedByCounts.length > 0) {
+        popup.appendChild(buildBarSection(
+          t("statsDetailAddedByRank"),
+          addedByCounts,
+          addedByCounts[0][1],
+        ));
+      }
+    }
+
+    // Category breakdown (after detail fetch)
+    const categoryCounts = countBy(videos, (v) => v.category);
+    if (categoryCounts.length > 0) {
+      popup.appendChild(buildBarSection(
+        t("statsDetailCategoryBreak"),
+        categoryCounts,
+        categoryCounts[0][1],
+      ));
+    }
+
+    return { backdrop, popup };
+  }
+
+  function buildBarSection(title: string, entries: [string, number][], maxCount: number): HTMLElement {
+    const section = document.createElement("div");
+    section.className = "ytpf-detail-section";
+
+    const heading = document.createElement("div");
+    heading.className = "ytpf-detail-section-title";
+    heading.textContent = title;
+    section.appendChild(heading);
+
+    for (const [name, count] of entries) {
+      const row = document.createElement("div");
+      row.className = "ytpf-detail-bar-row";
+
+      const label = document.createElement("span");
+      label.className = "ytpf-detail-bar-label";
+      label.textContent = name;
+      label.title = name;
+
+      const track = document.createElement("div");
+      track.className = "ytpf-detail-bar-track";
+      const fill = document.createElement("div");
+      fill.className = "ytpf-detail-bar-fill";
+      fill.style.width = `${(count / maxCount) * 100}%`;
+      track.appendChild(fill);
+
+      const countSpan = document.createElement("span");
+      countSpan.className = "ytpf-detail-bar-count";
+      countSpan.textContent = String(count);
+
+      row.append(label, track, countSpan);
+      section.appendChild(row);
+    }
+
+    return section;
+  }
+
+  let detailPopupOpen = false;
+
+  detailBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (detailPopupOpen) return;
+    detailPopupOpen = true;
+
+    const { backdrop, popup } = buildDetailPopup();
+
+    function close() {
+      backdrop.remove();
+      popup.remove();
+      detailPopupOpen = false;
+    }
+
+    backdrop.addEventListener("click", close);
+    document.body.appendChild(backdrop);
+    document.body.appendChild(popup);
+  });
+
+  const statsSpacer = document.createElement("span");
+  statsSpacer.className = "ytpf-stats-spacer";
+
+  // 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);
+  });
+
+  statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, detailBtn, statsSpacer, fetchBtn);
+  wrapper.appendChild(statsBar);
+
   // Filter bar
   const filters = document.createElement("div");
   filters.className = "ytpf-filters";
@@ -344,12 +775,26 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   titleInput.placeholder = t("filterTitle");
   filters.appendChild(titleInput);
 
-  // Channel tag input
   const channelNames = [...new Set(data.videos.map((v) => v.channel.name))].sort();
   const channelTagInput = createTagInput(t("filterChannel"), channelNames, () => applyFilters());
   filters.appendChild(channelTagInput.container);
 
-  // Added-by tag input (collab only)
+  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 = "";
+  }
+
   let addedByTagInput: TagInput | null = null;
   if (isCollab) {
     const addedByNames = [...new Set(
@@ -363,6 +808,8 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   filterCount.className = "ytpf-filter-count";
   filters.appendChild(filterCount);
 
+  filters.appendChild(menuAnchor);
+
   wrapper.appendChild(filters);
 
   // Body (table container)
@@ -372,19 +819,80 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   const table = document.createElement("table");
   table.className = "ytpf-table";
 
+  // Sort state (declared early for buildThead → updateSortIndicators)
+  let sortKey: SortKey | null = null;
+  let sortDir: SortDir = "asc";
+
   // Thead
   const thead = document.createElement("thead");
   const headRow = document.createElement("tr");
-  const thElements: HTMLTableCellElement[] = [];
+  let thElements: HTMLTableCellElement[] = [];
 
-  for (const col of columns) {
+  function attachResizeHandles() {
-    const th = document.createElement("th");
+    for (let i = 0; i < thElements.length - 1; i++) {
-    th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
+      const handle = document.createElement("div");
-    th.dataset.sortKey = col.key;
+      handle.className = "ytpf-resize-handle";
-    th.textContent = col.label;
+      thElements[i].appendChild(handle);
-    thElements.push(th);
+
-    headRow.appendChild(th);
+      const idx = i;
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handle.classList.add("ytpf-resize-handle--active");
+
+        const startX = e.clientX;
+        const tableWidth = table.getBoundingClientRect().width;
+        const startLeftPx = thElements[idx].getBoundingClientRect().width;
+        const startRightPx = thElements[idx + 1].getBoundingClientRect().width;
+        const minPx = 30;
+
+        function onMouseMove(ev: MouseEvent) {
+          const delta = ev.clientX - startX;
+          const newLeftPx = Math.max(minPx, startLeftPx + delta);
+          const newRightPx = Math.max(minPx, startRightPx - delta);
+          thElements[idx].style.width = `${(newLeftPx / tableWidth) * 100}%`;
+          thElements[idx + 1].style.width = `${(newRightPx / tableWidth) * 100}%`;
+        }
+
+        function onMouseUp() {
+          handle.classList.remove("ytpf-resize-handle--active");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+
+          // Persist all visible column widths
+          const tw = table.getBoundingClientRect().width;
+          for (let j = 0; j < visibleColumns.length; j++) {
+            const col = visibleColumns[j];
+            const pct = (thElements[j].getBoundingClientRect().width / tw) * 100;
+            if (!columnPrefs[col.key]) columnPrefs[col.key] = { visible: true, width: col.defaultWidth };
+            columnPrefs[col.key].width = Math.round(pct * 10) / 10;
+          }
+          saveColumnPrefs(columnPrefs);
+        }
+
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+    }
   }
+
+  function buildThead() {
+    headRow.textContent = "";
+    thElements = [];
+    for (const col of visibleColumns) {
+      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);
+    }
+    applyColumnWidths(thElements, visibleColumns, columnPrefs);
+    attachResizeHandles();
+    updateSortIndicators();
+  }
+
+  buildThead();
   thead.appendChild(headRow);
   table.appendChild(thead);
 
@@ -396,21 +904,93 @@ 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;
     });
   }
 
+  // Vote handler for collaborative playlists
+  const pendingVotes = new Map<string, { prevCount: number; prevStatus: "up" | "down" | null }>();
+
+  const voteHandler: VoteHandler | undefined = isCollab
+    ? (video, action) => {
+        if (!video.setVideoId || pendingVotes.has(video.setVideoId)) return;
+
+        // Save previous state for revert
+        const prevCount = video.voteCount ?? 0;
+        const prevStatus = video.voteStatus;
+        pendingVotes.set(video.setVideoId, { prevCount, prevStatus });
+
+        // Optimistic update
+        if (action === "up") {
+          if (video.voteStatus === "up") {
+            video.voteCount = prevCount - 1;
+            video.voteStatus = null;
+          } else {
+            video.voteCount = prevCount + 1;
+            video.voteStatus = "up";
+          }
+        } else {
+          if (video.voteStatus === "down") {
+            video.voteCount = prevCount + 1;
+            video.voteStatus = null;
+          } else {
+            video.voteCount = prevCount - 1;
+            video.voteStatus = "down";
+          }
+        }
+        renderRows();
+
+        // Dispatch to page script
+        document.dispatchEvent(
+          new CustomEvent("__yt_playlist_ext_vote", {
+            detail: JSON.stringify({
+              setVideoId: video.setVideoId,
+              action,
+            }),
+          }),
+        );
+      }
+    : undefined;
+
+  // Listen for vote results from page script
+  if (isCollab) {
+    document.addEventListener("__yt_playlist_ext_vote_result", ((e: Event) => {
+      const { setVideoId, success, newVoteStatus } = JSON.parse((e as CustomEvent).detail);
+      const prev = pendingVotes.get(setVideoId);
+      pendingVotes.delete(setVideoId);
+
+      if (!success && prev) {
+        // Revert optimistic update
+        const video = videos.find((v) => v.setVideoId === setVideoId);
+        if (video) {
+          video.voteCount = prev.prevCount;
+          video.voteStatus = prev.prevStatus;
+          renderRows();
+        }
+      } else if (success) {
+        // Confirm new status
+        const video = videos.find((v) => v.setVideoId === setVideoId);
+        if (video) {
+          video.voteStatus = (newVoteStatus as "up" | "down" | null) ?? null;
+          renderRows();
+        }
+      }
+    }) as EventListener);
+  }
+
   function renderRows() {
     const filtered = getFilteredVideos();
     tbody.textContent = "";
     for (const video of filtered) {
-      tbody.appendChild(buildRow(video, playlistId, isCollab));
+      tbody.appendChild(buildRow(video, playlistId, visibleColumns, voteHandler));
     }
     filterCount.textContent = filtered.length < videos.length
       ? `${filtered.length} / ${videos.length}`
@@ -424,10 +1004,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   titleInput.addEventListener("input", applyFilters);
 
   renderRows();
-
+  updateStats();
-  // Sort state
-  let sortKey: SortKey | null = null;
-  let sortDir: SortDir = "asc";
 
   function updateSortIndicators() {
     for (const th of thElements) {
@@ -459,6 +1036,14 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     renderRows();
   });
 
+  // Column visibility/width change handler
+  function onColumnsChanged() {
+    visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
+    buildThead();
+    renderRows();
+    saveColumnPrefs(columnPrefs);
+  }
+
   table.appendChild(tbody);
   body.appendChild(table);
   wrapper.appendChild(body);
@@ -466,6 +1051,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   // Toggle collapse
   header.addEventListener("click", () => {
     body.classList.toggle("ytpf-body--hidden");
+    statsBar.classList.toggle("ytpf-stats--hidden");
     filters.classList.toggle("ytpf-filters--hidden");
     toggle.classList.toggle("ytpf-toggle--collapsed");
   });
@@ -474,7 +1060,6 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     videos.push(...newVideos);
     extractedCount += newVideos.length;
 
-    // Update filter candidates
     channelTagInput.addCandidates(newVideos.map((v) => v.channel.name));
     if (addedByTagInput) {
       addedByTagInput.addCandidates(
@@ -482,12 +1067,12 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
       );
     }
 
-    // Re-sort if a sort is active
     if (sortKey) {
       videos.sort(compareFn(sortKey, sortDir));
     }
     renderRows();
     updateHeader();
+    updateStats();
   }
 
   function setComplete(count: number) {
@@ -496,5 +1081,72 @@ 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;
+        v.likeCount = u.likeCount ?? v.likeCount;
+      }
+    }
+
+    detailsReceived += updates.length;
+    if (detailsTotal === 0) {
+      detailsTotal = videos.filter((v) => v.isPlayable).length;
+    }
+
+    if (!hasDetails) {
+      hasDetails = true;
+      availableColumns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
+      visibleColumns = getVisibleColumns(availableColumns, columnPrefs);
+      buildThead();
+      // Rebuild menu if open
+      if (menuPanel) {
+        closeMenu();
+        menuPanel = buildMenu();
+        menuAnchor.appendChild(menuPanel);
+      }
+    }
+
+    ensureCategoryFilter();
+    if (categoryTagInput) {
+      categoryTagInput.addCandidates(
+        updates.map((u) => u.category).filter((c): c is string => c != null),
+      );
+    }
+
+    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();
+    updateStats();
+  }
+
+  function updateVoteStatuses(statuses: { setVideoId: string; voteStatus: "up" | "down" | null }[]) {
+    const map = new Map(statuses.map((s) => [s.setVideoId, s.voteStatus]));
+    let changed = false;
+    for (const v of videos) {
+      const status = map.get(v.setVideoId ?? "");
+      if (status !== undefined && v.voteStatus !== status) {
+        v.voteStatus = status;
+        changed = true;
+      }
+    }
+    if (changed) renderRows();
+  }
+
+  return { element: wrapper, appendVideos, setComplete, updateDetails, updateVoteStatuses };
 }

src/injected/page-script.ts

@@ -20,6 +20,54 @@
   let collabCache: Map<string, string> = new Map();
   let collabCachePlaylistId: string | null = null;
 
+  // Cache vote feedback tokens per setVideoId
+  interface VoteFeedback {
+    upToken: string | null;
+    upToggledToken: string | null;
+    downToken: string | null;
+    downToggledToken: string | null;
+    isUpToggled: boolean;
+    isDownToggled: boolean;
+  }
+  const voteFeedbackCache = new Map<string, VoteFeedback>();
+
+  function extractTokenFromButtonVM(model: any): string | null {
+    return model?.buttonViewModel?.onTap?.innertubeCommand
+      ?.feedbackEndpoint?.feedbackToken ?? null;
+  }
+
+  /** Extract vote feedback tokens from playlistVideoRenderer.engagementBar */
+  function extractVoteInfo(renderer: any): "up" | "down" | null {
+    const setVideoId = renderer.setVideoId;
+    if (!setVideoId) return null;
+
+    const actions = renderer.engagementBar?.engagementBarViewModel?.actions;
+    if (!actions) return null;
+
+    for (const action of actions) {
+      const voting = action.votingViewModel;
+      if (!voting) continue;
+
+      const up = voting.upvoteButton?.toggleButtonViewModel;
+      const down = voting.downvoteButton?.toggleButtonViewModel;
+
+      const info: VoteFeedback = {
+        upToken: extractTokenFromButtonVM(up?.defaultButtonViewModel),
+        upToggledToken: extractTokenFromButtonVM(up?.toggledButtonViewModel),
+        downToken: extractTokenFromButtonVM(down?.defaultButtonViewModel),
+        downToggledToken: extractTokenFromButtonVM(down?.toggledButtonViewModel),
+        isUpToggled: !!up?.isToggled,
+        isDownToggled: !!down?.isToggled,
+      };
+
+      if (info.upToken || info.downToken) {
+        voteFeedbackCache.set(setVideoId, info);
+        return info.isUpToggled ? "up" : info.isDownToggled ? "down" : null;
+      }
+    }
+    return null;
+  }
+
   function runExtraction() {
     if (!isPlaylistUrl()) return;
     const url = window.location.href;
@@ -114,20 +162,40 @@
     // 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),
+        const voteStatus = extractVoteInfo(d);
-        index: startIndex + i,
+        return {
-        lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
+          videoId: d.videoId,
-        lengthText: textOf(d.lengthText),
+          title: textOf(d.title),
-        thumbnails: d.thumbnail?.thumbnails ?? [],
+          index: startIndex + i,
-        shortBylineText: d.shortBylineText,
+          lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
-        isPlayable: d.isPlayable !== false,
+          lengthText: textOf(d.lengthText),
-        badges: d.badges ?? [],
+          thumbnails: d.thumbnail?.thumbnails ?? [],
-        voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
+          shortBylineText: d.shortBylineText,
-        addedBy: resolveAddedBy(d, avatarToName),
+          isPlayable: d.isPlayable !== false,
-      }));
+          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),
+          setVideoId: d.setVideoId ?? null,
+          voteStatus,
+        };
+      });
     }
 
     // Send first page immediately
@@ -202,6 +270,7 @@
         break;
       }
     }
+
   }
 
   // --- helpers ---
@@ -511,4 +580,82 @@
       }),
     );
   }
+
+  // Vote handler: content script dispatches this event to vote on collaborative playlist videos
+  document.addEventListener("__yt_playlist_ext_vote", async (event: Event) => {
+    const { setVideoId, action } = JSON.parse(
+      (event as CustomEvent).detail,
+    );
+    const { cfg, baseContext } = getConfig();
+    const authHeaders = buildAuthHeaders(cfg, baseContext);
+
+    const cached = voteFeedbackCache.get(setVideoId);
+    if (!cached) {
+      console.warn(LOG, `No vote feedback tokens for ${setVideoId}`);
+      sendVoteResult(setVideoId, false, null);
+      return;
+    }
+
+    // Pick the correct feedbackToken based on action and current toggle state
+    let feedbackToken: string | null = null;
+    if (action === "up") {
+      feedbackToken = cached.isUpToggled ? cached.upToggledToken : cached.upToken;
+    } else {
+      feedbackToken = cached.isDownToggled ? cached.downToggledToken : cached.downToken;
+    }
+
+    if (!feedbackToken) {
+      console.warn(LOG, `No feedback token for ${action} on ${setVideoId}`);
+      sendVoteResult(setVideoId, false, null);
+      return;
+    }
+
+    try {
+      const res = await fetch(
+        "https://www.youtube.com/youtubei/v1/feedback?prettyPrint=false",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...authHeaders,
+          },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            context: baseContext,
+            feedbackTokens: [feedbackToken],
+            isFeedbackTokenUnencrypted: false,
+          }),
+        },
+      );
+
+      const data = await res.json();
+      const success = res.ok && Array.isArray(data?.feedbackResponses);
+
+      if (success) {
+        // Update cached toggle state
+        if (action === "up") {
+          cached.isUpToggled = !cached.isUpToggled;
+          if (cached.isUpToggled) cached.isDownToggled = false;
+        } else {
+          cached.isDownToggled = !cached.isDownToggled;
+          if (cached.isDownToggled) cached.isUpToggled = false;
+        }
+      }
+
+      const newStatus = cached.isUpToggled ? "up" : cached.isDownToggled ? "down" : null;
+      console.log(LOG, `Vote ${action} on ${setVideoId}: ${success ? "OK" : "FAILED"} → ${newStatus}`);
+      sendVoteResult(setVideoId, success, newStatus);
+    } catch (e) {
+      console.error(LOG, "Vote failed:", e);
+      sendVoteResult(setVideoId, false, null);
+    }
+  });
+
+  function sendVoteResult(setVideoId: string, success: boolean, newVoteStatus: string | null) {
+    document.dispatchEvent(
+      new CustomEvent("__yt_playlist_ext_vote_result", {
+        detail: JSON.stringify({ setVideoId, success, newVoteStatus }),
+      }),
+    );
+  }
 })();

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,10 +21,22 @@ 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) */
   voteCount: number | null;
+  /** Playlist-specific video ID for operations (vote, reorder, etc.) */
+  setVideoId: string | null;
+  /** Current user's vote status on collaborative playlists */
+  voteStatus: "up" | "down" | null;
+  /** Like count from Data API */
+  likeCount: number | null;
 }
 
 export interface PlaylistMetadata {
@@ -44,6 +56,14 @@ export interface PlaylistMetadata {
   privacy: "public" | "unlisted" | "private" | "unknown";
 }
 
+export interface DetailUpdate {
+  videoId: string;
+  viewCountText: string | null;
+  publishedAt: string | null;
+  category: string | null;
+  likeCount: number | null;
+}
+
 export interface PlaylistData {
   metadata: PlaylistMetadata;
   videos: PlaylistVideo[];