diff --git a/images/icon128.png b/images/icon128.png
new file mode 100644
index 00000000..e69de29b
diff --git a/images/icon16.png b/images/icon16.png
new file mode 100644
index 00000000..e69de29b
diff --git a/images/icon48.png b/images/icon48.png
new file mode 100644
index 00000000..e69de29b
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 00000000..2a139650
--- /dev/null
+++ 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"
+ }
+}
diff --git a/sidepanel.css b/sidepanel.css
new file mode 100644
index 00000000..9a094c79
--- /dev/null
+++ 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;
+}
diff --git a/sidepanel.html b/sidepanel.html
new file mode 100644
index 00000000..048dc264
--- /dev/null
+++ b/sidepanel.html
@@ -0,0 +1,15 @@
+
+
+
+ Cobalt Side Panel
+
+
+
+ Cobalt Video Downloader
+ Enter the URL of the video you want to download:
+
+
+
+
+
+
diff --git a/sidepanel.js b/sidepanel.js
new file mode 100644
index 00000000..71bf7c7d
--- /dev/null
+++ 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.');
+ }
+ }
+});