feat: Create Chrome extension for Cobalt video downloader

This commit introduces a Chrome extension that provides a side panel interface to facilitate video downloads using Cobalt. Key features: - A side panel UI with an input field for video URLs and a download button. - Redirects you to the Cobalt website (cobalt.tools) with the video URL for processing. - Basic URL validation and error handling for your input. - Includes necessary manifest.json, HTML, CSS, and JavaScript files. - Placeholder icons are included. The extension allows you to quickly send video URLs to Cobalt directly from your browser's side panel.
2025-06-28 09:28:29 +00:00 · 2025-06-11 20:11:49 +00:00 · 2025-06-11 20:11:49 +00:00 · 42f2bbf6a6
commit 42f2bbf6a6
parent 35530459b6
7 changed files with 110 additions and 0 deletions
--- a/images/icon128.png
+++ b/images/icon128.png
--- a/images/icon16.png
+++ b/images/icon16.png
--- a/images/icon48.png
+++ b/images/icon48.png
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "name": "Cobalt Side Panel",
+  "version": "1.0",
+  "description": "A Chrome extension that provides a side panel interface for Cobalt.",
+  "permissions": [
+    "sidePanel"
+  ],
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  "action": {
+    "default_title": "Open Cobalt Side Panel"
+  },
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  }
+}
--- a/sidepanel.css
+++ b/sidepanel.css
@ -0,0 +1,44 @@
+body {
+  font-family: sans-serif;
+  padding: 10px;
+  background-color: #f0f0f0;
+  min-width: 250px; /* Ensure sidepanel has some minimum width */
+}
+
+h1 {
+  color: #333;
+  font-size: 1.2em; /* Slightly smaller h1 for a side panel */
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+p {
+  color: #555;
+  font-size: 0.9em; /* Slightly smaller p for a side panel */
+  margin-bottom: 5px;
+}
+
+#videoUrl {
+  width: calc(100% - 22px); /* Adjust width considering padding/border */
+  padding: 8px 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box; /* Important for width calculation */
+}
+
+#downloadButton {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 100%; /* Make button full width */
+  font-size: 1em;
+  margin-top: 5px; /* Added margin-top */
+}
+
+#downloadButton:hover {
+  background-color: #0056b3;
+}
--- a/sidepanel.html
+++ b/sidepanel.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Cobalt Side Panel</title>
+  <link rel="stylesheet" href="sidepanel.css">
+</head>
+<body>
+  <h1>Cobalt Video Downloader</h1>
+  <p>Enter the URL of the video you want to download:</p>
+  <input type="text" id="videoUrl" placeholder="e.g., https://www.youtube.com/watch?v=..." style="width: 90%; margin-bottom: 10px;">
+  <button id="downloadButton">Download with Cobalt</button>
+
+  <script src="sidepanel.js"></script>
+</body>
+</html>
--- a/sidepanel.js
+++ b/sidepanel.js
@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // New Cobalt download button listener
+  const downloadButton = document.getElementById('downloadButton');
+  const videoUrlInput = document.getElementById('videoUrl');
+
+  if (downloadButton && videoUrlInput) {
+    downloadButton.addEventListener('click', function() {
+      const videoUrl = videoUrlInput.value.trim();
+      if (videoUrl) {
+        // Basic URL validation (optional, but good practice)
+        try {
+          new URL(videoUrl); // Check if it's a valid URL format
+          const cobaltUrl = `https://cobalt.tools/?url=${encodeURIComponent(videoUrl)}`;
+          chrome.tabs.create({ url: cobaltUrl });
+        } catch (error) {
+          alert('Please enter a valid URL.');
+          console.error('Invalid URL:', error);
+        }
+      } else {
+        alert('Please enter a video URL.');
+      }
+    });
+  } else {
+    if (!downloadButton) {
+      console.error('Button with ID "downloadButton" not found.');
+    }
+    if (!videoUrlInput) {
+      console.error('Input field with ID "videoUrl" not found.');
+    }
+  }
+});