dstein64 / highlight

A browser extension for automatically highlighting the important content on article pages.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

dstein64 opened this issue · comments

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.

998602a 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>.