Merge pull request #6 from MStankiewiczOfficial/development

1.0.2 (25011)

.github/workflows/release.yml

@@ -0,0 +1,72 @@
+name: Build, Sign and Publish
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Install dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y zip jq
+        npm install -g web-ext
+
+    - name: Extract data from manifest.json
+      id: extract-data
+      run: |
+        NAME=$(jq -r '.name' src/Gecko/manifest.json | tr ' ' '_')
+        VERSION=$(jq -r '.version' src/manifest.json)
+        ID=$(jq -r '.browser_specific_settings.gecko.id' src/manifest.json)
+        echo "EXT_NAME=${NAME}" >> $GITHUB_ENV
+        echo "EXT_VERSION=${VERSION}" >> $GITHUB_ENV
+        echo "EXT_ID=${ID}" >> $GITHUB_ENV
+
+    - name: Prepare artifacts directory
+      run: |
+        mkdir -p artifacts/unsigned
+        mkdir -p artifacts/signed
+
+    - name: Generate tag and release name
+      id: generate-tag
+      run: |
+        YEAR=$(date +'%y')
+        MONTH=$(date +'%m')
+        RELEASE_COUNT=$(curl -s \
+          -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
+          https://api.github.com/repos/${{ github.repository }}/releases \
+          | jq "[.[] | select(.tag_name | startswith(\"${YEAR}${MONTH}\"))] | length + 1")
+        TAG="${YEAR}${MONTH}$(printf "%02d" ${RELEASE_COUNT})"
+        RELEASE_NAME="${EXT_VERSION} (${TAG})"
+        echo "RELEASE_TAG=${TAG}" >> $GITHUB_ENV
+        echo "RELEASE_NAME=${RELEASE_NAME}" >> $GITHUB_ENV
+
+    - name: Build unsigned XPI
+      run: |
+        web-ext build -s src --artifacts-dir ./artifacts
+        mv ./artifacts/*.zip ./artifacts/${EXT_NAME}-${EXT_VERSION}-gecko-unsigned.zip
+
+    - name: Convert ZIP to XPI
+      run: |
+        mv ./artifacts/${EXT_NAME}-${EXT_VERSION}-gecko-unsigned.zip ./artifacts/unsigned/${EXT_NAME}-${EXT_VERSION}-gecko-unsigned.xpi
+
+    - name: Sign XPI
+      env:
+        WEB_EXT_API_KEY: ${{ secrets.AMO_API_KEY }}
+        WEB_EXT_API_SECRET: ${{ secrets.AMO_API_SECRET }}
+      run: |
+        web-ext sign --channel=listed --api-key=$WEB_EXT_API_KEY --api-secret=$WEB_EXT_API_SECRET --artifacts-dir ./artifacts/signed --source-dir src/Gecko
+        mv ./artifacts/signed/*.xpi ./artifacts/signed/${EXT_NAME}-${EXT_VERSION}-gecko-signed.xpi
+
+    - name: Create GitHub Release
+      env:
+        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        gh release create ${{ env.RELEASE_TAG }} ./artifacts/unsigned/${{ env.EXT_NAME }}-${{ env.EXT_VERSION }}-gecko-unsigned.xpi ./artifacts/signed/${{ env.EXT_NAME }}-${{ env.EXT_VERSION }}-gecko-signed.xpi -t '${{ env.RELEASE_NAME }}' -F ./release-notes.md

README.md

@@ -15,7 +15,7 @@ RedirectTube is a browser extension that redirects YouTube links to FreeTube. It
 
 You can install RedirectTube from the Firefox Add-ons.
 
-[![Download](https://img.shields.io/badge/Download-%23000000.svg?style=for-the-badge&logo=firefox&logoColor=#FF7139)](https://addons.mozilla.org/pl/firefox/addon/redirecttube/)
+[![Get the Add-on](https://extensionworkshop.com/assets/img/documentation/publish/get-the-addon-178x60px.dad84b42.png)](https://addons.mozilla.org/pl/firefox/addon/redirecttube/)
 
 ### Method 2: Manual installation
 
@@ -26,7 +26,7 @@ This method works only for Firefox ESR and Firefox Developer Edition.
 
 1. Go to `about:config` in your browser.
 2. Set `xpinstall.signatures.required` to `false`.
-3. Download the latest release of RedirectTube from the [releases page](https://github.com/MStankiewiczOfficial/RedirectTube/releases/). If you see an alert about installing add-ons from untrusted sources, click "Continue installation" and don't do next steps.
+3. Download the latest release of RedirectTube from the [releases page](https://github.com/MStankiewiczOfficial/RedirectTube/releases/). If you see an alert about installing add-ons from untrusted sources, click "Continue installation" and don’t proceed with the next steps.
 4. Open the downloaded file in Firefox.
 5. Click "Add" to install the extension.
    And that's it! RedirectTube is now installed in your browser.

release-notes.md

@@ -0,0 +1,16 @@
+# 1.0.2 (25011)
+
+## Release Notes
+
+- Added popup menu to the toolbar button (#1)
+- Added options page.
+
+---
+
+> [!NOTE]
+> Changed the repository structure. Content of the `src` folder is now in `src/Gecko`.
+
+---
+
+> [!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/).

src/Gecko/colors.css

@@ -0,0 +1,14 @@
+:root {
+    --popup-background: #fff;
+    --popup-color: #000;
+    --popup-accent: #00308a;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    :root {
+        --popup-background: #000;
+        --popup-color: #fff;
+        --popup-accent: rgb(66, 142, 255);
+    }
+
+}

src/manifest.json → src/Gecko/manifest.json

@@ -2,7 +2,7 @@
     "name": "RedirectTube",
     "description": "Open YouTube links in FreeTube",
     "author": "Michał Stankiewicz",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "manifest_version": 3,
     "icons": {
         "16": "img/icns/normal/16.png",
@@ -26,6 +26,9 @@
     "action": {
         "default_popup": "popup.html"
     },
+    "options_ui": {
+        "page": "options.html"
+    },
     "host_permissions": [
         "http://*/*",
         "https://*/*"

src/Gecko/options.css

@@ -0,0 +1,33 @@
+@import url('colors.css');
+
+body {
+    background-color: var(--popup-background);
+    color: var(--popup-color);
+    font-family: sans-serif;
+    padding: 0px;
+    margin: 32px;
+}
+
+h1 {
+    font-size: 1.5em;
+    margin: 0;
+}
+
+h2 {
+    font-size: 1.2em;
+}
+
+a {
+    color: var(--popup-accent);
+}
+
+#errorText {
+    color: red;
+    font-size: 1em;
+    text-align: center;
+    padding: 0.5em;
+}
+
+footer p {
+    font-size: 0.8em;
+}

src/Gecko/options.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>RedirectTube</title>
+        <link rel="stylesheet" href="options.css">
+    </head>
+</head>
+<body>
+    <div id="title">
+        <h1>RedirectTube</h1>
+    </div>
+    <div id="content">
+        <h2>Settings</h2>
+        <label for="popupBehavior">When clicking the extension icon:</label>
+        <select name="popupBehavior" id="popupBehavior">
+            <option value="showPopup">Show menu</option>
+            <option value="redirect">Redirect to FreeTube</option>
+        </select>
+    </div>
+    <br>
+    <footer>
+        <p>Created with 🩷 by <a href="https://www.stankiewiczm.eu" target="_blank">Michał Stankiewicz</a></p>
+        <p>If you like this extension, consider <a href="https://ko-fi.com/mstankiewicz" target="_blank">buying me a tea</a> 🍵</p>
+    </footer>
+    <script src="options.js"></script>
+</body>
+</html>

src/Gecko/options.js

@@ -0,0 +1,25 @@
+var popupBehavior = "showPopup";
+
+function saveOptions(e) {
+    e.preventDefault();
+    browser.storage.local.set({
+        popupBehavior: document.getElementById("popupBehavior").value
+    });
+}
+
+function restoreOptions() {
+    function setCurrentChoice(result) {
+        document.getElementById("popupBehavior").value = result.popupBehavior || popupBehavior;
+    }
+
+    function onError(error) {
+        console.log(`Error: ${error}`);
+    }
+
+    var getting = browser.storage.local.get("popupBehavior");
+    getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+
+document.querySelector("#popupBehavior").addEventListener("change", saveOptions);

src/Gecko/popup.css

@@ -0,0 +1,72 @@
+@import url('colors.css');
+
+body {
+    background-color: var(--popup-background);
+    color: var(--popup-color);
+    font-family: sans-serif;
+    width: 300px;
+    padding: 0px;
+    margin: 0;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+#title {
+    width: 100%;
+    padding: 0;
+    text-align: center;
+    background-color: #7979793f;
+}
+
+h1 {
+    font-size: 1.5em;
+    margin: 0;
+    padding: 0.5em;
+}
+
+#content {
+    padding: 0;
+}
+
+#content button {
+    width: 100%;
+    padding: 0.5em;
+    margin: 0;
+    border: #79797979 solid 1px;
+    background-color: #79797979;
+    color: var(--popup-color);
+    font-size: 1em;
+}
+
+#content button:hover {
+    background-color: #797979b9;
+}
+
+#content button:disabled {
+    background-color: #79797979;
+    color: #79797979;
+    cursor: not-allowed;
+}
+
+a {
+    color: var(--popup-accent);
+}
+
+#errorText {
+    color: red;
+    font-size: 1em;
+    text-align: center;
+    padding: 0.5em;
+}
+
+footer {
+    text-align: center;
+    padding: 0;
+}
+
+footer p {
+    font-size: 0.8em;
+    margin: 0;
+    padding: 0.5em;
+}

src/Gecko/popup.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RedirectTube</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div id="title">
+        <h1>RedirectTube</h1>
+    </div>
+    <div id="content">
+        <button id="redirectButton">Open this site in FreeTube</button>
+        <button id="settingsButton">Settings</button>
+    </div>
+    <p id="errorText"></p>
+    <footer>
+        <p>Created with 🩷 by <a href="https://www.stankiewiczm.eu" target="_blank">Michał Stankiewicz</a></p>
+    </footer>
+    <script src="popup.js"></script>
+</body>
+</html>

src/Gecko/popup.js

@@ -0,0 +1,43 @@
+var errorText = document.getElementById("errorText");
+var redirectButton = document.getElementById("redirectButton");
+var settingsButton = document.getElementById("settingsButton");
+
+document.addEventListener('DOMContentLoaded', function() {
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+        var url = tabs[0].url;
+        if (url.startsWith("https://www.youtube.com/watch?v=")) {
+            loadOptions(url, tabs);
+        } else {
+            errorText.innerHTML = "Cannot open this page in FreeTube.";
+            redirectButton.disabled = true;
+        }
+    });
+});
+
+function loadOptions(url, tabs) {
+    browser.storage.local.get('popupBehavior').then(function(result) {
+        if (result.popupBehavior === "redirect") {
+            openInFreeTube(url, tabs);
+        }
+    });
+}
+function openInFreeTube(url, tabs) {
+    var freeTubeUrl = "freetube://" + url;
+    chrome.tabs.update(tabs[0].id, { url: freeTubeUrl });
+    window.close();
+}
+
+redirectButton.addEventListener('click', function() {
+    if (redirectButton.disabled === false) {
+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            var url = tabs[0].url;
+            openInFreeTube(url, tabs);
+        });
+    }
+});
+
+settingsButton.addEventListener('click', function() {
+    if (settingsButton.disabled === false) {
+        chrome.runtime.openOptionsPage();
+    }
+});