1.0.5 (25014)

- Added support for iFrames (beta) (#3). - Removed redundant code.
MStankiewiczOfficial · Jan 27, 2025 · 5d49e9f · 5d49e9f
1 parent 4200579
commit 5d49e9f
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,8 @@
    <img src="/assets/banner.png" title="RedirectTube">
    <a href="https://addons.mozilla.org/pl/firefox/addon/redirecttube/"><img src="https://img.shields.io/amo/rating/redirecttube%40stankiewiczm.eu?style=for-the-badge&logo=firefox&logoColor=white&label=Mozilla%20Add-ons%20Rating"></a>
    <br>
-   <img src="https://app.codacy.com/project/badge/Grade/f89d4aaf14da4e7e9d1b2f123925586b"/>
+   <img src="https://app.codacy.com/project/badge/Grade/5fbd04d2b238474ca9c21fc62de6ecda"><a href="https://translate.codeberg.org/engage/redirecttube/"><img src="https://translate.codeberg.org/widget/redirecttube/ui/svg-badge.svg"></a>
+</a>
 </p>
 
 ## Open YouTube links in FreeTube
@@ -56,6 +57,12 @@ Right-click a YouTube link and select "Open in FreeTube" to open the video in Fr
 
 If you encounter any issues, please report them on the [issues page](https://github.com/MStankiewiczOfficial/RedirectTube/issues/).
 
+## Translation
+
+If your language is not yet supported by RedirectTube, you can change that! Help develop the extension by translating it into your language.
+
+[![](https://translate.codeberg.org/widget/redirecttube/ui/open-graph.png)](https://translate.codeberg.org/engage/redirecttube/)
+
 ## License
 
 RedirectTube is licensed under CC BY-NC-SA 4.0. For details, please refer to the [LICENSE](LICENSE.md).

diff --git a/release-notes.md b/release-notes.md
@@ -1,9 +1,9 @@
-# 1.0.4 (25013)
+# 1.0.5 (25014)
 
 ## Release Notes
 
-- Added the ability to translate interface into other languages (#9).
-- Added Polish language.
+- Added support for iFrames (beta) (#3).
+- Removed redundant code.
 
 > [!WARNING]
 > File `-unsigned.xpi` will most likely not work in your browser. Use the signed version (`-signed.xpi`) or download from [Mozilla Add-ons](https://addons.mozilla.org/firefox/addon/redirecttube/).
diff --git a/src/Gecko/background.html b/src/Gecko/background.html
diff --git a/src/Gecko/background.js b/src/Gecko/background.js
@@ -1,6 +1,18 @@
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
     detectYT(changeInfo);
     createContextMenu();
+    chrome.storage.local.get(["lang", "iframeButton"], function (result) {
+        lang = result.lang;
+        iframeButton = result.iframeButton;
+        fetch(`i18n/locales/${lang}.json`)
+            .then(response => response.json())
+            .then(data => {
+                buttonName = data.ui.contextMenu.redirect;
+                browser.tabs.query({active: true, currentWindow: true}, (tabs) => {
+                    chrome.tabs.sendMessage(tabs[0].id, {redirecttubeButtonName: buttonName, redirecttubeIframeButton: iframeButton});
+                });
+            });
+    });
 });
 
 chrome.tabs.onActivated.addListener(function(activeInfo) {
@@ -71,7 +83,6 @@ chrome.contextMenus.onClicked.addListener((info) => {
     if (info.menuItemId === "openInFreeTube" && info.linkUrl) {
         let newUrl = "freetube://" + info.linkUrl;
         chrome.tabs.update({ url: newUrl });
-        console.log(newUrl);
     }
 });
 
@@ -99,6 +110,5 @@ function createContextMenu() {
                     ]
                 });
             });
-    }
-    );
-}
+    });
+}
diff --git a/src/Gecko/content.css b/src/Gecko/content.css
@@ -0,0 +1,13 @@
+.redirecttube-redirection-button {
+    position: absolute;
+    z-index: 10000;
+    height: 47px;
+    padding: 0 10px;
+    background-color: #171717cc;
+    color: #fff;
+    font: 400 16px/16px "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
+    border: none;
+    border-radius: 0 2px 2px 0;
+    transition: all 0.3s;
+    cursor: pointer;
+}
diff --git a/src/Gecko/content.js b/src/Gecko/content.js
@@ -0,0 +1,51 @@
+function addButtonIframe(iframe, buttonName) {
+    if (!iframe || iframe.dataset.buttonAdded === "true") return;
+
+    const rect = iframe.getBoundingClientRect();
+    const button = document.createElement("button");
+
+    button.textContent = buttonName;
+    button.classList.add("redirecttube-redirection-button");
+    button.style.top = `${window.scrollY + rect.bottom - 110}px`;
+    button.style.left = `${window.scrollX + rect.left}px`;
+
+    button.addEventListener("click", () => {
+        redirecttubeOpenInFreeTube(iframe.src);
+    });
+
+    document.body.appendChild(button);
+}
+
+window.addEventListener("resize", updateButtons);
+
+window.addEventListener("scroll", updateButtons);
+
+function updateButtons() {
+    const buttons = document.querySelectorAll(".redirecttube-redirection-button");
+    buttons.forEach((button) => button.remove());
+    processIframes(localStorage.getItem("redirecttubeButtonName"));
+}
+
+function processIframes(buttonName) {
+    const iframes = document.querySelectorAll("iframe");
+    iframes.forEach((iframe) => {
+        if (
+            iframe.src.includes("youtube.com/embed") ||
+            iframe.src.includes("youtube-nocookie.com/embed")
+        ) {
+            addButtonIframe(iframe, buttonName);
+        }
+    });
+}
+
+chrome.runtime.onMessage.addListener((request) => {
+    if (request.redirecttubeIframeButton === "iframeButtonYes") {
+        processIframes(request.redirecttubeButtonName);
+    }
+    localStorage.setItem("redirecttubeButtonName", request.redirecttubeButtonName);
+});
+
+function redirecttubeOpenInFreeTube(src) {
+    let newUrl = "freetube://" + src;
+    window.open(newUrl, "_blank");
+}
diff --git a/src/Gecko/i18n/locales/en.json b/src/Gecko/i18n/locales/en.json
@@ -12,6 +12,9 @@
         "contextMenu": {
             "redirect": "Open in FreeTube"
         },
+        "beta": {
+            "label": "Beta"
+        },
         "error": {
             "e404": "Cannot open this page in FreeTube."
         }
@@ -38,6 +41,11 @@
             "showPopup": "Show menu",
             "redirect": "Redirect to FreeTube"
         },
+        "iframeButton": {
+            "label": "Show button in iframes:",
+            "yes": "Yes",
+            "no": "No"
+        },
         "extensionIcon": {
             "label": "Extension icon:"
         },

diff --git a/src/Gecko/i18n/locales/pl.json b/src/Gecko/i18n/locales/pl.json
@@ -12,6 +12,9 @@
         "contextMenu": {
             "redirect": "Otwórz we FreeTube"
         },
+        "beta": {
+            "label": "Beta"
+        },
         "error": {
             "e404": "Nie można otworzyć tej strony we FreeTube."
         }
@@ -38,6 +41,11 @@
             "showPopup": "Pokaż menu",
             "redirect": "Przekieruj do FreeTube"
         },
+        "iframeButton": {
+            "label": "Pokaż przycisk w ramkach iframe:",
+            "yes": "Tak",
+            "no": "Nie"
+        },
         "extensionIcon": {
             "label": "Ikona rozszerzenia:"
         },

diff --git a/src/Gecko/manifest.json b/src/Gecko/manifest.json
@@ -2,7 +2,7 @@
     "name": "RedirectTube",
     "description": "Open YouTube links in FreeTube",
     "author": "Michał Stankiewicz",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "manifest_version": 3,
     "icons": {
         "16": "img/icns/color/allow/16.png",
@@ -15,20 +15,32 @@
         "512": "img/icns/color/allow/512.png"
     },
     "background": {
-        "page": "background.html"
+        "scripts": [
+            "background.js"
+        ]
     },
-    "permissions": [
-        "storage",
-        "tabs",
-        "activeTab",
-        "contextMenus"
+    "content_scripts": [
+        {
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": ["content.js"],
+            "css": ["content.css"],
+            "all_frames": true
+        }
     ],
     "web_accessible_resources": [
         {
             "resources": ["i18n/locales/*.json"],
             "matches": ["<all_urls>"]
         }
     ],
+    "permissions": [
+        "storage",
+        "tabs",
+        "activeTab",
+        "contextMenus"
+    ],
     "action": {
         "default_popup": "popup.html"
     },

diff --git a/src/Gecko/options.css b/src/Gecko/options.css
@@ -42,12 +42,15 @@ a:hover {
 }
 
 select {
+    position: absolute;
+    right: 32px;
     padding: 0.5em 1em;
     margin: 2px;
     border: #79797979 solid 1px;
     border-radius: 4px;
     background-color: #79797979;
     color: var(--color);
+    transform: translateY(-30%);
     transition: all 0.3s;
     font-size: 0.9em;
 }
@@ -155,4 +158,15 @@ footer p {
 }
 .social-logo:hover {
     fill: #ffffff;
+}
+
+.beta-label {
+    position: absolute;
+    padding: 0.5em;
+    background-color: #cb1314;
+    color: #fff;
+    font-size: 8px;
+    text-transform: uppercase;
+    border-radius: 8px;
+    transform: translate(4px, -50%);
 }
diff --git a/src/Gecko/options.html b/src/Gecko/options.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <div id="title">
-        <svg class="logo" width="192px" height="auto" viewBox="0 0 861 205" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+        <svg class="logo" width="192px" viewBox="0 0 861 205" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
             <g transform="matrix(4.63167,0,0,4.63167,-55.5801,-55.5801)">
                 <path d="M14.75,12C13.226,12 12,13.274 12,14.857L12,44.857C12,49.143 17.5,52 20.25,52L23,52L23,14.857C23,13.274 21.773,12 20.25,12L14.75,12Z" style="fill:#fff;"/>
             </g>
@@ -92,6 +92,14 @@ <h1 data-i18n="options.options.title">Options</h1>
             </select>
         </div>
         <br>
+        <div class="section">
+            <label for="iframeButton" data-i18n="options.iframeButton.label">Show button in iframes:</label><span class="beta-label" data-i18n="ui.beta.label">Beta</span>
+            <select name="iframeButton" id="iframeButton">
+                <option value="iframeButtonNo" data-i18n="options.iframeButton.no">No</option>
+                <option value="iframeButtonYes" data-i18n="options.iframeButton.yes">Yes</option>
+            </select>
+        </div>
+        <br>
         <div class="section">
             <label for="extensionIcon" data-i18n="options.extensionIcon.label">Extension icon:</label>
             <div class="extension-icons-list">

diff --git a/src/Gecko/options.js b/src/Gecko/options.js
@@ -1,11 +1,13 @@
 var popupBehavior = "showPopup";
+var iframeButton = "iframeButtonNo";
 var extensionIcon = "color";
 
 function saveOptions(e) {
     setTimeout(() => {
         e.preventDefault();
         browser.storage.local.set({
             popupBehavior: document.getElementById("popupBehavior").value,
+            iframeButton: document.getElementById("iframeButton").value,
             extensionIcon: document.querySelector('input[name="extensionIcon"]:checked').value
         });
         chrome.runtime.sendMessage({ message: "detectYT" });
@@ -16,14 +18,15 @@ function saveOptions(e) {
 function restoreOptions() {
     function setCurrentChoice(result) {
         document.getElementById("popupBehavior").value = result.popupBehavior || popupBehavior;
+        document.getElementById("iframeButton").value = result.iframeButton || iframeButton;
         document.querySelector('input[name="extensionIcon"][value="' + (result.extensionIcon || extensionIcon) + '"]').checked = true;
     }
 
     function onError(error) {
         console.log(`Error: ${error}`);
     }
 
-    var getting = browser.storage.local.get(["popupBehavior", "extensionIcon"]);
+    var getting = browser.storage.local.get(["popupBehavior", "iframeButton", "extensionIcon"]);
     getting.then(setCurrentChoice, onError);
 }
 
@@ -45,5 +48,6 @@ setTimeout(() => {
 
 document.addEventListener("DOMContentLoaded", restoreOptions);
 document.querySelector("#popupBehavior").addEventListener("change", saveOptions);
+document.querySelector("#iframeButton").addEventListener("change", saveOptions);
 document.querySelector("#colorIcon").addEventListener("click", saveOptions);
 document.querySelector("#monoIcon").addEventListener("click", saveOptions);