☰

Greasy Fork 支持简体中文。

Douyin User Video Downloader

Extract video links and metadata from Douyin user profiles

  1. // ==UserScript==
  2. // @name         Douyin User Video Downloader
  3. // @namespace    https://github.com/CaoCuong2404
  4. // @version      1.6
  5. // @description  Extract video links and metadata from Douyin user profiles
  6. // @author       CaoCuong2404
  7. // @match        https://www.douyin.com/user/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=douyin.com
  9. // @grant        none
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.   "use strict";
  15.  
  16.   // Add Tailwind CSS
  17.   const tailwindCDN = document.createElement("script");
  18.   tailwindCDN.src = "https://cdn.tailwindcss.com";
  19.   document.head.appendChild(tailwindCDN);
  20.  
  21.   // Global state
  22.   const state = {
  23.     videos: [],
  24.     selectedVideos: new Set(),
  25.     isFetching: false,
  26.     fetchedCount: 0,
  27.     totalFound: 0,
  28.     isDialogOpen: false,
  29.   };
  30.  
  31.   function createMainUI() {
  32.     // Create backdrop
  33.     const backdrop = document.createElement("div");
  34.     backdrop.className = "fixed inset-0 bg-black bg-opacity-50 z-[9999] hidden";
  35.     backdrop.id = "douyin-downloader-backdrop";
  36.  
  37.     // Create dialog container
  38.     const container = document.createElement("div");
  39.     container.className =
  40.       "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[900px] bg-white rounded-lg shadow-xl z-[10000] hidden";
  41.     container.id = "douyin-downloader";
  42.  
  43.     container.innerHTML = `
  44.       <div class="flex flex-col max-h-[90vh]">
  45.         <div class="flex items-center justify-between p-4 border-b">
  46.           <div class="flex items-center space-x-2">
  47.             <img src="https://www.douyin.com/favicon.ico" class="w-6 h-6" alt="Douyin">
  48.             <h2 class="text-xl font-bold text-gray-800">Douyin Downloader</h2>
  49.           </div>
  50.           <button id="close-dialog" class="text-gray-400 hover:text-gray-600">
  51.             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  52.               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  53.             </svg>
  54.           </button>
  55.         </div>
  56.  
  57.         <div class="p-4 flex-1 overflow-hidden flex flex-col min-h-[500px]">
  58.           <div id="fetch-status" class="text-sm text-gray-500 mb-4"></div>
  59.  
  60.           <div class="border rounded-lg flex-1 flex flex-col overflow-hidden">
  61.             <div class="p-4 border-b bg-gray-50 flex items-center justify-between">
  62.               <div class="flex items-center space-x-4">
  63.                 <div class="flex items-center space-x-2">
  64.                   <input type="checkbox" id="select-all" class="rounded text-[#FE2C55]">
  65.                   <label for="select-all" class="text-sm font-medium text-gray-700">
  66.                     Select All (<span id="selected-count">0</span>/<span id="total-count">0</span>)
  67.                   </label>
  68.                 </div>
  69.                 
  70.                 <div class="h-4 border-l border-gray-300"></div>
  71.                 
  72.                 <div class="flex items-center space-x-2" id="action-buttons">
  73.                   <div class="relative inline-block text-left" id="download-dropdown">
  74.                     <button disabled id="download-btn" class="px-3 py-1.5 text-sm font-medium text-white bg-[#FE2C55] rounded-md shadow-sm hover:bg-[#fe2c55]/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FE2C55] disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center">
  75.                       Download
  76.                       <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  77.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  78.                       </svg>
  79.                     </button>
  80.                     <div class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="dropdown-menu">
  81.                       <div class="py-1">
  82.                         <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-action="audio">
  83.                           Download Audios (MP3)
  84.                         </button>
  85.                         <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-action="video">
  86.                           Download Videos (MP4)
  87.                         </button>
  88.                         <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-action="json">
  89.                           Download Metadata (JSON)
  90.                         </button>
  91.                         <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-action="txt">
  92.                           Download Links (TXT)
  93.                         </button>
  94.                       </div>
  95.                     </div>
  96.                   </div>
  97.                 </div>
  98.               </div>
  99.               
  100.               <button id="fetch-videos" class="px-3 py-1.5 text-sm font-medium text-white bg-[#FE2C55] rounded-md shadow-sm hover:bg-[#fe2c55]/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FE2C55] inline-flex items-center">
  101.                 <span>Fetch Videos</span>
  102.               </button>
  103.             </div>
  104.             
  105.             <div class="overflow-auto flex-1">
  106.               <table class="min-w-full divide-y divide-gray-200">
  107.                 <thead class="bg-gray-50 sticky top-0">
  108.                   <tr>
  109.                     <th scope="col" class="w-12 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  110.                       Select
  111.                     </th>
  112.                     <th scope="col" class="w-16 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  113.                       No.
  114.                     </th>
  115.                     <th scope="col" class="w-16 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  116.                       Cover
  117.                     </th>
  118.                     <th scope="col" class="w-[300px] px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  119.                       Title
  120.                     </th>
  121.                     <th scope="col" class="w-32 px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  122.                       Date
  123.                     </th>
  124.                     <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
  125.                       Actions
  126.                     </th>
  127.                   </tr>
  128.                 </thead>
  129.                 <tbody id="videos-table-body" class="bg-white divide-y divide-gray-200">
  130.                   <!-- Videos will be inserted here -->
  131.                 </tbody>
  132.               </table>
  133.             </div>
  134.           </div>
  135.         </div>
  136.       </div>
  137.     `;
  138.  
  139.     document.body.appendChild(backdrop);
  140.     document.body.appendChild(container);
  141.  
  142.     return { backdrop, container };
  143.   }
  144.  
  145.   async function addDownloadButton() {
  146.     try {
  147.       // Wait initial 2s for UI to stabilize and translations to complete
  148.       await sleep(2000);
  149.  
  150.       // Try to find the element multiple times
  151.       let attempts = 3;
  152.       let tabCountElement = null;
  153.  
  154.       while (attempts > 0 && !tabCountElement) {
  155.         try {
  156.           tabCountElement = await waitForElement('[data-e2e="user-tab-count"]', 10000); // 10s timeout per attempt
  157.           break;
  158.         } catch (err) {
  159.           attempts--;
  160.           if (attempts > 0) {
  161.             console.log("Retrying to find tab count element...");
  162.             // Wait between attempts
  163.             await sleep(1000);
  164.           } else {
  165.             throw new Error(
  166.               "Could not find video count element after multiple attempts. This could be due to UI changes or page translation.",
  167.             );
  168.           }
  169.         }
  170.       }
  171.  
  172.       // Extra check for parent element stability
  173.       const parentElement = tabCountElement.parentNode;
  174.       if (!parentElement || !parentElement.isConnected) {
  175.         throw new Error("Parent element of video count is not stable");
  176.       }
  177.  
  178.       const downloadButton = document.createElement("button");
  179.       downloadButton.className = "ml-2 text-[#FE2C55] hover:text-[#fe2c55]/90 transition-colors";
  180.       downloadButton.innerHTML = `
  181.         <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  182.           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
  183.         </svg>
  184.       `;
  185.       downloadButton.title = "Download all videos";
  186.  
  187.       // Insert after the count with stability check
  188.       if (tabCountElement.nextSibling) {
  189.         parentElement.insertBefore(downloadButton, tabCountElement.nextSibling);
  190.       } else {
  191.         parentElement.appendChild(downloadButton);
  192.       }
  193.  
  194.       // Add click handler
  195.       downloadButton.addEventListener("click", showDialog);
  196.  
  197.       // Monitor for potential DOM changes that could affect the button
  198.       const observer = new MutationObserver((mutations) => {
  199.         if (!downloadButton.isConnected) {
  200.           // Button was removed, try to re-add it
  201.           if (tabCountElement.isConnected) {
  202.             if (tabCountElement.nextSibling) {
  203.               parentElement.insertBefore(downloadButton, tabCountElement.nextSibling);
  204.             } else {
  205.               parentElement.appendChild(downloadButton);
  206.             }
  207.           }
  208.         }
  209.       });
  210.  
  211.       observer.observe(parentElement, {
  212.         childList: true,
  213.         subtree: true,
  214.       });
  215.     } catch (error) {
  216.       console.error("Failed to add download button:", error);
  217.     }
  218.   }
  219.  
  220.   function showDialog() {
  221.     const backdrop = document.getElementById("douyin-downloader-backdrop");
  222.     const dialog = document.getElementById("douyin-downloader");
  223.  
  224.     backdrop.classList.remove("hidden");
  225.     dialog.classList.remove("hidden");
  226.  
  227.     // Add animation classes
  228.     dialog.classList.add("animate-fade-in");
  229.     backdrop.classList.add("animate-fade-in");
  230.  
  231.     state.isDialogOpen = true;
  232.   }
  233.  
  234.   function hideDialog() {
  235.     const backdrop = document.getElementById("douyin-downloader-backdrop");
  236.     const dialog = document.getElementById("douyin-downloader");
  237.  
  238.     backdrop.classList.add("hidden");
  239.     dialog.classList.add("hidden");
  240.  
  241.     state.isDialogOpen = false;
  242.   }
  243.  
  244.   function setupDialogEventListeners() {
  245.     // Close button
  246.     document.getElementById("close-dialog")?.addEventListener("click", hideDialog);
  247.  
  248.     // Close on backdrop click
  249.     document.getElementById("douyin-downloader-backdrop")?.addEventListener("click", hideDialog);
  250.  
  251.     // Prevent dialog close when clicking inside
  252.     document.getElementById("douyin-downloader")?.addEventListener("click", (e) => {
  253.       e.stopPropagation();
  254.     });
  255.  
  256.     // Close on Escape key
  257.     document.addEventListener("keydown", (e) => {
  258.       if (e.key === "Escape" && state.isDialogOpen) {
  259.         hideDialog();
  260.       }
  261.     });
  262.   }
  263.  
  264.   function createVideoRow(video, index) {
  265.     const row = document.createElement("tr");
  266.     row.className = "hover:bg-gray-50";
  267.  
  268.     const date = new Date(video.createTime);
  269.     const formattedDate = date.toLocaleDateString(undefined, {
  270.       year: "numeric",
  271.       month: "short",
  272.       day: "numeric",
  273.     });
  274.  
  275.     row.innerHTML = `
  276.       <td class="px-4 py-4 whitespace-nowrap">
  277.         <input type="checkbox" data-video-id="${video.id}" class="video-checkbox rounded text-[#FE2C55]">
  278.       </td>
  279.       <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
  280.         ${index + 1}
  281.       </td>
  282.       <td class="px-4 py-4 whitespace-nowrap">
  283.         <div class="w-12 h-12 rounded-lg overflow-hidden">
  284.           <img src="${video.dynamicCoverUrl || video.coverUrl}" class="w-full h-full object-cover" alt="${video.title}">
  285.         </div>
  286.       </td>
  287.       <td class="px-4 py-4 whitespace-nowrap">
  288.         <div class="text-sm text-gray-900 font-medium truncate max-w-[300px]" title="${video.title}">
  289.           ${video.title}
  290.         </div>
  291.       </td>
  292.       <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
  293.         ${formattedDate}
  294.       </td>
  295.       <td class="px-4 py-4 whitespace-nowrap text-sm">
  296.         <div class="flex items-center space-x-2">
  297.           <a href="${video.videoUrl}" target="_blank" class="text-[#FE2C55] hover:text-[#fe2c55]/90">
  298.             Video
  299.           </a>
  300.           ${
  301.             video.audioUrl
  302.               ? `
  303.             <span class="text-gray-300">|</span>
  304.             <a href="${video.audioUrl}" target="_blank" class="text-[#FE2C55] hover:text-[#fe2c55]/90">
  305.               Audio
  306.             </a>
  307.           `
  308.               : ""
  309.           }
  310.         </div>
  311.       </td>
  312.     `;
  313.  
  314.     return row;
  315.   }
  316.  
  317.   function updateUI() {
  318.     const selectedCount = state.selectedVideos.size;
  319.     const totalCount = state.videos.length;
  320.  
  321.     // Update counts
  322.     document.getElementById("selected-count").textContent = selectedCount;
  323.     document.getElementById("total-count").textContent = totalCount;
  324.  
  325.     // Update select all checkbox
  326.     const selectAllCheckbox = document.getElementById("select-all");
  327.     selectAllCheckbox.checked = selectedCount === totalCount && totalCount > 0;
  328.  
  329.     // Update download button
  330.     const downloadBtn = document.getElementById("download-btn");
  331.     downloadBtn.disabled = selectedCount === 0;
  332.   }
  333.  
  334.   function setupEventListeners() {
  335.     // Fetch videos button
  336.     document.getElementById("fetch-videos").addEventListener("click", async () => {
  337.       if (state.isFetching) return;
  338.  
  339.       state.isFetching = true;
  340.       state.fetchedCount = 0;
  341.       state.videos = [];
  342.       state.selectedVideos.clear();
  343.  
  344.       const button = document.getElementById("fetch-videos");
  345.       const statusEl = document.getElementById("fetch-status");
  346.       const tableBody = document.getElementById("videos-table-body");
  347.       tableBody.innerHTML = "";
  348.  
  349.       button.disabled = true;
  350.       button.innerHTML = `
  351.         <svg class="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
  352.           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  353.           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  354.         </svg>
  355.         Fetching...
  356.       `;
  357.  
  358.       try {
  359.         const downloader = new DouyinDownloader();
  360.         await downloader.fetchAllVideos((newVideos) => {
  361.           // Sort new videos by date (latest first)
  362.           newVideos.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
  363.  
  364.           // Add new videos to state
  365.           state.videos.push(...newVideos);
  366.           state.fetchedCount += newVideos.length;
  367.  
  368.           // Update table
  369.           state.videos.forEach((video, index) => {
  370.             const existingRow = document.querySelector(`[data-video-id="${video.id}"]`)?.closest("tr");
  371.             if (!existingRow) {
  372.               tableBody.appendChild(createVideoRow(video, index));
  373.             }
  374.           });
  375.  
  376.           // Update status
  377.           statusEl.textContent = `Fetched ${state.fetchedCount} videos`;
  378.           updateUI();
  379.         });
  380.  
  381.         setupTableEventListeners();
  382.       } catch (error) {
  383.         console.error("Error fetching videos:", error);
  384.         statusEl.textContent = "Error: " + error.message;
  385.       } finally {
  386.         state.isFetching = false;
  387.         button.disabled = false;
  388.         button.innerHTML = "<span>Fetch Videos</span>";
  389.       }
  390.     });
  391.  
  392.     // Download dropdown
  393.     const downloadBtn = document.getElementById("download-btn");
  394.     const dropdownMenu = document.getElementById("dropdown-menu");
  395.  
  396.     downloadBtn.addEventListener("click", () => {
  397.       dropdownMenu.classList.toggle("hidden");
  398.     });
  399.  
  400.     // Close dropdown when clicking outside
  401.     document.addEventListener("click", (e) => {
  402.       if (!downloadBtn.contains(e.target)) {
  403.         dropdownMenu.classList.add("hidden");
  404.       }
  405.     });
  406.  
  407.     // Download actions
  408.     dropdownMenu.addEventListener("click", async (e) => {
  409.       const action = e.target.dataset.action;
  410.       if (!action) return;
  411.  
  412.       const selectedVideos = state.videos.filter((v) => state.selectedVideos.has(v.id));
  413.       if (selectedVideos.length === 0) return;
  414.  
  415.       // Hide dropdown
  416.       dropdownMenu.classList.add("hidden");
  417.  
  418.       switch (action) {
  419.         case "audio":
  420.           await downloadFiles(selectedVideos, "audio");
  421.           break;
  422.         case "video":
  423.           await downloadFiles(selectedVideos, "video");
  424.           break;
  425.         case "json":
  426.           FileHandler.saveVideoUrls(selectedVideos, { downloadJson: true, downloadTxt: false });
  427.           break;
  428.         case "txt":
  429.           FileHandler.saveVideoUrls(selectedVideos, { downloadJson: false, downloadTxt: true });
  430.           break;
  431.       }
  432.     });
  433.   }
  434.  
  435.   function setupTableEventListeners() {
  436.     // Select all checkbox
  437.     document.getElementById("select-all").addEventListener("change", (e) => {
  438.       const checkboxes = document.querySelectorAll(".video-checkbox");
  439.       checkboxes.forEach((checkbox) => {
  440.         checkbox.checked = e.target.checked;
  441.         const videoId = checkbox.dataset.videoId;
  442.         if (e.target.checked) {
  443.           state.selectedVideos.add(videoId);
  444.         } else {
  445.           state.selectedVideos.delete(videoId);
  446.         }
  447.       });
  448.       updateUI();
  449.     });
  450.  
  451.     // Individual video checkboxes
  452.     document.querySelectorAll(".video-checkbox").forEach((checkbox) => {
  453.       checkbox.addEventListener("change", (e) => {
  454.         const videoId = e.target.dataset.videoId;
  455.         if (e.target.checked) {
  456.           state.selectedVideos.add(videoId);
  457.         } else {
  458.           state.selectedVideos.delete(videoId);
  459.         }
  460.         updateUI();
  461.       });
  462.     });
  463.   }
  464.  
  465.   // Configuration
  466.   const CONFIG = {
  467.     API_BASE_URL: "https://www.douyin.com/aweme/v1/web/aweme/post/",
  468.     DEFAULT_HEADERS: {
  469.       accept: "application/json, text/plain, */*",
  470.       "accept-language": "vi",
  471.       "sec-ch-ua": '"Not?A_Brand";v="8", "Chromium";v="118", "Microsoft Edge";v="118"',
  472.       "sec-ch-ua-mobile": "?0",
  473.       "sec-ch-ua-platform": '"Windows"',
  474.       "sec-fetch-dest": "empty",
  475.       "sec-fetch-mode": "cors",
  476.       "sec-fetch-site": "same-origin",
  477.       "user-agent":
  478.         "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.0.0",
  479.     },
  480.     RETRY_DELAY_MS: 2000,
  481.     MAX_RETRIES: 5,
  482.     REQUEST_DELAY_MS: 1000,
  483.   };
  484.  
  485.   // Utility functions
  486.   const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  487.  
  488.   const waitForElement = (selector, timeout = 30000, interval = 100) => {
  489.     return new Promise((resolve, reject) => {
  490.       // Check if element already exists
  491.       const element = document.querySelector(selector);
  492.       if (element) {
  493.         resolve(element);
  494.         return;
  495.       }
  496.  
  497.       // Set up the timeout
  498.       const timeoutId = setTimeout(() => {
  499.         observer.disconnect();
  500.         clearInterval(checkInterval);
  501.         reject(new Error(`Timeout waiting for element: ${selector}`));
  502.       }, timeout);
  503.  
  504.       // Set up the mutation observer
  505.       const observer = new MutationObserver((mutations, obs) => {
  506.         const element = document.querySelector(selector);
  507.         if (element) {
  508.           obs.disconnect();
  509.           clearInterval(checkInterval);
  510.           clearTimeout(timeoutId);
  511.           resolve(element);
  512.         }
  513.       });
  514.  
  515.       // Start observing
  516.       observer.observe(document.body, {
  517.         childList: true,
  518.         subtree: true,
  519.       });
  520.  
  521.       // Also poll periodically as a backup
  522.       const checkInterval = setInterval(() => {
  523.         const element = document.querySelector(selector);
  524.         if (element) {
  525.           observer.disconnect();
  526.           clearInterval(checkInterval);
  527.           clearTimeout(timeoutId);
  528.           resolve(element);
  529.         }
  530.       }, interval);
  531.     });
  532.   };
  533.  
  534.   const retryWithDelay = async (fn, retries = CONFIG.MAX_RETRIES) => {
  535.     let lastError;
  536.     for (let i = 0; i < retries; i++) {
  537.       try {
  538.         return await fn();
  539.       } catch (error) {
  540.         lastError = error;
  541.         console.log(`Attempt ${i + 1} failed:`, error);
  542.         await sleep(CONFIG.RETRY_DELAY_MS);
  543.       }
  544.     }
  545.     throw lastError;
  546.   };
  547.  
  548.   // API Client
  549.   class DouyinApiClient {
  550.     constructor(secUserId) {
  551.       this.secUserId = secUserId;
  552.     }
  553.  
  554.     async fetchVideos(maxCursor) {
  555.       const url = new URL(CONFIG.API_BASE_URL);
  556.       const params = {
  557.         device_platform: "webapp",
  558.         aid: "6383",
  559.         channel: "channel_pc_web",
  560.         sec_user_id: this.secUserId,
  561.         max_cursor: maxCursor,
  562.         count: "20",
  563.         version_code: "170400",
  564.         version_name: "17.4.0",
  565.       };
  566.  
  567.       Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value));
  568.  
  569.       const response = await fetch(url, {
  570.         headers: {
  571.           ...CONFIG.DEFAULT_HEADERS,
  572.           referrer: `https://www.douyin.com/user/${this.secUserId}`,
  573.         },
  574.         credentials: "include",
  575.       });
  576.  
  577.       if (!response.ok) {
  578.         throw new Error(`HTTP Error: ${response.status}`);
  579.       }
  580.  
  581.       return response.json();
  582.     }
  583.   }
  584.  
  585.   // Data Processing
  586.   class VideoDataProcessor {
  587.     static extractVideoMetadata(video) {
  588.       if (!video) return null;
  589.  
  590.       // Initialize the metadata object
  591.       const metadata = {
  592.         id: video.aweme_id || "",
  593.         desc: video.desc || "",
  594.         title: video.desc || "", // Using desc as the title since title field isn't directly available
  595.         createTime: video.create_time ? new Date(video.create_time * 1000).toISOString() : "",
  596.         videoUrl: "",
  597.         audioUrl: "",
  598.         coverUrl: "",
  599.         dynamicCoverUrl: "",
  600.       };
  601.  
  602.       // Extract video URL
  603.       if (video.video?.play_addr) {
  604.         metadata.videoUrl = video.video.play_addr.url_list[0];
  605.         if (metadata.videoUrl && !metadata.videoUrl.startsWith("https")) {
  606.           metadata.videoUrl = metadata.videoUrl.replace("http", "https");
  607.         }
  608.       } else if (video.video?.download_addr) {
  609.         metadata.videoUrl = video.video.download_addr.url_list[0];
  610.         if (metadata.videoUrl && !metadata.videoUrl.startsWith("https")) {
  611.           metadata.videoUrl = metadata.videoUrl.replace("http", "https");
  612.         }
  613.       }
  614.  
  615.       // Extract audio URL
  616.       if (video.music?.play_url) {
  617.         metadata.audioUrl = video.music.play_url.url_list[0];
  618.       }
  619.  
  620.       // Extract cover URL (static thumbnail)
  621.       if (video.video?.cover) {
  622.         metadata.coverUrl = video.video.cover.url_list[0];
  623.       } else if (video.cover) {
  624.         metadata.coverUrl = video.cover.url_list[0];
  625.       }
  626.  
  627.       // Extract dynamic cover URL (animated thumbnail)
  628.       if (video.video?.dynamic_cover) {
  629.         metadata.dynamicCoverUrl = video.video.dynamic_cover.url_list[0];
  630.       } else if (video.dynamic_cover) {
  631.         metadata.dynamicCoverUrl = video.dynamic_cover.url_list[0];
  632.       }
  633.  
  634.       return metadata;
  635.     }
  636.  
  637.     static processVideoData(data) {
  638.       if (!data?.aweme_list) {
  639.         return { videoData: [], hasMore: false, maxCursor: 0 };
  640.       }
  641.  
  642.       const videoData = data.aweme_list.map((video) => this.extractVideoMetadata(video)).filter((item) => item && item.videoUrl);
  643.  
  644.       return {
  645.         videoData,
  646.         hasMore: data.has_more,
  647.         maxCursor: data.max_cursor,
  648.       };
  649.     }
  650.   }
  651.  
  652.   // File Handler
  653.   class FileHandler {
  654.     static saveVideoUrls(videoData, options = { downloadJson: true, downloadTxt: true }) {
  655.       if (!videoData || videoData.length === 0) {
  656.         console.warn("No video data to save");
  657.         return { savedCount: 0 };
  658.       }
  659.  
  660.       const now = new Date();
  661.       const timestamp = now.toISOString().replace(/[:.]/g, "-");
  662.       let savedCount = 0;
  663.  
  664.       // Save complete JSON data if option is enabled
  665.       if (options.downloadJson) {
  666.         const jsonContent = JSON.stringify(videoData, null, 2);
  667.         const jsonBlob = new Blob([jsonContent], { type: "application/json" });
  668.         const jsonUrl = URL.createObjectURL(jsonBlob);
  669.  
  670.         const jsonLink = document.createElement("a");
  671.         jsonLink.href = jsonUrl;
  672.         jsonLink.download = `douyin-video-data-${timestamp}.json`;
  673.         jsonLink.style.display = "none";
  674.         document.body.appendChild(jsonLink);
  675.         jsonLink.click();
  676.         document.body.removeChild(jsonLink);
  677.  
  678.         console.log(`Saved ${videoData.length} videos with metadata to JSON file`);
  679.       }
  680.  
  681.       // Save plain URLs list if option is enabled
  682.       if (options.downloadTxt) {
  683.         // Create a list of video URLs
  684.         const urlList = videoData.map((video) => video.videoUrl).join("\n");
  685.         const txtBlob = new Blob([urlList], { type: "text/plain" });
  686.         const txtUrl = URL.createObjectURL(txtBlob);
  687.  
  688.         const txtLink = document.createElement("a");
  689.         txtLink.href = txtUrl;
  690.         txtLink.download = `douyin-video-links-${timestamp}.txt`;
  691.         txtLink.style.display = "none";
  692.         document.body.appendChild(txtLink);
  693.         txtLink.click();
  694.         document.body.removeChild(txtLink);
  695.  
  696.         console.log(`Saved ${videoData.length} video URLs to text file`);
  697.       }
  698.  
  699.       savedCount = videoData.length;
  700.       return { savedCount };
  701.     }
  702.   }
  703.  
  704.   // Main Downloader
  705.   class DouyinDownloader {
  706.     constructor() {
  707.       this.validateEnvironment();
  708.       const secUserId = this.extractSecUserId();
  709.       this.apiClient = new DouyinApiClient(secUserId);
  710.     }
  711.  
  712.     validateEnvironment() {
  713.       if (typeof window === "undefined" || !window.location) {
  714.         throw new Error("Script must be run in a browser environment");
  715.       }
  716.     }
  717.  
  718.     extractSecUserId() {
  719.       const secUserId = location.pathname.replace("/user/", "");
  720.       if (!secUserId || location.pathname.indexOf("/user/") === -1) {
  721.         throw new Error("Please run this script on a DouYin user profile page!");
  722.       }
  723.       return secUserId;
  724.     }
  725.  
  726.     async fetchAllVideos(onProgress) {
  727.       let hasMore = true;
  728.       let maxCursor = 0;
  729.  
  730.       while (hasMore) {
  731.         const data = await retryWithDelay(() => this.apiClient.fetchVideos(maxCursor));
  732.         const { videoData, hasMore: more, maxCursor: newCursor } = VideoDataProcessor.processVideoData(data);
  733.  
  734.         if (onProgress) {
  735.           onProgress(videoData);
  736.         }
  737.  
  738.         hasMore = more;
  739.         maxCursor = newCursor;
  740.         await sleep(CONFIG.REQUEST_DELAY_MS);
  741.       }
  742.     }
  743.   }
  744.  
  745.   // Initialize the UI
  746.   async function initializeUI() {
  747.     // Add custom styles for animations
  748.     const style = document.createElement("style");
  749.     style.textContent = `
  750.       @keyframes fadeIn {
  751.         from { opacity: 0; }
  752.         to { opacity: 1; }
  753.       }
  754.       .animate-fade-in {
  755.         animation: fadeIn 0.2s ease-out;
  756.       }
  757.     `;
  758.     document.head.appendChild(style);
  759.  
  760.     // Create UI elements (hidden initially)
  761.     createMainUI();
  762.  
  763.     // Add download button to profile
  764.     await addDownloadButton();
  765.  
  766.     // Setup all event listeners
  767.     setupEventListeners();
  768.     setupTableEventListeners();
  769.     setupDialogEventListeners();
  770.   }
  771.  
  772.   // Start the script
  773.   if (document.readyState === "loading") {
  774.     document.addEventListener("DOMContentLoaded", () => {
  775.       initializeUI().catch((error) => {
  776.         console.error("Failed to initialize UI:", error);
  777.       });
  778.     });
  779.   } else {
  780.     initializeUI().catch((error) => {
  781.       console.error("Failed to initialize UI:", error);
  782.     });
  783.   }
  784.  
  785.   async function downloadFile(url, filename) {
  786.     try {
  787.       const response = await fetch(url);
  788.       if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  789.  
  790.       const blob = await response.blob();
  791.       const blobUrl = URL.createObjectURL(blob);
  792.  
  793.       const link = document.createElement("a");
  794.       link.href = blobUrl;
  795.       link.download = filename;
  796.       link.style.display = "none";
  797.       document.body.appendChild(link);
  798.       link.click();
  799.       document.body.removeChild(link);
  800.  
  801.       // Clean up
  802.       setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
  803.  
  804.       return true;
  805.     } catch (error) {
  806.       console.error(`Failed to download ${filename}:`, error);
  807.       return false;
  808.     }
  809.   }
  810.  
  811.   async function downloadFiles(files, type = "video") {
  812.     const statusEl = document.getElementById("fetch-status");
  813.     const total = files.length;
  814.     let successful = 0;
  815.     let failed = 0;
  816.  
  817.     for (let i = 0; i < files.length; i++) {
  818.       const file = files[i];
  819.       const url = type === "video" ? file.videoUrl : file.audioUrl;
  820.       if (!url) {
  821.         failed++;
  822.         continue;
  823.       }
  824.  
  825.       // Update status
  826.       statusEl.textContent = `Downloading ${type} ${i + 1}/${total}...`;
  827.  
  828.       // Generate filename
  829.       const timestamp = new Date(file.createTime).toISOString().split("T")[0];
  830.       const filename = `douyin_${type}_${timestamp}_${file.id}.${type === "video" ? "mp4" : "mp3"}`;
  831.  
  832.       // Download file
  833.       const success = await downloadFile(url, filename);
  834.       if (success) {
  835.         successful++;
  836.       } else {
  837.         failed++;
  838.       }
  839.  
  840.       // Small delay between downloads to prevent browser blocking
  841.       await sleep(500);
  842.     }
  843.  
  844.     // Final status update
  845.     statusEl.textContent = `Download complete: ${successful} successful, ${failed} failed`;
  846.     setTimeout(() => {
  847.       statusEl.textContent = "";
  848.     }, 5000);
  849.   }
  850. })();