Display of all kind of videos work

README.md

@@ -1,7 +1,31 @@
 # YouTube Link Embedder
 
-This is a firefox Extension.
+This is a firefox Extension that allows you to view all YouTube videos.
 
-You can load this extension using Firefox "about:debugging#/runtime/this-firefox" temporary extentension mechanism.
+It puts the video into iframe:
 
-Allows you to view a YouTube video without problems. Just insert into popup link to video, and check results.
+```
+  iframe.width = '100%';
+  iframe.height = '100%';
+  iframe.frameBorder = 0;
+  iframe.referrerPolicy = 'no-referrer-when-downgrade';
+  iframe.allowFullscreen = true;
+  iframe.className = 'youtube_player_frame';
+  iframe.style.position = 'absolute';
+  iframe.style.top = '0';
+  iframe.style.left = '0';
+  iframe.style.width = '100%';
+  iframe.style.height = '100%';
+  iframe.style.border = '0';
+```
+
+# Installation
+
+ - Described by https://extensionworkshop.com/documentation/publish/distribute-sideloading/
+ - Enter "about:debugging#/runtime/this-firefox" in firefox address bar. Add temporary extentension mechanism
+
+# HowTo
+
+ - Navigate to any page. Let's say https://www.youtube.com
+ - click extension, popup should be opened
+ - provide your desired video, let's say https://www.youtube.com/watch?v=CeA92xqw-QI

manifest.json

@@ -11,6 +11,6 @@
     "default_icon": "icons8-embed-100.png",
     "default_popup": "popup.html"
   },
-  "permissions": ["activeTab"]
+  "permissions": ["activeTab", "https://renegat0x0.ddns.net/*"]
 }
 

popup.js

@@ -10,16 +10,18 @@ document.addEventListener("DOMContentLoaded", function () {
       const videoId = videoIdMatch ? videoIdMatch[1] : null;
 
       if (videoId) {
-        // Open a new tab and execute a script after a short delay
-        browser.tabs.create({
-          url: browser.runtime.getURL("blank.html"),
-        }).then((tab) => {
-          setTimeout(() => {
-            browser.tabs.executeScript(tab.id, {
+        // Execute a script in the currently active tab
+        browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+          const activeTab = tabs[0];
+          if (activeTab) {
+            browser.tabs.executeScript(activeTab.id, {
               code: `
                 const container = document.createElement('div');
                 container.className = 'youtube_player_container';
-                
+                container.style.position = 'relative';
+                container.style.width = '80%';
+                container.style.paddingBottom = '46.25%';
+
                 const iframe = document.createElement('iframe');
                 iframe.src = 'https://www.youtube.com/embed/${videoId}';
                 iframe.width = '100%';
@@ -28,13 +30,23 @@ document.addEventListener("DOMContentLoaded", function () {
                 iframe.referrerPolicy = 'no-referrer-when-downgrade';
                 iframe.allowFullscreen = true;
                 iframe.className = 'youtube_player_frame';
+                iframe.style.position = 'absolute';
+                iframe.style.top = '0';
+                iframe.style.left = '0';
+                iframe.style.width = '100%';
+                iframe.style.height = '100%';
+                iframe.style.border = '0';
 
                 container.appendChild(iframe);
+
+                // Replace the body of the currently active tab with the container
                 document.body.innerHTML = '';
                 document.body.appendChild(container);
               `,
             });
-          }, 500); // Adjust the delay (in milliseconds) if needed
+          } else {
+            console.error("No active tab found.");
+          }
         });
       } else {
         console.error("Invalid YouTube link. Please enter a valid YouTube video link.");