Allow opening settings page from settings popup

web/packages/extension/build/_locales/en/messages.json

@@ -37,5 +37,8 @@
     },
     "action_reload": {
         "message": "Reload tab to apply changes"
+    },
+    "open_settings_page": {
+        "message": "Open Settings Page"
     }
 }

web/packages/extension/build/popup.html

@@ -117,6 +117,12 @@
         padding: 10px 10px;
         line-height: 15px;
     }
+    #settingsbutton {
+        background-color: #FFAD33;
+        width: 100%;
+        height: 35px;
+        color: #000;
+    }
     @media (prefers-color-scheme: dark) {
         .RufflePopup-status_band {
             text-align: center;
@@ -130,6 +136,12 @@
             background: #111;
             color: #FFF;
         }
+        .RufflePopup-reload_button {
+            color: #FFF;
+        }
+        #settingsbutton {
+            color: #FFF;
+        }
     }
 </style>
 
@@ -150,6 +162,6 @@
             <div class="RufflePopup-checkbox_slider"></div>
         </label>
     </form>
-
+    <button id="settingsbutton"></button>
     <button type="button" id="reload" class="RufflePopup-reload_button"></button>
 </div>

web/packages/extension/js/popup.js

@@ -198,10 +198,21 @@ async function query_current_tab() {
     }
 }
 
+function open_settings_page() {
+    try {
+        browser.runtime.openOptionsPage();
+    } catch {
+        chrome.tabs.create({'url': "/settings.htm"});
+    }
+}
+
 document.addEventListener("DOMContentLoaded", function () {
+    var settings_button = document.getElementById("settingsbutton");
     bind_boolean_setting(document.getElementById("ruffle_enable"));
     bind_boolean_setting(document.getElementById("ignore_optout"));
     bind_settings_apply_button(document.getElementById("reload"));
+    settings_button.innerHTML = chrome.i18n.getMessage("open_settings_page");
+    settings_button.onclick = open_settings_page;
 
     query_current_tab();
 });