Bump to 0.3.0

manifest.chrome.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "YT Playlist Features",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Extract and work with YouTube playlist data",
   "permissions": ["storage"],
   "background": {

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "YT Playlist Features",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Extract and work with YouTube playlist data",
   "permissions": ["storage"],
   "background": {

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.2.0",
+  "version": "0.3.0",
   "private": true,
   "type": "module",
   "scripts": {

src/background/service-worker.ts

@@ -67,6 +67,9 @@ async function fetchVideoDetails(
             : 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, {

src/content/extractor.ts

@@ -180,6 +180,9 @@ function parseVideo(renderer: any): PlaylistVideo | null {
     category: null,
     addedBy: null,
     voteCount: null,
+    likeCount: null,
+    setVideoId: null,
+    voteStatus: null,
   };
 }
 

src/content/index.ts

@@ -3,7 +3,7 @@ import { onPlaylistPageReady, getPlaylistId } from "./navigation";
 import { parseInitialData, buildPlaylistData } from "./extractor";
 import type { PlaylistVideo } from "../types/playlist";
 import type { Message } from "../shared/messages";
-import { mountTable, appendToTable, setTableComplete, updateTableDetails } from "./ui/lifecycle";
+import { mountTable, appendToTable, setTableComplete, updateTableDetails, updateVoteStatuses } from "./ui/lifecycle";
 
 const LOG = "[yt-playlist-features]";
 
@@ -37,6 +37,9 @@ function mapRawVideo(v: any): PlaylistVideo {
     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;
 }
 
@@ -121,6 +124,7 @@ 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;

src/content/ui/i18n.ts

@@ -6,6 +6,7 @@ type MessageKey =
   | "colViews"
   | "colPublished"
   | "colCategory"
+  | "colLikes"
   | "colAddedBy"
   | "colVotes"
   | "filterTitle"
@@ -23,7 +24,14 @@ type MessageKey =
   | "statsDuration"
   | "statsChannels"
   | "statsPlayable"
-  | "statsTotalViews";
+  | "statsTotalViews"
+  | "statsDetail"
+  | "statsDetailChannelRank"
+  | "statsDetailAddedByRank"
+  | "statsDetailCategoryBreak"
+  | "statsDetailDurationAvg"
+  | "statsDetailDurationMedian"
+  | "statsDetailVideos";
 
 const messages: Record<string, Record<MessageKey, string>> = {
   ja: {
@@ -34,6 +42,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
     colViews: "再生数",
     colPublished: "公開日",
     colCategory: "カテゴリ",
+    colLikes: "高評価",
     colAddedBy: "追加者",
     colVotes: "投票",
     filterTitle: "タイトル検索...",
@@ -43,7 +52,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
     badgeLive: "ライブ",
     headerVideos: "本の動画",
     headerLoading: "読み込み中…",
-    fetchViews: "再生数を取得",
+    fetchViews: "全件詳細を取得",
     fetchViewsProgress: "取得中…",
     fetchViewsDone: "取得完了",
     colSettings: "表示",
@@ -52,6 +61,13 @@ const messages: Record<string, Record<MessageKey, string>> = {
     statsChannels: "チャンネル",
     statsPlayable: "再生可能",
     statsTotalViews: "総再生数",
+    statsDetail: "詳細",
+    statsDetailChannelRank: "チャンネル別",
+    statsDetailAddedByRank: "追加者別",
+    statsDetailCategoryBreak: "カテゴリ別",
+    statsDetailDurationAvg: "平均再生時間",
+    statsDetailDurationMedian: "中央値",
+    statsDetailVideos: "本",
   },
   en: {
     colIndex: "#",
@@ -61,6 +77,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
     colViews: "Views",
     colPublished: "Published",
     colCategory: "Category",
+    colLikes: "Likes",
     colAddedBy: "Added by",
     colVotes: "Votes",
     filterTitle: "Search title...",
@@ -70,7 +87,7 @@ const messages: Record<string, Record<MessageKey, string>> = {
     badgeLive: "LIVE",
     headerVideos: "videos",
     headerLoading: "loading…",
-    fetchViews: "Fetch views",
+    fetchViews: "Fetch all details",
     fetchViewsProgress: "Fetching…",
     fetchViewsDone: "Done",
     colSettings: "View",
@@ -79,6 +96,13 @@ const messages: Record<string, Record<MessageKey, string>> = {
     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

@@ -80,6 +80,10 @@ 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

@@ -85,10 +85,172 @@ 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;
@@ -351,8 +513,72 @@ html[dark] .ytpf-tr:hover {
 .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;

src/content/ui/table-renderer.ts

@@ -3,7 +3,7 @@ import type { PlaylistData, PlaylistVideo, DetailUpdate } from "../../types/play
 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" | "views" | "likes" | "published" | "category" | "addedBy" | "votes";
 type SortDir = "asc" | "desc";
 
 interface Column {
@@ -22,6 +22,7 @@ function getAllColumns(hasDetails: boolean): Column[] {
     { label: t("colChannel"), cls: "ytpf-col-channel", key: "channel", defaultWidth: 20 },
     { label: t("colDuration"), cls: "ytpf-col-duration", key: "duration", defaultWidth: 8 },
     { label: t("colViews"), cls: "ytpf-col-views", key: "views", defaultWidth: 12 },
+    { 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 },
@@ -272,6 +273,8 @@ function compareFn(key: SortKey, dir: SortDir) {
         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":
@@ -284,7 +287,14 @@ function compareFn(key: SortKey, dir: SortDir) {
   };
 }
 
-function buildCell(video: PlaylistVideo, col: Column, playlistId: string): HTMLTableCellElement {
+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}`;
 
@@ -325,6 +335,9 @@ function buildCell(video: PlaylistVideo, col: Column, playlistId: string): HTMLT
     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;
@@ -335,7 +348,44 @@ function buildCell(video: PlaylistVideo, col: Column, playlistId: string): HTMLT
       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;
   }
 
@@ -346,13 +396,14 @@ function buildRow(
   video: PlaylistVideo,
   playlistId: string,
   visibleColumns: Column[],
+  onVote?: VoteHandler,
 ): HTMLTableRowElement {
   const tr = document.createElement("tr");
   tr.className = "ytpf-tr";
   if (!video.isPlayable) tr.classList.add("ytpf-tr--unplayable");
 
   for (const col of visibleColumns) {
-    tr.appendChild(buildCell(video, col, playlistId));
+    tr.appendChild(buildCell(video, col, playlistId, onVote));
   }
 
   return tr;
@@ -363,6 +414,7 @@ export interface PlaylistTableHandle {
   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, columnPrefs: ColumnPrefs): PlaylistTableHandle {
@@ -539,6 +591,154 @@ export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs
     }
   }
 
+  // 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";
 
@@ -561,7 +761,7 @@ export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs
     } satisfies Message);
   });
 
-  statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, statsSpacer, fetchBtn);
+  statsBar.append(statDuration, statChannels, statPlayable, statTotalViews, detailBtn, statsSpacer, fetchBtn);
   wrapper.appendChild(statsBar);
 
   // Filter bar
@@ -716,11 +916,81 @@ export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs
     });
   }
 
+  // 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, visibleColumns));
+      tbody.appendChild(buildRow(video, playlistId, visibleColumns, voteHandler));
     }
     filterCount.textContent = filtered.length < videos.length
       ? `${filtered.length} / ${videos.length}`
@@ -822,6 +1092,7 @@ export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs
         v.viewCountText = u.viewCountText ?? v.viewCountText;
         v.publishedAt = u.publishedAt;
         v.category = u.category;
+        v.likeCount = u.likeCount ?? v.likeCount;
       }
     }
 
@@ -864,5 +1135,18 @@ export function renderPlaylistTable(data: PlaylistData, columnPrefs: ColumnPrefs
     updateStats();
   }
 
-  return { element: wrapper, appendVideos, setComplete, updateDetails };
+  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;
@@ -128,6 +176,7 @@
     function mapRenderers(renderers: any[], startIndex: number) {
       return renderers.map((d, i) => {
         const { viewCountText } = parseVideoInfo(d.videoInfo);
+        const voteStatus = extractVoteInfo(d);
         return {
           videoId: d.videoId,
           title: textOf(d.title),
@@ -143,6 +192,8 @@
           category: null as string | null,
           voteCount: typeof d.voteCount === "number" ? d.voteCount : null,
           addedBy: resolveAddedBy(d, avatarToName),
+          setVideoId: d.setVideoId ?? null,
+          voteStatus,
         };
       });
     }
@@ -219,6 +270,7 @@
         break;
       }
     }
+
   }
 
   // --- helpers ---
@@ -528,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/types/playlist.ts

@@ -31,6 +31,12 @@ export interface PlaylistVideo {
   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 {
@@ -55,6 +61,7 @@ export interface DetailUpdate {
   viewCountText: string | null;
   publishedAt: string | null;
   category: string | null;
+  likeCount: number | null;
 }
 
 export interface PlaylistData {