dstein64 / highlight

A browser extension for automatically highlighting the important content on article pages.
MIT License
54 stars 13 forks source link

Options page doesn't support browser back/forward navigation and deep linking #11

Closed dstein64 closed 2 years ago

dstein64 commented 2 years ago

This is only relevant when navigating to blocklist items or exceptions.

The following doesn't address the issue, since it wouldn't handle deep linking. Also, navigating to e.g., blocklist items, then clicking the options page back button, then navigating to blocklist exceptions, then clicking the browser back button twice would incorrectly navigate to blocklist exceptions, not blocklist items.

diff --git a/src/options/options.js b/src/options/options.js
index 0be3329..5d554a7 100644
--- a/src/options/options.js
+++ b/src/options/options.js
@@ -64,9 +64,14 @@ const showView = function(view) {
         }
     }
     document.body.scrollTop = 0;
+    window.location.hash = '#' + view;
 };

-showView('main-view');
+showView(window.location.hash.startsWith('#') ? window.location.hash.slice(1) : 'main-view');
+
+window.onhashchange = function() {
+    showView(window.location.hash.slice(1));
+};

 /***********************************
  * Permissions
@@ -195,7 +200,7 @@ const populateBlocklistTable = function(opts) {
         autonomousBlocklistNewSelect.value = 'hostname';
         autonomousBlocklistNewInput.value = '';
         handleSelectionChange();
-        showView('blocklist-view');
+        window.location.hash = '#blocklist-view';
     };

     autonomousBlocklistItemsButton.addEventListener('click', function() {
@@ -207,7 +212,7 @@ const populateBlocklistTable = function(opts) {
     });

     autonomousBlocklistBack.addEventListener('click', function() {
-        showView('main-view');
+        window.location.hash = '#main-view';
     });

     // Handler for blocklist addition.
dstein64 commented 2 years ago

998602acc38b6a7b36d06419713a47c419a59926 adds support for browser back/forward navigation on the options page.

Deep linking support is not added, but not deemed useful in this context.

The back/forward navigation works because the options page currently opens in a new tab (options_ui.open_in_tab is set to true in manifest.json). When the options page is not opened in a new tab (either by setting options_ui.open_in_tab to false in manifest.json or navigating to e.g., chrome://extensions/?options=<ID>), forward/back navigation does not work. This is not a limitation of the history API, but rather a limitation of the options page being hosted in a dialog—the same navigation limitation occurs when browsing through multiple options pages that are linked with <a>.