extension: Add a button to reset settings

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

@@ -41,6 +41,12 @@
     "settings_advanced_options": {
         "message": "Advanced Options"
     },
+    "settings_reset": {
+        "message": "Reset settings"
+    },
+    "settings_reset_confirm": {
+        "message": "Are you sure you want to restore Ruffle settings to their original defaults?"
+    },
     "status_init": {
         "message": "Reading current tab…"
     },

web/packages/extension/assets/css/options.css

@@ -12,6 +12,10 @@ details > .options {
     padding-top: 10px;
 }
 
+details > .options.special {
+    padding-top: 30px;
+}
+
 details > summary {
     cursor: pointer;
 }

web/packages/extension/assets/options.html

@@ -74,6 +74,9 @@
                         <label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
                     </div>
                 </div>
+                <div class="options special">
+                    <button id="reset_settings">Reset settings</button>
+                </div>
             </details>
         </div>
         <script src="dist/options.js"></script>

web/packages/extension/src/common.ts

@@ -197,3 +197,7 @@ export async function bindOptions(
         onChange(options);
     }
 }
+
+export async function resetOptions(): Promise<void> {
+    utils.storage.sync.clear();
+}

web/packages/extension/src/options.ts

@@ -1,9 +1,21 @@
 import * as utils from "./utils";
-import { bindOptions } from "./common";
+import { bindOptions, resetOptions } from "./common";
 
 window.addEventListener("DOMContentLoaded", () => {
     document.title = utils.i18n.getMessage("settings_page");
-    document.getElementById("advanced_options")!.textContent =
-        utils.i18n.getMessage("settings_advanced_options");
+    {
+        const ao = document.getElementById("advanced_options")!;
+        ao.textContent = utils.i18n.getMessage("settings_advanced_options");
+    }
+    {
+        const rs = document.getElementById("reset_settings")!;
+        rs.textContent = utils.i18n.getMessage("settings_reset");
+        rs.addEventListener("click", async () => {
+            if (confirm(utils.i18n.getMessage("settings_reset_confirm"))) {
+                await resetOptions();
+                window.location.reload();
+            }
+        });
+    }
     bindOptions();
 });

web/packages/extension/src/utils.ts

@@ -13,6 +13,7 @@ export let i18n: {
 };
 
 interface StorageArea {
+    clear: () => Promise<void>;
     get: (keys?: string[]) => Promise<Record<string, unknown>>;
     remove: (keys: string[]) => Promise<void>;
     set: (items: Record<string, unknown>) => Promise<void>;
@@ -82,6 +83,7 @@ function promisifyStorageArea(
     storage: chrome.storage.StorageArea
 ): StorageArea {
     return {
+        clear: () => promisify((cb) => storage.clear(cb)),
         get: (keys?: string[]) =>
             promisify((cb) => storage.get(keys || null, cb)),
         remove: (keys: string[]) => promisify((cb) => storage.remove(keys, cb)),