mirror of
https://github.com/hyzendust/Sharepoint-Downloader.git
synced 2026-06-30 20:32:20 +02:00
Merge pull request #1 from MiniduTH/feature/new-dl-logic
Feature/new dl logic
This commit is contained in:
Minidu Weerasinghe
100
README.md
100
README.md
@@ -1,73 +1,89 @@
|
||||
# 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
|
||||
|
||||
|
||||
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
|
||||
|
||||
@@ -94,6 +110,6 @@ This project is licensed under the **MIT License**. See the `LICENSE` file for d
|
||||
|
||||
## Contact
|
||||
|
||||
- **Author:** Minidu Weerasinghe
|
||||
- **GitHub:** [MiniduTH](https://github.com/MiniduTH)
|
||||
- **LinkedIn:** [linkedin.com/in/minidu0th](https://linkedin.com/in/minidu0th)
|
||||
- **Author:** Minidu Weerasinghe
|
||||
- **GitHub:** [MiniduTH](https://github.com/MiniduTH)
|
||||
- **LinkedIn:** [linkedin.com/in/minidu0th](https://linkedin.com/in/minidu0th)
|
||||
|
||||
209
background.js
209
background.js
@@ -1,75 +1,170 @@
|
||||
console.log('Background script loaded');
|
||||
console.log("Background script loaded");
|
||||
|
||||
// Classify and clean a URL, returning { cleanedUrl, type, label } or null
|
||||
function classifyUrl(url) {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
const path = u.pathname.toLowerCase();
|
||||
const host = u.hostname.toLowerCase();
|
||||
|
||||
// 1. SharePoint videomanifest (DASH / HLS / smooth)
|
||||
if (path.includes("/transform/videomanifest")) {
|
||||
let type = "dash";
|
||||
if (url.includes("format=hls")) type = "hls";
|
||||
return { cleanedUrl: url, type, label: "Video Manifest" };
|
||||
}
|
||||
|
||||
// 2. Media proxy service (mediap.svc.ms) — actual stream chunks/manifests
|
||||
if (host.includes("mediap.svc.ms")) {
|
||||
if (path.endsWith(".m3u8") || url.includes(".m3u8")) {
|
||||
return {
|
||||
cleanedUrl: url.split("?")[0],
|
||||
type: "hls",
|
||||
label: "HLS Manifest (mediap)",
|
||||
};
|
||||
}
|
||||
if (path.endsWith(".mpd") || url.includes(".mpd")) {
|
||||
return {
|
||||
cleanedUrl: url.split("?")[0],
|
||||
type: "dash",
|
||||
label: "DASH Manifest (mediap)",
|
||||
};
|
||||
}
|
||||
// Catch-all for other mediap requests that look like manifests
|
||||
if (path.includes("manifest") || path.includes("Manifest")) {
|
||||
return {
|
||||
cleanedUrl: url,
|
||||
type: "dash",
|
||||
label: "Stream Manifest (mediap)",
|
||||
};
|
||||
}
|
||||
return null; // Ignore individual segment fetches
|
||||
}
|
||||
|
||||
// 3. Standalone .m3u8 / .mpd files
|
||||
if (path.endsWith(".m3u8") || path.match(/\.m3u8($|\?)/)) {
|
||||
return {
|
||||
cleanedUrl: url.split("?")[0],
|
||||
type: "hls",
|
||||
label: "HLS Manifest",
|
||||
};
|
||||
}
|
||||
if (path.endsWith(".mpd") || path.match(/\.mpd($|\?)/)) {
|
||||
return {
|
||||
cleanedUrl: url.split("?")[0],
|
||||
type: "dash",
|
||||
label: "DASH Manifest",
|
||||
};
|
||||
}
|
||||
|
||||
// 4. SharePoint direct-download links
|
||||
if (host.includes("sharepoint.com") && path.includes("download.aspx")) {
|
||||
return { cleanedUrl: url, type: "direct", label: "Direct Download" };
|
||||
}
|
||||
|
||||
// 5. SharePoint OneDrive transcode API segments (mid-playback encrypted segments)
|
||||
// Strip per-segment params so all segments of the same video deduplicate to one entry.
|
||||
if (
|
||||
host.includes("sharepoint.com") &&
|
||||
path.includes("/onedrive.transcode")
|
||||
) {
|
||||
const u2 = new URL(url);
|
||||
// Keep only identity/auth params; drop segment-specific ones
|
||||
const dropParams = new Set([
|
||||
"part",
|
||||
"track",
|
||||
"quality",
|
||||
"segmentTime",
|
||||
"wsd",
|
||||
"ppd",
|
||||
"ppst",
|
||||
"headerOffset",
|
||||
"headerSize",
|
||||
"correlationid",
|
||||
"psi",
|
||||
"ccat",
|
||||
"PlaybackSessionData",
|
||||
]);
|
||||
for (const k of dropParams) u2.searchParams.delete(k);
|
||||
return {
|
||||
cleanedUrl: u2.toString(),
|
||||
type: "direct",
|
||||
label: "SP Transcode (use Current Page tab for yt-dlp)",
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
chrome.webRequest.onBeforeRequest.addListener(
|
||||
(details) => {
|
||||
try {
|
||||
const originalUrl = details.url;
|
||||
if (
|
||||
(originalUrl.includes('/transform/videomanifest') && originalUrl.includes('format=dash')) ||
|
||||
originalUrl.endsWith('.m3u8') ||
|
||||
originalUrl.endsWith('.mpd')
|
||||
) {
|
||||
console.log('Video manifest detected:', originalUrl);
|
||||
const result = classifyUrl(details.url);
|
||||
if (!result) return;
|
||||
|
||||
let cleanedUrl = originalUrl;
|
||||
let type = 'unknown';
|
||||
if (originalUrl.includes('/transform/videomanifest') && originalUrl.includes('format=dash')) {
|
||||
const index = originalUrl.indexOf('format=dash');
|
||||
cleanedUrl = originalUrl.substring(0, index + 'format=dash'.length);
|
||||
type = 'dash';
|
||||
} else if (originalUrl.endsWith('.mpd')) {
|
||||
const index = originalUrl.indexOf('.mpd') + '.mpd'.length;
|
||||
cleanedUrl = originalUrl.substring(0, index);
|
||||
type = 'dash';
|
||||
} else if (originalUrl.endsWith('.m3u8')) {
|
||||
const index = originalUrl.indexOf('.m3u8') + '.m3u8'.length;
|
||||
cleanedUrl = originalUrl.substring(0, index);
|
||||
type = 'hls';
|
||||
const manifestData = {
|
||||
originalUrl: details.url,
|
||||
cleanedUrl: result.cleanedUrl,
|
||||
type: result.type,
|
||||
label: result.label,
|
||||
timestamp: Date.now(),
|
||||
tabId: details.tabId,
|
||||
};
|
||||
|
||||
// Store per-tab list (keep last 20 per tab)
|
||||
const storageKey = `manifests_${details.tabId}`;
|
||||
chrome.storage.local.get(storageKey, (stored) => {
|
||||
const list = stored[storageKey] || [];
|
||||
// Avoid duplicates by cleanedUrl
|
||||
if (!list.some((m) => m.cleanedUrl === manifestData.cleanedUrl)) {
|
||||
list.push(manifestData);
|
||||
if (list.length > 20) list.shift();
|
||||
chrome.storage.local.set({ [storageKey]: list });
|
||||
}
|
||||
});
|
||||
|
||||
const manifestData = {
|
||||
originalUrl: originalUrl,
|
||||
cleanedUrl: cleanedUrl,
|
||||
type: type
|
||||
};
|
||||
chrome.storage.local.set({ lastManifest: manifestData }, (result) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('Error saving manifest:', chrome.runtime.lastError.message);
|
||||
} else {
|
||||
console.log('Manifest saved:', manifestData);
|
||||
}
|
||||
});
|
||||
// Also keep a global "lastManifest" for backward compat
|
||||
chrome.storage.local.set({ lastManifest: manifestData });
|
||||
|
||||
chrome.runtime.sendMessage({ type: 'manifestDetected', data: manifestData }, (response) => {
|
||||
chrome.runtime.sendMessage(
|
||||
{ type: "manifestDetected", data: manifestData },
|
||||
() => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('Error sending message:', chrome.runtime.lastError.message);
|
||||
/* popup closed, ignore */
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error in webRequest listener:', error);
|
||||
console.error("Error in webRequest listener:", error);
|
||||
}
|
||||
},
|
||||
{ urls: ["<all_urls>"] },
|
||||
["requestBody"]
|
||||
);
|
||||
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
console.log('Message received:', message);
|
||||
if (message.type === 'getLastManifest') {
|
||||
try {
|
||||
chrome.storage.local.get('lastManifest', (result) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('Error getting manifest:', chrome.runtime.lastError.message);
|
||||
sendResponse({ data: null });
|
||||
} else {
|
||||
sendResponse({ data: result.lastManifest || null });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error in message listener:', error);
|
||||
sendResponse({ data: null });
|
||||
}
|
||||
return true; // Keep the channel open for async response
|
||||
if (message.type === "getManifests") {
|
||||
const tabId = message.tabId;
|
||||
const storageKey = `manifests_${tabId}`;
|
||||
chrome.storage.local.get([storageKey, "lastManifest"], (result) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
sendResponse({ manifests: [], lastManifest: null });
|
||||
} else {
|
||||
sendResponse({
|
||||
manifests: result[storageKey] || [],
|
||||
lastManifest: result.lastManifest || null,
|
||||
});
|
||||
}
|
||||
});
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (message.type === "clearManifests") {
|
||||
const tabId = message.tabId;
|
||||
chrome.storage.local.remove(`manifests_${tabId}`, () => {
|
||||
sendResponse({ ok: true });
|
||||
});
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "MTH Video Manifest Capture",
|
||||
"version": "1.0",
|
||||
"description": "Captures video manifest URLs.",
|
||||
"permissions": [
|
||||
"webRequest",
|
||||
"activeTab",
|
||||
"storage"
|
||||
],
|
||||
"host_permissions": [
|
||||
"<all_urls>"
|
||||
],
|
||||
"name": "SharePoint Video Downloader",
|
||||
"version": "2.0",
|
||||
"description": "Captures SharePoint/OneDrive video stream URLs and generates download commands.",
|
||||
"permissions": ["webRequest", "activeTab", "tabs", "storage"],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
@@ -22,4 +16,4 @@
|
||||
"128": "icon128.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
223
popup.css
223
popup.css
@@ -1,45 +1,70 @@
|
||||
body {
|
||||
width: 350px;
|
||||
width: 400px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 15px;
|
||||
font-size: 20px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a73e8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
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 {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
transform 0.1s;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
width: 100%;
|
||||
background-color: #1a73e8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background-color: #1557b0;
|
||||
}
|
||||
|
||||
.btn.primary:active {
|
||||
background-color: #0d47a1;
|
||||
transform: scale(0.98);
|
||||
@@ -49,145 +74,173 @@ body {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.secondary:hover {
|
||||
background-color: #388e3c;
|
||||
}
|
||||
|
||||
.btn.secondary:active {
|
||||
background-color: #2e7d32;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
width: auto;
|
||||
padding: 6px 12px;
|
||||
margin-top: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn.toggle {
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
color: #1a73e8;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.btn.toggle:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
|
||||
.btn.toggle:active {
|
||||
background-color: #d9e6ff;
|
||||
transform: scale(0.98);
|
||||
.btn-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── Cards ───────────────────────────────────────────── */
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 16px;
|
||||
margin: 0 0 8px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.manifest-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.manifest-section label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* ── Text boxes ──────────────────────────────────────── */
|
||||
|
||||
.text-container {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
padding: 6px 8px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
max-height: 100px;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: max-height 0.3s ease, white-space 0.3s ease;
|
||||
word-break: break-all;
|
||||
max-height: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.text.expanded {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* ── Options ─────────────────────────────────────────── */
|
||||
|
||||
.options-section {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.options-section label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.select, .input {
|
||||
padding: 6px;
|
||||
font-size: 13px;
|
||||
.select,
|
||||
.input {
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 150px;
|
||||
cursor: text;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.select:focus, .input:focus {
|
||||
.select:focus,
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: #1a73e8;
|
||||
box-shadow: 0 0 0 2px #e8f0fe;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
.input {
|
||||
width: 120px;
|
||||
}
|
||||
.btn.small {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
/* ── Manifest list ───────────────────────────────────── */
|
||||
|
||||
.manifest-list {
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.manifest-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.manifest-row:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
.manifest-row.selected {
|
||||
background-color: #d2e3fc;
|
||||
}
|
||||
|
||||
.badge {
|
||||
flex-shrink: 0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge.dash {
|
||||
background-color: #1a73e8;
|
||||
}
|
||||
.badge.hls {
|
||||
background-color: #e8710a;
|
||||
}
|
||||
.badge.direct {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.manifest-url {
|
||||
font-size: 11px;
|
||||
color: #444;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.manifest-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.manifest-section label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
200
popup.html
200
popup.html
@@ -1,73 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Video Manifest Capture</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<!-- Optional: Add Font Awesome for icons (uncomment if using) -->
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="title">MTH Video Manifest Capture</h1>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<h2>Manifest Details</h2>
|
||||
<div class="manifest-section">
|
||||
<label>Cleaned URL:</label>
|
||||
<head>
|
||||
<title>SharePoint Video Downloader</title>
|
||||
<link rel="stylesheet" href="popup.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="title">SharePoint Video Downloader</h1>
|
||||
|
||||
<!-- Current Tab URL — best approach for yt-dlp -->
|
||||
<div class="card">
|
||||
<h2>Current Page (Recommended)</h2>
|
||||
<p class="hint">
|
||||
Use the current SharePoint page URL with yt-dlp + browser cookies.
|
||||
This is the easiest method.
|
||||
</p>
|
||||
<div class="text-container">
|
||||
<p id="manifestUrl" class="text">No manifest captured yet.</p>
|
||||
<p id="tabUrl" class="text">Loading…</p>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<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>
|
||||
<button id="toggleUrl" class="btn toggle">Expand</button>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<label>Quality:</label>
|
||||
<select id="quality" class="select">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080p">1080p</option>
|
||||
<option value="720p">720p</option>
|
||||
<option value="480p">480p</option>
|
||||
</select>
|
||||
|
||||
<label>Format:</label>
|
||||
<select id="format" class="select">
|
||||
<option value="mp4">MP4</option>
|
||||
<option value="mkv">MKV</option>
|
||||
<option value="ts">TS</option>
|
||||
</select>
|
||||
|
||||
<label>Output Filename:</label>
|
||||
<input id="filename" type="text" class="input" placeholder="video_YYYYMMDD_HHMMSS">
|
||||
<button id="refresh" class="btn primary">
|
||||
<i class="fas fa-refresh"></i> Save Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="manifest-section">
|
||||
<label>FFmpeg Command:</label>
|
||||
<div class="text-container">
|
||||
<p id="ffmpegCommand" class="text">FFmpeg command will appear here.</p>
|
||||
<!-- Options -->
|
||||
<div class="card">
|
||||
<h2>Options</h2>
|
||||
<div class="options-section">
|
||||
<label>Browser:</label>
|
||||
<select id="browser" class="select">
|
||||
<option value="edge">Edge</option>
|
||||
<option value="chrome">Chrome</option>
|
||||
<option value="firefox">Firefox</option>
|
||||
<option value="brave">Brave</option>
|
||||
</select>
|
||||
<div id="cookieWarn" class="warn" style="display: none">
|
||||
⚠ <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">
|
||||
<option value="best">Best</option>
|
||||
<option value="1080p">1080p</option>
|
||||
<option value="720p">720p</option>
|
||||
<option value="480p">480p</option>
|
||||
</select>
|
||||
|
||||
<label>Format:</label>
|
||||
<select id="format" class="select">
|
||||
<option value="mp4">MP4</option>
|
||||
<option value="mkv">MKV</option>
|
||||
<option value="ts">TS</option>
|
||||
</select>
|
||||
|
||||
<label>Filename:</label>
|
||||
<input
|
||||
id="filename"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="auto (timestamp)"
|
||||
/>
|
||||
</div>
|
||||
<button id="toggleFffmpeg" class="btn toggle">Expand</button>
|
||||
<button id="copyFffmpegBtn" class="btn secondary small">
|
||||
<i class="fas fa-copy"></i> Copy FFmpeg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="manifest-section">
|
||||
<label>yt-dlp Command:</label>
|
||||
<div class="text-container">
|
||||
<p id="ytdlpCommand" class="text">yt-dlp command will appear here.</p>
|
||||
<!-- Captured manifests -->
|
||||
<div class="card">
|
||||
<h2>
|
||||
Captured Stream URLs
|
||||
<button
|
||||
id="refresh"
|
||||
class="btn toggle small"
|
||||
style="display: inline; margin-left: 8px; padding: 3px 8px"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
id="clearAll"
|
||||
class="btn toggle small"
|
||||
style="display: inline; margin-left: 4px; padding: 3px 8px"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</h2>
|
||||
<div id="manifestList" class="manifest-list">
|
||||
<p class="empty-msg">
|
||||
Play a video on SharePoint to capture stream URLs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected manifest commands -->
|
||||
<div class="card" id="commandsCard" style="display: none">
|
||||
<h2>Download Commands</h2>
|
||||
|
||||
<div class="manifest-section">
|
||||
<label>FFmpeg:</label>
|
||||
<div class="text-container">
|
||||
<p id="ffmpegCommand" class="text">Select a captured URL above.</p>
|
||||
</div>
|
||||
<button id="copyFfmpegBtn" class="btn secondary small">
|
||||
Copy FFmpeg
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="manifest-section">
|
||||
<label>yt-dlp (browser cookies):</label>
|
||||
<div class="text-container">
|
||||
<p id="ytdlpCommand" class="text">Select a captured URL above.</p>
|
||||
</div>
|
||||
<button id="copyYtdlpBtn" class="btn secondary small">
|
||||
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>
|
||||
<button id="toggleYtdlp" class="btn toggle">Expand</button>
|
||||
<button id="copyYtdlpBtn" class="btn secondary small">
|
||||
<i class="fas fa-copy"></i> Copy yt-dlp
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
464
popup.js
464
popup.js
@@ -1,249 +1,279 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Get DOM elements with null checks
|
||||
const manifestUrlDiv = document.getElementById('manifestUrl');
|
||||
const ffmpegCommandDiv = document.getElementById('ffmpegCommand');
|
||||
const ytdlpCommandDiv = document.getElementById('ytdlpCommand');
|
||||
const refreshButton = document.getElementById('refresh');
|
||||
const copyFffmpegBtn = document.getElementById('copyFffmpegBtn'); // Fixed typo
|
||||
const copyYtdlpBtn = document.getElementById('copyYtdlpBtn');
|
||||
const qualitySelect = document.getElementById('quality');
|
||||
const formatSelect = document.getElementById('format');
|
||||
const filenameInput = document.getElementById('filename');
|
||||
const toggleUrlBtn = document.getElementById('toggleUrl');
|
||||
const toggleFffmpegBtn = document.getElementById('toggleFffmpeg'); // Fixed typo
|
||||
const toggleYtdlpBtn = document.getElementById('toggleYtdlp');
|
||||
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");
|
||||
const formatSelect = document.getElementById("format");
|
||||
const filenameInput = document.getElementById("filename");
|
||||
const manifestListDiv = document.getElementById("manifestList");
|
||||
const commandsCard = document.getElementById("commandsCard");
|
||||
const ffmpegCommandDiv = document.getElementById("ffmpegCommand");
|
||||
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");
|
||||
|
||||
// Check if all elements exist
|
||||
if (!manifestUrlDiv || !ffmpegCommandDiv || !ytdlpCommandDiv || !refreshButton || !copyFffmpegBtn ||
|
||||
!copyYtdlpBtn || !qualitySelect || !formatSelect || !filenameInput || !toggleUrlBtn ||
|
||||
!toggleFffmpegBtn || !toggleYtdlpBtn) {
|
||||
console.error('One or more DOM elements not found in popup.html');
|
||||
return;
|
||||
let currentTabUrl = "";
|
||||
let currentTabId = null;
|
||||
let selectedManifest = null;
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────
|
||||
|
||||
function ts() {
|
||||
const d = new Date();
|
||||
return `video_${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}_${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
|
||||
}
|
||||
function p(n) {
|
||||
return String(n).padStart(2, "0");
|
||||
}
|
||||
|
||||
let currentManifestData = null;
|
||||
|
||||
// Function to generate a timestamp-based filename
|
||||
function generateTimestampFilename() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
return `video_${year}${month}${day}_${hours}${minutes}${seconds}`;
|
||||
function outName() {
|
||||
const v = filenameInput.value.trim();
|
||||
const ext = formatSelect.value;
|
||||
if (v) return v.includes(".") ? v : `${v}.${ext}`;
|
||||
return `${ts()}.${ext}`;
|
||||
}
|
||||
|
||||
// Function to generate FFmpeg command
|
||||
function generateFffmpegCommand(cleanedUrl, type, quality, format) {
|
||||
const userFilename = filenameInput.value.trim();
|
||||
const filename = userFilename || `${generateTimestampFilename()}.${format}`;
|
||||
return `ffmpeg -i "${cleanedUrl}" -c copy ${filename}`;
|
||||
function browser() {
|
||||
return browserSelect.value;
|
||||
}
|
||||
|
||||
// Function to generate yt-dlp command
|
||||
function generateYtdlpCommand(cleanedUrl, quality, format) {
|
||||
const userFilename = filenameInput.value.trim();
|
||||
const filename = userFilename || `${generateTimestampFilename()}.${format}`;
|
||||
let qualityParam = '';
|
||||
if (quality !== 'best') {
|
||||
qualityParam = `--recode-video ${format} -f bestvideo[height<=?${quality.replace('p', '')}]+bestaudio/best[height<=?${quality.replace('p', '')}]`;
|
||||
} else {
|
||||
qualityParam = `--recode-video ${format} -f bestvideo+bestaudio/best`;
|
||||
// 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) {
|
||||
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-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;
|
||||
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-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
|
||||
? ` -headers "Referer: ${new URL(currentTabUrl).origin}/"`
|
||||
: "";
|
||||
if (type === "direct") {
|
||||
return `ffmpeg${referer} -i "${url}" -c copy "${name}"`;
|
||||
}
|
||||
return `yt-dlp "${cleanedUrl}" ${qualityParam} -o "${filename}"`;
|
||||
return `ffmpeg -protocol_whitelist file,http,https,tcp,tls${referer} -i "${url}" -c copy "${name}"`;
|
||||
}
|
||||
|
||||
function updateUI(data) {
|
||||
if (data) {
|
||||
currentManifestData = data;
|
||||
if (manifestUrlDiv) manifestUrlDiv.textContent = data.cleanedUrl; // Add null check
|
||||
const ffmpegCommand = generateFffmpegCommand(
|
||||
data.cleanedUrl,
|
||||
data.type,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
const ytdlpCommand = generateYtdlpCommand(
|
||||
data.cleanedUrl,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.textContent = ffmpegCommand; // Add null check
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.textContent = ytdlpCommand; // Add null check
|
||||
if (filenameInput && !filenameInput.value.trim()) {
|
||||
filenameInput.placeholder = generateTimestampFilename();
|
||||
}
|
||||
} else {
|
||||
if (manifestUrlDiv) manifestUrlDiv.textContent = 'No manifest captured yet.';
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.textContent = 'FFmpeg command will appear here.';
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.textContent = 'yt-dlp command will appear here.';
|
||||
if (filenameInput) {
|
||||
filenameInput.value = '';
|
||||
filenameInput.placeholder = 'video_YYYYMMDD_HHMMSS';
|
||||
}
|
||||
}
|
||||
// Reset toggle states with null checks
|
||||
if (manifestUrlDiv) manifestUrlDiv.classList.remove('expanded');
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.classList.remove('expanded');
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.classList.remove('expanded');
|
||||
if (toggleUrlBtn) toggleUrlBtn.textContent = 'Expand';
|
||||
if (toggleFffmpegBtn) toggleFffmpegBtn.textContent = 'Expand';
|
||||
if (toggleYtdlpBtn) toggleYtdlpBtn.textContent = 'Expand';
|
||||
}
|
||||
// ── Copy helper ──────────────────────────────────────────
|
||||
|
||||
function fetchLastManifest() {
|
||||
try {
|
||||
chrome.runtime.sendMessage({ type: 'getLastManifest' }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('Runtime error:', chrome.runtime.lastError.message);
|
||||
updateUI(null);
|
||||
return;
|
||||
}
|
||||
updateUI(response.data);
|
||||
function copyText(text, btn, defaultLabel) {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
btn.textContent = "Copied!";
|
||||
setTimeout(() => (btn.textContent = defaultLabel), 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
btn.textContent = "Copy Failed";
|
||||
setTimeout(() => (btn.textContent = defaultLabel), 1500);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error sending message:', error);
|
||||
updateUI(null);
|
||||
}
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
fetchLastManifest();
|
||||
// ── Tab URL section ──────────────────────────────────────
|
||||
|
||||
// Listen for new manifests
|
||||
chrome.runtime.onMessage.addListener((message) => {
|
||||
if (message.type === 'manifestDetected') {
|
||||
updateUI(message.data);
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
if (tabs[0]) {
|
||||
currentTabUrl = tabs[0].url;
|
||||
currentTabId = tabs[0].id;
|
||||
tabUrlDiv.textContent = currentTabUrl;
|
||||
loadManifests();
|
||||
}
|
||||
});
|
||||
|
||||
// Add event listeners with null checks
|
||||
if (refreshButton) {
|
||||
refreshButton.addEventListener('click', fetchLastManifest);
|
||||
copyTabYtdlp.addEventListener("click", () => {
|
||||
if (currentTabUrl)
|
||||
copyText(
|
||||
ytdlpForPage(currentTabUrl),
|
||||
copyTabYtdlp,
|
||||
"Copy yt-dlp Command",
|
||||
);
|
||||
});
|
||||
|
||||
copyTabYtdlpCookies.addEventListener("click", () => {
|
||||
if (currentTabUrl)
|
||||
copyText(
|
||||
ytdlpCookiesFileForPage(currentTabUrl),
|
||||
copyTabYtdlpCookies,
|
||||
"Copy yt-dlp (cookies.txt)",
|
||||
);
|
||||
});
|
||||
|
||||
copyTabUrl.addEventListener("click", () => {
|
||||
if (currentTabUrl) copyText(currentTabUrl, copyTabUrl, "Copy URL");
|
||||
});
|
||||
|
||||
// ── Manifest list ────────────────────────────────────────
|
||||
|
||||
function loadManifests() {
|
||||
if (currentTabId == null) return;
|
||||
chrome.runtime.sendMessage(
|
||||
{ type: "getManifests", tabId: currentTabId },
|
||||
(resp) => {
|
||||
if (chrome.runtime.lastError || !resp) {
|
||||
renderManifests([]);
|
||||
return;
|
||||
}
|
||||
renderManifests(resp.manifests || []);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Update commands on quality/format/filename change with null checks
|
||||
if (qualitySelect) {
|
||||
qualitySelect.addEventListener('change', () => {
|
||||
if (currentManifestData) {
|
||||
const ffmpegCommand = generateFffmpegCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
currentManifestData.type,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
const ytdlpCommand = generateYtdlpCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.textContent = ffmpegCommand;
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.textContent = ytdlpCommand;
|
||||
}
|
||||
function renderManifests(list) {
|
||||
manifestListDiv.innerHTML = "";
|
||||
if (list.length === 0) {
|
||||
manifestListDiv.innerHTML =
|
||||
'<p class="empty-msg">Play a video on SharePoint to capture stream URLs.</p>';
|
||||
return;
|
||||
}
|
||||
list.forEach((m, i) => {
|
||||
const row = document.createElement("div");
|
||||
row.className =
|
||||
"manifest-row" +
|
||||
(selectedManifest && selectedManifest.cleanedUrl === m.cleanedUrl
|
||||
? " selected"
|
||||
: "");
|
||||
row.innerHTML = `<span class="badge ${m.type}">${m.label || m.type.toUpperCase()}</span>
|
||||
<span class="manifest-url" title="${m.cleanedUrl}">${m.cleanedUrl}</span>`;
|
||||
row.addEventListener("click", () => selectManifest(m));
|
||||
manifestListDiv.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
if (formatSelect) {
|
||||
formatSelect.addEventListener('change', () => {
|
||||
if (currentManifestData) {
|
||||
const ffmpegCommand = generateFffmpegCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
currentManifestData.type,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
const ytdlpCommand = generateYtdlpCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.textContent = ffmpegCommand;
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.textContent = ytdlpCommand;
|
||||
}
|
||||
});
|
||||
function selectManifest(m) {
|
||||
selectedManifest = m;
|
||||
commandsCard.style.display = "";
|
||||
updateCommands();
|
||||
// Re-render to highlight selection
|
||||
loadManifests();
|
||||
}
|
||||
|
||||
if (filenameInput) {
|
||||
filenameInput.addEventListener('change', () => {
|
||||
if (currentManifestData) {
|
||||
const ffmpegCommand = generateFffmpegCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
currentManifestData.type,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
const ytdlpCommand = generateYtdlpCommand(
|
||||
currentManifestData.cleanedUrl,
|
||||
qualitySelect.value,
|
||||
formatSelect.value
|
||||
);
|
||||
if (ffmpegCommandDiv) ffmpegCommandDiv.textContent = ffmpegCommand;
|
||||
if (ytdlpCommandDiv) ytdlpCommandDiv.textContent = ytdlpCommand;
|
||||
}
|
||||
});
|
||||
function updateCommands() {
|
||||
if (!selectedManifest) return;
|
||||
ffmpegCommandDiv.textContent = ffmpegForManifest(
|
||||
selectedManifest.cleanedUrl,
|
||||
selectedManifest.type,
|
||||
);
|
||||
ytdlpCommandDiv.textContent = ytdlpForManifest(selectedManifest.cleanedUrl);
|
||||
ytdlpCookiesFileCommandDiv.textContent = ytdlpCookiesFileForManifest(
|
||||
selectedManifest.cleanedUrl,
|
||||
);
|
||||
updateCookieWarning();
|
||||
}
|
||||
|
||||
// Copy FFmpeg button with null check
|
||||
if (copyFffmpegBtn) {
|
||||
copyFffmpegBtn.addEventListener('click', () => {
|
||||
if (ffmpegCommandDiv) {
|
||||
const commandText = ffmpegCommandDiv.textContent;
|
||||
navigator.clipboard.writeText(commandText).then(() => {
|
||||
copyFffmpegBtn.textContent = 'Copied!';
|
||||
setTimeout(() => copyFffmpegBtn.textContent = 'Copy FFmpeg', 2000);
|
||||
}).catch((err) => {
|
||||
console.error('Failed to copy FFmpeg:', err);
|
||||
copyFffmpegBtn.textContent = 'Copy Failed';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// ── Buttons ──────────────────────────────────────────────
|
||||
|
||||
// Copy yt-dlp button with null check
|
||||
if (copyYtdlpBtn) {
|
||||
copyYtdlpBtn.addEventListener('click', () => {
|
||||
if (ytdlpCommandDiv) {
|
||||
const commandText = ytdlpCommandDiv.textContent;
|
||||
navigator.clipboard.writeText(commandText).then(() => {
|
||||
copyYtdlpBtn.textContent = 'Copied!';
|
||||
setTimeout(() => copyYtdlpBtn.textContent = 'Copy yt-dlp', 2000);
|
||||
}).catch((err) => {
|
||||
console.error('Failed to copy yt-dlp:', err);
|
||||
copyYtdlpBtn.textContent = 'Copy Failed';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
refreshBtn.addEventListener("click", loadManifests);
|
||||
|
||||
// Toggle URL visibility with null check
|
||||
if (toggleUrlBtn) {
|
||||
toggleUrlBtn.addEventListener('click', () => {
|
||||
if (manifestUrlDiv) {
|
||||
manifestUrlDiv.classList.toggle('expanded');
|
||||
toggleUrlBtn.textContent = manifestUrlDiv.classList.contains('expanded') ? 'Collapse' : 'Expand';
|
||||
}
|
||||
});
|
||||
}
|
||||
clearAllBtn.addEventListener("click", () => {
|
||||
if (currentTabId == null) return;
|
||||
chrome.runtime.sendMessage(
|
||||
{ type: "clearManifests", tabId: currentTabId },
|
||||
() => {
|
||||
selectedManifest = null;
|
||||
commandsCard.style.display = "none";
|
||||
loadManifests();
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
// Toggle FFmpeg visibility with null check
|
||||
if (toggleFffmpegBtn) {
|
||||
toggleFffmpegBtn.addEventListener('click', () => {
|
||||
if (ffmpegCommandDiv) {
|
||||
ffmpegCommandDiv.classList.toggle('expanded');
|
||||
toggleFffmpegBtn.textContent = ffmpegCommandDiv.classList.contains('expanded') ? 'Collapse' : 'Expand';
|
||||
}
|
||||
});
|
||||
}
|
||||
copyFfmpegBtn.addEventListener("click", () => {
|
||||
copyText(ffmpegCommandDiv.textContent, copyFfmpegBtn, "Copy FFmpeg");
|
||||
});
|
||||
|
||||
// Toggle yt-dlp visibility with null check
|
||||
if (toggleYtdlpBtn) {
|
||||
toggleYtdlpBtn.addEventListener('click', () => {
|
||||
if (ytdlpCommandDiv) {
|
||||
ytdlpCommandDiv.classList.toggle('expanded');
|
||||
toggleYtdlpBtn.textContent = ytdlpCommandDiv.classList.contains('expanded') ? 'Collapse' : 'Expand';
|
||||
}
|
||||
copyYtdlpBtn.addEventListener("click", () => {
|
||||
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();
|
||||
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) {
|
||||
loadManifests();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user