Enhance popup interface with cookie handling and warning for yt-dlp commands

2026-06-30 20:32:20 +02:00 · 2026-03-29 07:56:52 +05:30
parent ae8343620b
commit 1268848482
4 changed files with 176 additions and 41 deletions
--- a/README.md
+++ b/README.md
@@ -1,73 +1,87 @@
-# MTH Video Manifest Capture
+# SharePoint Video Downloader

-A Chrome extension that captures video manifest URLs (e.g., HLS `.m3u8`, MPEG-DASH `.mpd`, and SharePoint DASH manifests) from web pages, processes them, and generates FFmpeg and yt-dlp commands for downloading. 
+A Chrome/Edge extension that captures SharePoint/OneDrive Stream video URLs and generates ready-to-run yt-dlp and FFmpeg download commands.

 ## Overview

-**MTH Video Manifest Capture** is designed to assist users in capturing and processing video streaming manifests, particularly for SharePoint, HLS, and DASH formats. The extension provides a user-friendly popup interface to view cleaned manifest URLs, select quality and format options, set custom filenames, and copy commands for FFmpeg and yt-dlp to download the video content. 
+**SharePoint Video Downloader** detects video manifests and stream URLs on SharePoint/OneDrive pages and generates download commands with the correct authentication flags. It supports both `--cookies-from-browser` (browser must be closed) and `--cookies cookies.txt` (browser can stay open) workflows.

-This extension is built using Chrome's **Manifest V3**, ensuring modern security and performance standards.
+Built using Chrome **Manifest V3**.

 ## Features

- **Captures video manifest URLs** (`.m3u8`, `.mpd`, and SharePoint `/transform/videomanifest` with `format=dash`).
- **Cleans URLs** by removing unnecessary parameters (e.g., after `format=dash`).
- **Generates customizable FFmpeg and yt-dlp commands** with options for quality (Best, 1080p, 720p, 480p) and format (MP4, MKV, TS).
- **Allows custom output filenames** or uses a timestamp-based default (e.g., `video_YYYYMMDD_HHMMSS`).
- **"Download Manifest" button** to open the cleaned manifest URL in a new tab or initiate a basic download of the manifest file.
- **Toggle buttons** to expand/collapse long URLs and commands for better readability.
- **Copy buttons** for FFmpeg and yt-dlp commands to easily paste into a terminal.
+- **Detects SharePoint stream URLs** — `/transform/videomanifest` (DASH/HLS), `mediap.svc.ms` proxy manifests, `oneDrive.transcode` segment endpoints, and direct `download.aspx` links.
+- **Per-tab URL capture** — stores up to 20 URLs per tab, deduplicated.
+- **Current Page shortcut** — one-click copy of a yt-dlp command using the active SharePoint tab URL (uses the built-in SharePoint extractor).
+- **Two cookie modes** — `--cookies-from-browser <browser>` and `--cookies cookies.txt`.
+- **Cookie lock warning** — shows a warning when Edge/Chrome/Brave is selected, since Chromium locks the cookie database while the browser is open.
+- **Customizable output** — quality (Best, 1080p, 720p, 480p), format (MP4, MKV, TS), and custom filename.
+- **Copy buttons** for all commands.

 ## Installation

 ### Prerequisites

- Google Chrome or Chromium browser (**Manifest V3 compatible, version 88 or later**).
- FFmpeg and yt-dlp installed on your system (**optional, for running the generated commands**).
+- **Edge or Chrome** (Manifest V3, version 88+).
+- **yt-dlp** — `pip install yt-dlp` or download from [github.com/yt-dlp/yt-dlp](https://github.com/yt-dlp/yt-dlp).
+- **FFmpeg** *(optional)* — [ffmpeg.org](https://ffmpeg.org/).

 ### Steps

-1. **Clone or Download the Repository**
+1. **Clone or download the repository**
   ```bash
   git clone https://github.com/MiniduTH/Sharepoint-Downloader.git
   ```
-   Or download the ZIP file and extract it.

-2. **Load the Extension in Chrome**
-   - Open Chrome and navigate to `chrome://extensions/`.
-   - Enable **"Developer mode"** in the top-right corner.
-   - Click **"Load unpacked"** and select the `Sharepoint-Downloader` folder.
-
-3. **Install Dependencies** *(optional, for using generated commands)*
-   - **FFmpeg:** Install via your package manager (e.g., `sudo apt install ffmpeg` on Ubuntu) or download from [ffmpeg.org](https://ffmpeg.org/).
-   - **yt-dlp:** Install via `pip install yt-dlp` or download from [yt-dlp.org](https://yt-dlp.org/).
+2. **Load the extension**
+   - Edge: `edge://extensions/` → Enable **Developer mode** → **Load unpacked** → select the folder.
+   - Chrome: `chrome://extensions/` → same steps.

 ## Usage

-1. **Open a Web Page with Video Manifests**
-   - Visit a website streaming video content (e.g., SharePoint, HLS, or DASH streams).
+### Recommended: Current Page method

-2. **Activate the Extension**
-   - Click the **"MTH Video Manifest Capture"** icon in the Chrome toolbar.
+1. Open the SharePoint video page in your browser.
+2. Click the extension icon.
+3. In the **Current Page** card, click **Copy yt-dlp (cookies.txt)** (if Edge is open) or **Copy yt-dlp Command** (if you'll close the browser first).
+4. Paste into a terminal and run.

-3. **Capture Manifests**
-   - The extension automatically detects and captures video manifest URLs (`.m3u8`, `.mpd`, or SharePoint DASH manifests).
-   - The cleaned URL, FFmpeg command, and yt-dlp command will appear in the popup.
+### Cookie authentication — two options

-4. **Customize Options**
-   - Use the dropdowns to select video quality (**Best, 1080p, 720p, 480p**) and format (**MP4, MKV, TS**).
-   - Enter a custom output filename, or leave it blank to use the timestamp-based default (e.g., `video_20250305_143022.mp4`).
+#### Option A: `--cookies-from-browser` (no extra setup, but browser must be closed)

-5. **Copy Commands**
-   - Click **"Copy FFmpeg"** or **"Copy yt-dlp"** to copy the respective commands to your clipboard.
-   - Paste the commands into a terminal to download the video using FFmpeg or yt-dlp.
+Chromium-based browsers (Edge, Chrome, Brave) **lock the cookie database while running**. You must close the browser before running the command.

+```bash
+# 1. Close Edge/Chrome completely
+# 2. Run:
+yt-dlp --cookies-from-browser edge -f "bestvideo+bestaudio/best" --merge-output-format mp4 -o "lecture.mp4" "https://mysliit-my.sharepoint.com/..."
+# 3. Reopen the browser
+```

-## Screenshots
+Firefox does **not** lock its cookie database, so `--cookies-from-browser firefox` works while the browser is open.

-_Screenshot of the popup interface showing captured manifest, commands, and options._
+#### Option B: `--cookies cookies.txt` ✅ Confirmed working

-![Screenshot](https://i.ibb.co/XZrNYPGL/Screenshot-2025-03-05-1513s34.png)
+Export cookies while the browser is open using the **[Get cookies.txt LOCALLY](https://chromewebstore.google.com/detail/get-cookiestxt-locally/cclelndahbckbenkjhflpdbgdldlbecc)** extension, then run:
+
+```bash
+yt-dlp --cookies cookies.txt -f "bestvideo+bestaudio/best" --merge-output-format mp4 -o "lecture.mp4" "https://mysliit-my.sharepoint.com/..."
+```
+
+**Steps to export cookies.txt:**
+1. Install **Get cookies.txt LOCALLY** in Edge/Chrome.
+2. Navigate to `mysliit-my.sharepoint.com` (or your SharePoint domain).
+3. Click the extension icon → **Export** → save as `cookies.txt` in the same folder where you'll run yt-dlp.
+4. Use the **Copy yt-dlp (cookies.txt)** button in this extension to get the command.
+
+### Captured Stream URLs
+
+The extension also intercepts manifest URLs as you play the video:
+
+1. Play the video on SharePoint.
+2. Open the extension popup — captured URLs appear in the **Captured Stream URLs** list.
+3. Click a URL to generate FFmpeg and yt-dlp commands for it in the **Download Commands** card.

 ## Contributing

--- a/popup.css
+++ b/popup.css
@@ -27,6 +27,23 @@ body {
  line-height: 1.4;
 }

+.warn {
+  margin: 6px 0 4px;
+  padding: 8px 10px;
+  background: #fff3cd;
+  border: 1px solid #ffc107;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #664d03;
+  line-height: 1.5;
+}
+.warn code {
+  background: rgba(0, 0, 0, 0.08);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
 /* ── Buttons ─────────────────────────────────────────── */

 .btn {
--- a/popup.html
+++ b/popup.html
@@ -22,6 +22,13 @@
          <button id="copyTabYtdlp" class="btn secondary small">
            Copy yt-dlp Command
          </button>
+          <button
+            id="copyTabYtdlpCookies"
+            class="btn secondary small"
+            style="display: none"
+          >
+            Copy yt-dlp (cookies.txt)
+          </button>
          <button id="copyTabUrl" class="btn toggle small">Copy URL</button>
        </div>
      </div>
@@ -37,6 +44,16 @@
            <option value="firefox">Firefox</option>
            <option value="brave">Brave</option>
          </select>
+          <div id="cookieWarn" class="warn" style="display: none">
+            &#9888; <strong>Close your browser first!</strong> Chromium-based
+            browsers lock the cookie DB while open — yt-dlp will fail to read
+            cookies. Close it, run the command, then reopen.<br />
+            <span
+              >Alternative: export cookies with
+              <em>Get cookies.txt LOCALLY</em> extension, save as
+              <code>cookies.txt</code>, then use the command below.</span
+            >
+          </div>

          <label>Quality:</label>
          <select id="quality" class="select">
@@ -104,7 +121,7 @@
        </div>

        <div class="manifest-section">
-          <label>yt-dlp:</label>
+          <label>yt-dlp (browser cookies):</label>
          <div class="text-container">
            <p id="ytdlpCommand" class="text">Select a captured URL above.</p>
          </div>
@@ -112,6 +129,20 @@
            Copy yt-dlp
          </button>
        </div>
+
+        <div
+          class="manifest-section"
+          id="ytdlpCookiesFileSection"
+          style="display: none"
+        >
+          <label>yt-dlp (cookies.txt file):</label>
+          <div class="text-container">
+            <p id="ytdlpCookiesFileCommand" class="text"></p>
+          </div>
+          <button id="copyYtdlpCookiesFileBtn" class="btn secondary small">
+            Copy yt-dlp (cookies.txt)
+          </button>
+        </div>
      </div>
    </div>

--- a/popup.js
+++ b/popup.js
@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", () => {
  const tabUrlDiv = document.getElementById("tabUrl");
  const copyTabYtdlp = document.getElementById("copyTabYtdlp");
+  const copyTabYtdlpCookies = document.getElementById("copyTabYtdlpCookies");
  const copyTabUrl = document.getElementById("copyTabUrl");
  const browserSelect = document.getElementById("browser");
  const qualitySelect = document.getElementById("quality");
@@ -12,6 +13,16 @@ document.addEventListener("DOMContentLoaded", () => {
  const ytdlpCommandDiv = document.getElementById("ytdlpCommand");
  const copyFfmpegBtn = document.getElementById("copyFfmpegBtn");
  const copyYtdlpBtn = document.getElementById("copyYtdlpBtn");
+  const ytdlpCookiesFileSection = document.getElementById(
+    "ytdlpCookiesFileSection",
+  );
+  const ytdlpCookiesFileCommandDiv = document.getElementById(
+    "ytdlpCookiesFileCommand",
+  );
+  const copyYtdlpCookiesFileBtn = document.getElementById(
+    "copyYtdlpCookiesFileBtn",
+  );
+  const cookieWarn = document.getElementById("cookieWarn");
  const refreshBtn = document.getElementById("refresh");
  const clearAllBtn = document.getElementById("clearAll");

@@ -40,6 +51,19 @@ document.addEventListener("DOMContentLoaded", () => {
    return browserSelect.value;
  }

+  // Whether the selected browser uses a locked Chromium cookie DB
+  function isChromiumBrowser() {
+    return ["edge", "chrome", "brave"].includes(browser());
+  }
+
+  function updateCookieWarning() {
+    const show = isChromiumBrowser();
+    cookieWarn.style.display = show ? "" : "none";
+    ytdlpCookiesFileSection.style.display =
+      show && selectedManifest ? "" : "none";
+    copyTabYtdlpCookies.style.display = show ? "" : "none";
+  }
+
  // ── Command generators ───────────────────────────────────

  function ytdlpForPage(url) {
@@ -53,6 +77,17 @@ document.addEventListener("DOMContentLoaded", () => {
    return `yt-dlp --cookies-from-browser ${browser()} -f "${fSel}" --merge-output-format ${fmt} -o "${name}" "${url}"`;
  }

+  function ytdlpCookiesFileForPage(url) {
+    const q = qualitySelect.value;
+    const fmt = formatSelect.value;
+    const name = outName();
+    let fSel =
+      q === "best"
+        ? "bestvideo+bestaudio/best"
+        : `bestvideo[height<=?${q.replace("p", "")}]+bestaudio/best[height<=?${q.replace("p", "")}]`;
+    return `yt-dlp --cookies cookies.txt -f "${fSel}" --merge-output-format ${fmt} -o "${name}" "${url}"`;
+  }
+
  function ytdlpForManifest(url) {
    const q = qualitySelect.value;
    const fmt = formatSelect.value;
@@ -64,6 +99,17 @@ document.addEventListener("DOMContentLoaded", () => {
    return `yt-dlp --cookies-from-browser ${browser()} -f "${fSel}" --merge-output-format ${fmt} -o "${name}" "${url}"`;
  }

+  function ytdlpCookiesFileForManifest(url) {
+    const q = qualitySelect.value;
+    const fmt = formatSelect.value;
+    const name = outName();
+    let fSel =
+      q === "best"
+        ? "bestvideo+bestaudio/best"
+        : `bestvideo[height<=?${q.replace("p", "")}]+bestaudio/best[height<=?${q.replace("p", "")}]`;
+    return `yt-dlp --cookies cookies.txt -f "${fSel}" --merge-output-format ${fmt} -o "${name}" "${url}"`;
+  }
+
  function ffmpegForManifest(url, type) {
    const name = outName();
    const referer = currentTabUrl
@@ -110,6 +156,15 @@ document.addEventListener("DOMContentLoaded", () => {
      );
  });

+  copyTabYtdlpCookies.addEventListener("click", () => {
+    if (currentTabUrl)
+      copyText(
+        ytdlpCookiesFileForPage(currentTabUrl),
+        copyTabYtdlpCookies,
+        "Copy yt-dlp (cookies.txt)",
+      );
+  });
+
  copyTabUrl.addEventListener("click", () => {
    if (currentTabUrl) copyText(currentTabUrl, copyTabUrl, "Copy URL");
  });
@@ -166,6 +221,10 @@ document.addEventListener("DOMContentLoaded", () => {
      selectedManifest.type,
    );
    ytdlpCommandDiv.textContent = ytdlpForManifest(selectedManifest.cleanedUrl);
+    ytdlpCookiesFileCommandDiv.textContent = ytdlpCookiesFileForManifest(
+      selectedManifest.cleanedUrl,
+    );
+    updateCookieWarning();
  }

  // ── Buttons ──────────────────────────────────────────────
@@ -192,11 +251,25 @@ document.addEventListener("DOMContentLoaded", () => {
    copyText(ytdlpCommandDiv.textContent, copyYtdlpBtn, "Copy yt-dlp");
  });

+  copyYtdlpCookiesFileBtn.addEventListener("click", () => {
+    copyText(
+      ytdlpCookiesFileCommandDiv.textContent,
+      copyYtdlpCookiesFileBtn,
+      "Copy yt-dlp (cookies.txt)",
+    );
+  });
+
  // Recalculate commands when options change
  [qualitySelect, formatSelect, filenameInput, browserSelect].forEach((el) => {
-    el.addEventListener("change", updateCommands);
+    el.addEventListener("change", () => {
+      updateCommands();
+      updateCookieWarning();
+    });
  });

+  // Init cookie warning on load
+  updateCookieWarning();
+
  // Live-listen for new manifests
  chrome.runtime.onMessage.addListener((msg) => {
    if (msg.type === "manifestDetected" && msg.data.tabId === currentTabId) {