Google Chrome Video Extractor

My Friends,

A small update on this small but very useful project:

Background.js

const videoFormats = [".mp4", ".webm", ".m3u8"];

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (videoFormats.some((format) => details.url.includes(format)) || details.url.startsWith("blob:")) {
      chrome.runtime.sendMessage({ type: "videoDetected", url: details.url });
    }
  },
  { urls: ["<all_urls>"] },
  []
);

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id, allFrames: true },
      files: ["content.js"],
    },
    () => {
      console.log("Content script injected into all frames");
    }
  );
});

Content.js

const parentPageTitle = document.title;

function extractAllVideos() {
  try {
    const videos = document.querySelectorAll('video');
    Array.from(videos).forEach((video, index) => {
      const src = video.src || (video.querySelector('source') ? video.querySelector('source').src : '');
      const poster = video.poster || 'thumb.ico';
      const width = video.videoWidth || video.width || "Unknown";
      const height = video.videoHeight || video.height || "Unknown";
      const videoName = video.getAttribute('title') || video.getAttribute('alt') || `Video ${index + 1}`;

      if (src) {
        chrome.runtime.sendMessage({
          type: "videoDetected",
          url: src,
          poster: poster,
          name: videoName,
          width: width.toString(),
          height: height.toString(),
          pageTitle: parentPageTitle,
        });
      }
    });
  } catch (error) {
    console.error("Error extracting videos:", error);
  }
}

function detectVideosInIFrames() {
  const iframes = document.querySelectorAll("iframe");

  iframes.forEach((iframe, index) => {
    iframe.addEventListener('load', () => {
      try {
        iframe.contentWindow.postMessage({ type: "extractVideos" }, "*");
      } catch (error) {
        console.error(`Unable to access iframe at index ${index}:`, error);
      }
    });

    try {
      if (!iframe.contentWindow || !iframe.contentDocument || !iframe.contentDocument.body) {
        throw new Error("iframe content is null or inaccessible.");
      }
      console.log(`iframe at index ${index} loaded successfully.`);
    } catch (error) {
      console.error(`Error checking iframe at index ${index}:`, error);
    }
  });
}

window.addEventListener('message', (event) => {
  if (event.data.type === "videoDetectedFromIframe") {
    chrome.runtime.sendMessage({
      type: "videoDetected",
      url: event.data.url,
      poster: event.data.poster,
      name: event.data.name,
      width: event.data.width,
      height: event.data.height,
      pageTitle: event.data.pageTitle,
    });
  }
});

chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "requestPageData") {
    extractAllVideos();
    detectVideosInIFrames();
  }
});

window.addEventListener('load', () => {
  extractAllVideos();
  detectVideosInIFrames();

  const observer = new MutationObserver(() => {
    extractAllVideos();
    detectVideosInIFrames();
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

Iframe_Content.js

const parentPageTitle = document.title;

function extractAllVideos(container = document) {
  try {
    const videos = container.querySelectorAll('video');
    Array.from(videos).forEach((video, index) => {
      const src = video.src || (video.querySelector('source') ? video.querySelector('source').src : '');
      const poster = video.poster || 'thumb.ico';
      const width = video.videoWidth || video.width || "Unknown";
      const height = video.videoHeight || video.height || "Unknown";
      const videoName = video.getAttribute('title') || video.getAttribute('alt') || `Video ${index + 1}`;

      if (src) {
        window.parent.postMessage({
          type: "videoDetectedFromIframe",
          url: src,
          poster: poster,
          name: videoName,
          width: width.toString(),
          height: height.toString(),
          pageTitle: parentPageTitle,
        }, "*");
      }
    });
  } catch (error) {
    console.error("Error extracting videos:", error);
  }
}

window.addEventListener('message', (event) => {
  if (event.data.type === "extractVideos") {
    extractAllVideos();
  }
});

window.addEventListener('load', () => {
  extractAllVideos();

  const observer = new MutationObserver(() => {
    extractAllVideos();
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

Manifest.json

{
  "manifest_version": 3,
  "name": "Video Extractor",
  "version": "1.0",
  "description": "Extracts videos from web pages",
  "permissions": [
    "activeTab",
    "scripting",
    "tabs",
    "storage",
    "webNavigation",
    "webRequest",
    "webRequestBlocking"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["iframe_content.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

Popup.html

<!DOCTYPE html>
<html>

<head>
  <title>Video Extractor</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      border-radius: 3px;
      width: 673px;
      background-color: #343a40;
      color: white;
    }

    .T {
      top: 2x;
      padding-left: 20px;
      padding-right: 20px;
      border: #454d55 1px solid;
      border-radius: 7px;
    }

    table {
      border: none;
    }

    .thumbnail-cell{
      width: 184px;
    }

    .video-list {
      max-height: 400px;
      overflow-y: auto;
    }

    .thumbnail {
      width: 164px;
      height: 90px;
      object-fit: cover;
      border-radius: 3px;
    }

    .scrollbar-dark::-webkit-scrollbar {
      width: 8px;
      background-color: #343a40;
    }

    .scrollbar-dark::-webkit-scrollbar-thumb {
      background-color: #6c757d;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <h3 class="text-center">Video Extractor</h3>
  <div class="T">
    <table class="table table-dark table-striped">
      <thead>
        <tr>
          <th scope="col">Thumbnail</th>
          <th scope="col">Details</th>
        </tr>
      </thead>
      <tbody id="videoList" class="video-list scrollbar-dark"></tbody>
    </table>
  </div>
  <script src="popup.js"></script>
</body>

</html>

Popup.js

document.addEventListener("DOMContentLoaded", async () => {
  const videoList = document.getElementById("videoList");

  // Get active tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // Inject and execute content script in all frames
  chrome.scripting.executeScript(
    {
      target: { tabId: tab.id, allFrames: true },
      func: async () => {
        const videos = [];
        const iframes = document.querySelectorAll('iframe');

        for (const iframe of iframes) {
          await new Promise((resolve) => {
            iframe.onload = resolve;
            if (iframe.contentDocument.readyState === 'complete') {
              resolve();
            }
          });

          const iframeVideos = Array.from(iframe.contentDocument.querySelectorAll('video')).map((video) => ({
            src: video.currentSrc || video.src,
            poster: video.poster || "",
            width: video.videoWidth || "Unknown",
            height: video.videoHeight || "Unknown",
            title: video.getAttribute('title') || "Unnamed Video",
          }));
          videos.push(...iframeVideos);
        }

        const mainVideos = Array.from(document.querySelectorAll("video")).map((video) => ({
          src: video.currentSrc || video.src,
          poster: video.poster || "",
          width: video.videoWidth || "Unknown",
          height: video.videoHeight || "Unknown",
          title: document.title || "Unnamed Video",
        }));

        videos.push(...mainVideos);
        return videos;
      },
    },
    (injectionResults) => {
      if (!injectionResults || injectionResults.length === 0) {
        videoList.innerHTML = "<p>No videos found.</p>";
        return;
      }

      // Combine results from all frames
      const videos = injectionResults.flatMap((result) => result.result);

      // Display videos
      if (videos.length === 0) {
        videoList.innerHTML = "<p>No videos found.</p>";
        return;
      }

      videos.forEach((video) => {
        const row = document.createElement("tr");
        row.innerHTML = `
          <td class="thumbnail-cell">
            <img src="${video.poster}" class="thumbnail" alt="Video Thumbnail" />
          </td>
          <td>
            <div>
              <strong>${video.title}</strong>
              <p>Resolution: ${video.width} x ${video.height}</p>
              <a href="${video.src}" target="_blank" class="btn btn-sm btn-primary">Open in New Tab</a>
              <a href="${video.src}" download class="btn btn-sm btn-success">Download</a>
            </div>
          </td>
        `;
        videoList.appendChild(row);
      });
    }
  );
});

You need a Thumb Nail and a Icon for the project.

This is a lot better than it was before:

Enjoy My Friends...

Best Wishes,

   Chris