Feat: upper option list or sorting list disappears #3154

js&css/extension/functions.js

@@ -6,4 +6,46 @@
 extension.functions.getUrlParameter = function (url, parameter) {
 	var match = url.match(new RegExp('(\\?|\\&)' + parameter + '=[^&]+'));
 	if (match) {return match[0].substr(3);}
-};
+};
+
+/*--------------------------------------------------------------
+# REFRESH YOUTUBE CATEGORIES 
+--------------------------------------------------------------*/
+if (!window.improvedTubeRefreshCategoriesAdded && typeof chrome !== 'undefined' && chrome.runtime) {
+    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+        if (request.action === 'refresh-youtube-categories') {
+            let chipContainer = document.querySelector('ytd-feed-filter-chip-bar-renderer');
+
+            if (chipContainer) {
+                chipContainer.style.display = '';
+                chipContainer.style.visibility = 'visible';
+                chipContainer.style.opacity = '1';
+                chipContainer.hidden = false;
+
+                let parent = chipContainer.parentElement;
+                while (parent && parent !== document.body) {
+                    parent.style.display = '';
+                    parent.style.visibility = 'visible';
+                    parent = parent.parentElement;
+                }
+
+                const allChips = chipContainer.querySelectorAll('yt-chip-cloud-chip-renderer button');
+                if (allChips.length > 1) {
+                    allChips[1].click();
+                    setTimeout(function() {
+                        allChips[0].click();
+                    }, 200);
+                }
+
+                sendResponse({ success: true });
+            } else {
+                window.location.reload();
+                sendResponse({ success: true });
+            }
+
+            return true;
+        }
+    });
+
+    window.improvedTubeRefreshCategoriesAdded = true;
+}

manifest.json

@@ -59,7 +59,7 @@
   ],
   "host_permissions": ["https://www.youtube.com/*"],
   "optional_permissions": ["downloads"],
-  "permissions": ["contextMenus", "storage"],
+  "permissions": ["contextMenus", "storage" , "tabs"],
   "web_accessible_resources": [
     {
       "resources": [

menu/index.html

@@ -19,6 +19,7 @@
 <script src="skeleton-parts/blocklist.js"></script>
 <script src="skeleton-parts/analyzer.js"></script>
 <script src="skeleton-parts/dark-light-switch.js"></script>
+<script src="skeleton-parts/refresh-categories.js"></script>
 <script defer src="index.js"></script>
 <link rel="stylesheet" href="satus.css">
 <link rel="stylesheet" href="styles/home.css">

menu/satus.css

@@ -15,11 +15,9 @@ div:not([home-style="list"]) .satus-button--themes, div:not([home-style="list"])
 	margin-left: -5px !important;
 	margin-right: -28px !important;
 }
-div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer {
+div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer, div:not([home-style="list"]) .satus-button--refresh-categories {
 	transform: scale(0.78);
 	margin-top: -22px !important;
-	margin-left: 110px !important;
-	margin-right: -150px !important;
 }
 
 div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-button--playlist,div[home-style="list"]  .satus-button--channel, div[home-style="list"] .satus-button--shortcuts {
@@ -29,7 +27,7 @@ div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-butt
 	max-width: 197px !important;
 	margin-top:2px !important;
 }
-div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer {
+div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer , div[home-style="list"] .satus-button--refresh-categories {
 	transform: scale(0.75);
 	margin-left: 165px !important;
 	max-width: 141px !important;

menu/sidepanel.html

@@ -20,6 +20,7 @@
 <script src="skeleton-parts/blocklist.js"></script>
 <script src="skeleton-parts/analyzer.js"></script>
 <script src="skeleton-parts/dark-light-switch.js"></script>
+<script src="skeleton-parts/refresh-categories.js"></script>
 <script defer src="index.js"></script>
 <link rel="stylesheet" href="satus.css">
 <link rel="stylesheet" href="styles/home.css">

menu/skeleton-parts/refresh-categories.js

@@ -0,0 +1,57 @@
+/*--------------------------------------------------------------
+>>> REFRESH CATEGORIES
+--------------------------------------------------------------*/
+
+extension.skeleton.main.layers.section.refreshCategories = {
+    component: 'button',
+    variant: 'refresh-categories',
+    category: true,
+    on: {
+        click: function() {
+            if (typeof chrome !== 'undefined' && chrome.tabs) {
+                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+                    if (tabs[0] && tabs[0].url && tabs[0].url.includes('youtube.com')) {
+                        chrome.tabs.sendMessage(tabs[0].id, {
+                            action: 'refresh-youtube-categories'
+                        });
+                    }
+                });
+            }
+        }
+    },
+    icon: {
+        component: 'span',
+        svg: {
+            component: 'svg',
+            attr: {
+                'viewBox': '0 0 24 24',
+                'fill': 'none',
+                'stroke': 'currentColor',
+                'stroke-linecap': 'round',
+                'stroke-width': '1.75'
+            },
+            path1: {
+                component: 'path',
+                attr: {
+                    'd': 'M1 4v6h6'
+                }
+            },
+            path2: {
+                component: 'path',
+                attr: {
+                    'd': 'M23 20v-6h-6'
+                }
+            },
+            path3: {
+                component: 'path',
+                attr: {
+                    'd': 'M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'
+                }
+            }
+        }
+    },
+    label: {
+        component: 'span',
+        text: 'Categories'
+    }
+};