esbuild.config.mjs

@@ -30,16 +30,8 @@ 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.2.0",
+  "version": "0.1.1",
   "description": "Extract and work with YouTube playlist data",
-  "permissions": ["storage"],
+  "permissions": [],
   "background": {
     "service_worker": "background/service-worker.js"
   },
@@ -14,13 +14,6 @@
       "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.2.0",
+  "version": "0.1.1",
   "description": "Extract and work with YouTube playlist data",
-  "permissions": ["storage"],
+  "permissions": [],
   "background": {
     "scripts": ["background/service-worker.js"]
   },
@@ -14,13 +14,6 @@
       "run_at": "document_idle"
     }
   ],
-  "action": {
-    "default_popup": "options/options.html"
-  },
-  "options_ui": {
-    "page": "options/options.html",
-    "open_in_tab": false
-  },
   "web_accessible_resources": [
     {
       "resources": ["injected/page-script.js"],

package.json

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

src/background/service-worker.ts

@@ -1,118 +1,19 @@
 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 = "[yt-playlist-features:bg]";
+const LOG_PREFIX = "[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,
+        LOG_PREFIX,
         `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, "Service worker started.");
+console.log(LOG_PREFIX, "Service worker started.");

src/content/extractor.ts

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

src/content/index.ts

@@ -3,43 +3,13 @@ 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, updateTableDetails } from "./ui/lifecycle";
+import { mountTable, appendToTable, setTableComplete } 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");
@@ -80,7 +50,33 @@ function handlePlaylistData(event: Event): void {
   }
 
   // Convert DOM-extracted videos to PlaylistVideo[]
-  const videos: PlaylistVideo[] = domVideos.map(mapRawVideo);
+  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 playlistData = buildPlaylistData(metadata, videos, payload.isComplete !== false);
 
@@ -109,7 +105,32 @@ function handlePlaylistAppend(event: Event): void {
   }
 
   if (payload.type === "append") {
-    const newVideos: PlaylistVideo[] = payload.videos.map(mapRawVideo);
+    const newVideos: PlaylistVideo[] = payload.videos.map((v: any) => {
+      const bylineRun = v.shortBylineText?.runs?.[0];
+      const bylineEndpoint = bylineRun?.navigationEndpoint?.browseEndpoint;
+      return {
+        videoId: v.videoId,
+        title: v.title,
+        index: v.index,
+        durationSeconds: v.lengthSeconds,
+        durationText: v.lengthText || null,
+        thumbnails: v.thumbnails,
+        channel: {
+          name: bylineRun?.text ?? "",
+          channelId: bylineEndpoint?.browseId ?? "",
+          url: bylineRun?.navigationEndpoint?.commandMetadata
+            ?.webCommandMetadata?.url ?? "",
+        },
+        isPlayable: v.isPlayable,
+        isLive:
+          v.badges?.some(
+            (b: any) =>
+              b.metadataBadgeRenderer?.style === "BADGE_STYLE_TYPE_LIVE_NOW",
+          ) ?? false,
+        addedBy: v.addedBy ?? null,
+        voteCount: v.voteCount ?? null,
+      } satisfies PlaylistVideo;
+    });
     appendToTable(newVideos);
     if (payload.isComplete) {
       setTableComplete(payload.totalCount);
@@ -121,17 +142,6 @@ 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,21 +3,14 @@ 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: {
@@ -25,42 +18,28 @@ const messages: Record<string, Record<MessageKey, string>> = {
     colTitle: "タイトル",
     colChannel: "チャンネル",
     colDuration: "長さ",
-    colViews: "再生数",
-    colPublished: "公開日",
-    colCategory: "カテゴリ",
     colAddedBy: "追加者",
     colVotes: "投票",
     filterTitle: "タイトル検索...",
     filterChannel: "チャンネル...",
     filterAddedBy: "追加者...",
-    filterCategory: "カテゴリ...",
     badgeLive: "ライブ",
     headerVideos: "本の動画",
     headerLoading: "読み込み中…",
-    fetchViews: "再生数を取得",
-    fetchViewsProgress: "取得中…",
-    fetchViewsDone: "取得完了",
   },
   en: {
     colIndex: "#",
     colTitle: "Title",
     colChannel: "Channel",
     colDuration: "Duration",
-    colViews: "Views",
-    colPublished: "Published",
-    colCategory: "Category",
     colAddedBy: "Added by",
     colVotes: "Votes",
     filterTitle: "Search title...",
     filterChannel: "Channel...",
     filterAddedBy: "Added by...",
-    filterCategory: "Category...",
     badgeLive: "LIVE",
     headerVideos: "videos",
     headerLoading: "loading…",
-    fetchViews: "Fetch views",
-    fetchViewsProgress: "Fetching…",
-    fetchViewsDone: "Done",
   },
 };
 

src/content/ui/lifecycle.ts

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

src/content/ui/styles.ts

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

src/content/ui/table-renderer.ts

@@ -1,9 +1,7 @@
-import browser from "webextension-polyfill";
+import type { PlaylistData, PlaylistVideo } from "../../types/playlist";
-import type { PlaylistData, PlaylistVideo, DetailUpdate } from "../../types/playlist";
-import type { Message } from "../../shared/messages";
 import { t } from "./i18n";
 
-type SortKey = "index" | "title" | "channel" | "duration" | "views" | "published" | "category" | "addedBy" | "votes";
+type SortKey = "index" | "title" | "channel" | "duration" | "addedBy" | "votes";
 type SortDir = "asc" | "desc";
 
 interface Column {
@@ -11,18 +9,14 @@ interface Column {
   cls: string;
   key: SortKey;
   collab?: boolean; // only shown for collaborative playlists
-  detail?: boolean; // shown after detail fetch
 }
 
-function getAllColumns(hasDetails: boolean): Column[] {
+function getAllColumns(): 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 },
   ];
@@ -205,18 +199,6 @@ 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 => {
@@ -229,12 +211,6 @@ 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":
@@ -247,7 +223,6 @@ function buildRow(
   video: PlaylistVideo,
   playlistId: string,
   isCollab: boolean,
-  hasDetails: boolean,
 ): HTMLTableRowElement {
   const tr = document.createElement("tr");
   tr.className = "ytpf-tr";
@@ -297,26 +272,6 @@ 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");
@@ -338,15 +293,13 @@ 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,
   );
-  let hasDetails = data.videos.some((v) => v.publishedAt != null || v.category != null);
+  const columns = getAllColumns().filter((c) => !c.collab || isCollab);
-  let columns = getAllColumns(hasDetails).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
 
   const wrapper = document.createElement("div");
   wrapper.className = "ytpf-wrapper";
@@ -377,26 +330,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
   toggle.className = "ytpf-toggle";
   toggle.textContent = "\u25BC";
 
-  // Fetch details button
+  header.append(titleSpan, metaSpan, toggle);
-  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
@@ -415,23 +349,6 @@ 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) {
@@ -479,13 +396,11 @@ 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;
     });
@@ -495,7 +410,7 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     const filtered = getFilteredVideos();
     tbody.textContent = "";
     for (const video of filtered) {
-      tbody.appendChild(buildRow(video, playlistId, isCollab, hasDetails));
+      tbody.appendChild(buildRow(video, playlistId, isCollab));
     }
     filterCount.textContent = filtered.length < videos.length
       ? `${filtered.length} / ${videos.length}`
@@ -581,64 +496,5 @@ export function renderPlaylistTable(data: PlaylistData): PlaylistTableHandle {
     updateHeader();
   }
 
-  let detailsReceived = 0;
+  return { element: wrapper, appendVideos, setComplete };
-  let detailsTotal = 0;
-
-  function updateDetails(updates: DetailUpdate[]) {
-    const map = new Map(updates.map((u) => [u.videoId, u]));
-    for (const v of videos) {
-      const u = map.get(v.videoId);
-      if (u) {
-        v.viewCountText = u.viewCountText ?? v.viewCountText;
-        v.publishedAt = u.publishedAt;
-        v.category = u.category;
-      }
-    }
-
-    detailsReceived += updates.length;
-    if (detailsTotal === 0) {
-      detailsTotal = videos.filter((v) => v.isPlayable).length;
-    }
-
-    // Add detail columns on first update if not present
-    if (!hasDetails) {
-      hasDetails = true;
-      columns = getAllColumns(true).filter((c) => (!c.collab || isCollab) && (!c.detail || hasDetails));
-      // Rebuild thead
-      headRow.textContent = "";
-      thElements.length = 0;
-      for (const col of columns) {
-        const th = document.createElement("th");
-        th.className = `ytpf-th ytpf-th--sortable ${col.cls}`;
-        th.dataset.sortKey = col.key;
-        th.textContent = col.label;
-        thElements.push(th);
-        headRow.appendChild(th);
-      }
-      updateSortIndicators();
-    }
-
-    // Update category filter
-    ensureCategoryFilter();
-    if (categoryTagInput) {
-      categoryTagInput.addCandidates(
-        updates.map((u) => u.category).filter((c): c is string => c != null),
-      );
-    }
-
-    // Update progress
-    if (detailsReceived < detailsTotal) {
-      fetchBtn.textContent = `${t("fetchViewsProgress")} ${detailsReceived}/${detailsTotal}`;
-    } else {
-      fetchBtn.textContent = t("fetchViewsDone");
-      setTimeout(() => { fetchBtn.style.display = "none"; }, 1500);
-    }
-
-    if (sortKey) {
-      videos.sort(compareFn(sortKey, sortDir));
-    }
-    renderRows();
-  }
-
-  return { element: wrapper, appendVideos, setComplete, updateDetails };
 }

src/injected/page-script.ts

@@ -114,37 +114,20 @@
     // 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) => ({
-        const { viewCountText } = parseVideoInfo(d.videoInfo);
+        videoId: d.videoId,
-        return {
+        title: textOf(d.title),
-          videoId: d.videoId,
+        index: startIndex + i,
-          title: textOf(d.title),
+        lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
-          index: startIndex + i,
+        lengthText: textOf(d.lengthText),
-          lengthSeconds: d.lengthSeconds ? parseInt(d.lengthSeconds, 10) : null,
+        thumbnails: d.thumbnail?.thumbnails ?? [],
-          lengthText: textOf(d.lengthText),
+        shortBylineText: d.shortBylineText,
-          thumbnails: d.thumbnail?.thumbnails ?? [],
+        isPlayable: d.isPlayable !== false,
-          shortBylineText: d.shortBylineText,
+        badges: d.badges ?? [],
-          isPlayable: d.isPlayable !== false,
+        voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
-          badges: d.badges ?? [],
+        addedBy: resolveAddedBy(d, avatarToName),
-          viewCountText,
+      }));
-          publishedAt: null as string | null,
-          category: null as string | null,
-          voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
-          addedBy: resolveAddedBy(d, avatarToName),
-        };
-      });
     }
 
     // Send first page immediately

src/options/options.html

@@ -1,87 +0,0 @@
-<!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

@@ -1,32 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/** 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,7 +1,3 @@
-import type { PlaylistData, DetailUpdate } from "../types/playlist";
+import type { PlaylistData } from "../types/playlist";
 
-export type Message =
+export type Message = { type: "PLAYLIST_EXTRACTED"; data: PlaylistData };
-  | { 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,12 +21,6 @@ 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) */
@@ -50,13 +44,6 @@ 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[];