From 11eb8db11583a2965f8891bbf841fdf84bf0b31e Mon Sep 17 00:00:00 2001
From: "muhammadhefzey@gmail.com" <muhammadhefzey@gmail.com>
Date: Thu, 7 May 2026 14:36:29 +0300
Subject: [PATCH 1/6] feat: add keyboard navigation (up/down arrows, enter &
 space)

---
 index.html       |  4 ++--
 js/index.js      | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 styles/index.css | 17 +++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4abdd20..afbf569 100644
--- a/index.html
+++ b/index.html
@@ -94,7 +94,7 @@ <h1 data-sbind="visible: listedItems.any">Extensions &amp; Apps</h1>
 
 <script type="text/html" id="item-template">
 	<!-- ko if: !isApp() -->
-	<li class="extension" data-sbind="click: $parent.toggleExtension, css:{disabled: disabled}"><img width="16px" height="16px" data-sbind="attr:{src:icon}" />
+	<li class="extension" data-sbind="click: $parent.toggleExtension, css:{disabled: disabled, selected: $index() === $root.selectedIndex()}"><img width="16px" height="16px" data-sbind="attr:{src:icon}" />
 		<span data-sbind="text: short_name"></span>
 		<i class="fa fa-flask" title="Development" alt="Development" data-sbind="visible: is_development"></i>
 		<i class="fa fa-gear" title="Options" alt="Options" data-sbind="visible: $parent.opts.showOptions() && optionsUrl() && !disabled(), click: $parent.launchOptions, clickBubble: false"></i>
@@ -102,7 +102,7 @@ <h1 data-sbind="visible: listedItems.any">Extensions &amp; Apps</h1>
 	</li>
 	<!-- /ko -->
 	<!-- ko if: isApp() -->
-	<li class="app" data-sbind="click: $parent.launchApp">
+	<li class="app" data-sbind="click: $parent.launchApp, css:{selected: $index() === $root.selectedIndex()}">
 		<img width="16px" height="16px" data-sbind="attr:{src:icon}"/> <span data-sbind="text: short_name"></span>
 		<i class="fa fa-flask" title="Development" alt="Development" data-sbind="visible: is_development"></i>
 		<i class="fa fa-gear" title="Options" alt="Options" data-sbind="visible: $parent.opts.showOptions() && optionsUrl() && !disabled(), click: $parent.launchOptions, clickBubble: false"></i>
diff --git a/js/index.js b/js/index.js
index 15a4a84..ee8d102 100644
--- a/js/index.js
+++ b/js/index.js
@@ -58,6 +58,7 @@ document.addEventListener("DOMContentLoaded", function() {
     self.switch = new SwitchViewModel(self.exts, self.profiles, self.opts);
     self.search = new SearchViewModel();
     self.activeProfile = ko.observable().extend({persistable: "activeProfile"});
+    self.selectedIndex = ko.observable(0);
 
     var filterFn = function(i) {
       // Filtering function for search box
@@ -168,12 +169,58 @@ document.addEventListener("DOMContentLoaded", function() {
       return (self.dismissals.dismissed("profile_page_viewed") || self.profiles.any());
     });
 
+    // Keyboard navigation
+    self.handleKeydown = function(vm, event) {
+      var key = event.key;
+      var currentList = self.listedItems();
+      
+      if (key === 'ArrowDown') {
+        event.preventDefault();
+        var nextIndex = self.selectedIndex() + 1;
+        if (nextIndex < currentList.length) {
+          self.selectedIndex(nextIndex);
+        }
+      } else if (key === 'ArrowUp') {
+        event.preventDefault();
+        var prevIndex = self.selectedIndex() - 1;
+        if (prevIndex >= 0) {
+          self.selectedIndex(prevIndex);
+        }
+      } else if (key === ' ') {
+        event.preventDefault();
+        var selectedItem = currentList[self.selectedIndex()];
+        if (selectedItem && !selectedItem.isApp()) {
+          self.toggleExtension(selectedItem);
+        }
+      } else if (key === 'Enter') {
+        event.preventDefault();
+        var selectedItem = currentList[self.selectedIndex()];
+        if (selectedItem) {
+          if (selectedItem.isApp()) {
+            self.launchApp(selectedItem);
+          } else if (selectedItem.optionsUrl()) {
+            self.launchOptions(selectedItem);
+          }
+        }
+      }
+    };
+
+    // Reset selectedIndex when search changes
+    self.search.q.subscribe(function() {
+      self.selectedIndex(0);
+    });
+
   };
 
   _.defer(function() {
     vm = new ExtensityViewModel();
     ko.bindingProvider.instance = new ko.secureBindingsProvider({});
     ko.applyBindings(vm, document.body);
+    
+    // Attach keyboard event listener
+    document.addEventListener('keydown', function(e) {
+      vm.handleKeydown(vm, e);
+    });
   });
 
   // Workaround for Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=307912
diff --git a/styles/index.css b/styles/index.css
index fd8dc1d..6db01ed 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -258,6 +258,23 @@ section#content li.disabled img {
 	opacity: 0.3;
 }
 
+/** Selected Status (Keyboard Navigation) */
+@media (prefers-color-scheme: dark) {
+	section#content ul li.selected {
+		background-color: #555;
+		border-radius: 2px;
+		box-shadow: 0px 0px 15px rgba(0,0,0,.2) inset;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	section#content ul li.selected {
+		background-color: #d0d0d0;
+		border-radius: 2px;
+		box-shadow: 0px 0px 15px rgba(0,0,0,.2) inset;
+	}
+}
+
 section#content li i.fa-gear {
 	float: right;
 	margin-top: 2px;

From 423370413a4bd017bbbd38d2a67aba5ff85145f7 Mon Sep 17 00:00:00 2001
From: "muhammadhefzey@gmail.com" <muhammadhefzey@gmail.com>
Date: Thu, 7 May 2026 14:50:31 +0300
Subject: [PATCH 2/6] feat: add scrollToSelected function

---
 js/index.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/js/index.js b/js/index.js
index ee8d102..7e238a7 100644
--- a/js/index.js
+++ b/js/index.js
@@ -169,6 +169,31 @@ document.addEventListener("DOMContentLoaded", function() {
       return (self.dismissals.dismissed("profile_page_viewed") || self.profiles.any());
     });
 
+    // Helper to scroll selected item into view
+    var scrollToSelected = function(direction) {
+      var liElements = document.querySelectorAll('section#content ul li');
+      if (liElements.length > 0) {
+        var selectedIndex = 0;
+        var currentList = self.listedItems();
+        
+        for (var i = 0; i < self.selectedIndex(); i++) {
+          if (i < currentList.length) {
+            selectedIndex++;
+          }
+        }
+        
+        if (selectedIndex < liElements.length) {
+          var scrollTargetIndex;
+          if (direction === 'down') {
+            scrollTargetIndex = Math.min(selectedIndex + 2, liElements.length - 1);
+          } else {
+            scrollTargetIndex = Math.max(selectedIndex - 2, 0);
+          }
+          liElements[scrollTargetIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        }
+      }
+    };
+
     // Keyboard navigation
     self.handleKeydown = function(vm, event) {
       var key = event.key;
@@ -179,12 +204,14 @@ document.addEventListener("DOMContentLoaded", function() {
         var nextIndex = self.selectedIndex() + 1;
         if (nextIndex < currentList.length) {
           self.selectedIndex(nextIndex);
+          scrollToSelected('down');
         }
       } else if (key === 'ArrowUp') {
         event.preventDefault();
         var prevIndex = self.selectedIndex() - 1;
         if (prevIndex >= 0) {
           self.selectedIndex(prevIndex);
+          scrollToSelected('up');
         }
       } else if (key === ' ') {
         event.preventDefault();

From 7769eab15901382ef50ff6037222df1762a51d3c Mon Sep 17 00:00:00 2001
From: "muhammadhefzey@gmail.com" <muhammadhefzey@gmail.com>
Date: Thu, 7 May 2026 15:03:54 +0300
Subject: [PATCH 3/6] feat: scroll header into view when navigating to top of
 extension list

---
 js/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/index.js b/js/index.js
index 7e238a7..b94dbac 100644
--- a/js/index.js
+++ b/js/index.js
@@ -189,7 +189,11 @@ document.addEventListener("DOMContentLoaded", function() {
           } else {
             scrollTargetIndex = Math.max(selectedIndex - 2, 0);
           }
-          liElements[scrollTargetIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+          if (selectedIndex >= 1) {
+            liElements[scrollTargetIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+          } else {
+            document.querySelector('#header').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
         }
       }
     };

From 794ead53b6f22b58159947be170631a661fb0a04 Mon Sep 17 00:00:00 2001
From: "muhammadhefzey@gmail.com" <muhammadhefzey@gmail.com>
Date: Thu, 7 May 2026 15:11:53 +0300
Subject: [PATCH 4/6] update README.md

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 193e1f8..f4c0f8d 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,12 @@ Website: [https://sergiokas.github.io/Extensity/](https://sergiokas.github.io/Ex
 
 Follow us in Twitter: [@ExtensityChrome](https://twitter.com/ExtensityChrome)
 
+## Keyboard Shortcuts
+
+- **↑/↓ Arrow Keys** - Navigate through extensions
+- **Enter** - Open options page for the selected extension
+- **Space** - Toggle enable/disable for the selected extension
+
 ### What's new:
 
 v1.14.0 (Sep 2024)

From 9c23b60eef215433b80256046e3a72629a33b7bb Mon Sep 17 00:00:00 2001
From: "muhammadhefzey@gmail.com" <muhammadhefzey@gmail.com>
Date: Thu, 7 May 2026 18:04:58 +0300
Subject: [PATCH 5/6] fix: only activate keyboard shortcuts after arrow key
 navigation

---
 js/index.js | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/js/index.js b/js/index.js
index b94dbac..7975581 100644
--- a/js/index.js
+++ b/js/index.js
@@ -58,7 +58,7 @@ document.addEventListener("DOMContentLoaded", function() {
     self.switch = new SwitchViewModel(self.exts, self.profiles, self.opts);
     self.search = new SearchViewModel();
     self.activeProfile = ko.observable().extend({persistable: "activeProfile"});
-    self.selectedIndex = ko.observable(0);
+    self.selectedIndex = ko.observable(null);
 
     var filterFn = function(i) {
       // Filtering function for search box
@@ -202,35 +202,40 @@ document.addEventListener("DOMContentLoaded", function() {
     self.handleKeydown = function(vm, event) {
       var key = event.key;
       var currentList = self.listedItems();
+      var selectedIdx = self.selectedIndex();
       
       if (key === 'ArrowDown') {
         event.preventDefault();
-        var nextIndex = self.selectedIndex() + 1;
+        var nextIndex = (selectedIdx === null) ? 0 : selectedIdx + 1;
         if (nextIndex < currentList.length) {
           self.selectedIndex(nextIndex);
           scrollToSelected('down');
         }
       } else if (key === 'ArrowUp') {
         event.preventDefault();
-        var prevIndex = self.selectedIndex() - 1;
+        var prevIndex = (selectedIdx === null) ? currentList.length - 1 : selectedIdx - 1;
         if (prevIndex >= 0) {
           self.selectedIndex(prevIndex);
           scrollToSelected('up');
         }
       } else if (key === ' ') {
-        event.preventDefault();
-        var selectedItem = currentList[self.selectedIndex()];
-        if (selectedItem && !selectedItem.isApp()) {
-          self.toggleExtension(selectedItem);
+        if (selectedIdx !== null) {
+          event.preventDefault();
+          var selectedItem = currentList[selectedIdx];
+          if (selectedItem && !selectedItem.isApp()) {
+            self.toggleExtension(selectedItem);
+          }
         }
       } else if (key === 'Enter') {
-        event.preventDefault();
-        var selectedItem = currentList[self.selectedIndex()];
-        if (selectedItem) {
-          if (selectedItem.isApp()) {
-            self.launchApp(selectedItem);
-          } else if (selectedItem.optionsUrl()) {
-            self.launchOptions(selectedItem);
+        if (selectedIdx !== null) {
+          event.preventDefault();
+          var selectedItem = currentList[selectedIdx];
+          if (selectedItem) {
+            if (selectedItem.isApp()) {
+              self.launchApp(selectedItem);
+            } else if (selectedItem.optionsUrl()) {
+              self.launchOptions(selectedItem);
+            }
           }
         }
       }
@@ -238,7 +243,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Reset selectedIndex when search changes
     self.search.q.subscribe(function() {
-      self.selectedIndex(0);
+      self.selectedIndex(null);
     });
 
   };

From 38142fab4144d27f47028450760641052287d65c Mon Sep 17 00:00:00 2001
From: Muhammad Hefzey <75130655+Muhammad95959@users.noreply.github.com>
Date: Thu, 7 May 2026 18:11:09 +0300
Subject: [PATCH 6/6] fix: only activate keyboard shortcuts after arrow key
 navigation