Bump to 0.2.0

APIキーを入力するオプションの実装
Youtube API v3を用いた全件取得
2026-04-09 04:21:04 +09:00 · 2026-04-09 04:20:56 +09:00 · 2026-04-09 04:11:57 +09:00 · 2026-04-09 03:47:52 +09:00 · 2026-04-09 03:12:59 +09:00
17 changed files with 580 additions and 90 deletions
--- a/esbuild.config.mjs
+++ b/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`);
 }

--- a/manifest.chrome.json
+++ b/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"],
--- a/manifest.firefox.json
+++ b/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"],
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "yt-playlist-features",
-  "version": "0.1.1",
+  "version": "0.2.0",
  "private": true,
  "type": "module",
  "scripts": {
--- a/src/background/service-worker.ts
+++ b/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.");
--- a/src/content/extractor.ts
+++ b/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,
  };
--- a/src/content/index.ts
+++ b/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 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 videos: PlaylistVideo[] = domVideos.map(mapRawVideo);

  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 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 newVideos: PlaylistVideo[] = payload.videos.map(mapRawVideo);
    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();
--- a/src/content/ui/i18n.ts
+++ b/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",
  },
 };

--- a/src/content/ui/lifecycle.ts
+++ b/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)
-  const videoList = document.querySelector("ytd-playlist-video-list-renderer");
-  if (videoList?.parentElement) {
-    return { parent: videoList.parentElement, before: videoList };
+  // Primary: top of ytd-item-section-renderer (before any header/content)
+  const itemSection = document.querySelector(
+    "ytd-section-list-renderer ytd-item-section-renderer",
+  );
+  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();
--- a/src/content/ui/styles.ts
+++ b/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;
 }
--- a/src/content/ui/table-renderer.ts
+++ b/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 };
 }
--- a/src/injected/page-script.ts
+++ b/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) => ({
-        videoId: d.videoId,
-        title: textOf(d.title),
-        index: startIndex + i,
-        lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
-        lengthText: textOf(d.lengthText),
-        thumbnails: d.thumbnail?.thumbnails ?? [],
-        shortBylineText: d.shortBylineText,
-        isPlayable: d.isPlayable !== false,
-        badges: d.badges ?? [],
-        voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
-        addedBy: resolveAddedBy(d, avatarToName),
-      }));
+      return renderers.map((d, i) => {
+        const { viewCountText } = parseVideoInfo(d.videoInfo);
+        return {
+          videoId: d.videoId,
+          title: textOf(d.title),
+          index: startIndex + i,
+          lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
+          lengthText: textOf(d.lengthText),
+          thumbnails: d.thumbnail?.thumbnails ?? [],
+          shortBylineText: d.shortBylineText,
+          isPlayable: d.isPlayable !== false,
+          badges: d.badges ?? [],
+          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
--- a/src/options/options.html
+++ b/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>
--- a/src/options/options.ts
+++ b/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"));
+});
--- a/src/shared/category-map.ts
+++ b/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",
+};
--- a/src/shared/messages.ts
+++ b/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 };
--- a/src/types/playlist.ts
+++ b/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[];
Author	SHA1	Message	Date
Hare	4fbf98897c	Bump to 0.2.0	2026-04-09 04:21:04 +09:00
Hare	b38b39dab3	APIキーを入力するオプションの実装	2026-04-09 04:20:56 +09:00
Hare	177a98d312	Youtube API v3を用いた全件取得	2026-04-09 04:11:57 +09:00
Hare	1289f1a374	WIP: 再生数等のための全件取得の実装	2026-04-09 03:47:52 +09:00
Hare	4f401356cd	テーブルのマウント位置の調整	2026-04-09 03:12:59 +09:00