Add setting to disable auto-changelog and manual view button (#231)

* Add setting to disable auto-changelog and manual view button (#230)

Users reported the extension forcefully opening a changelog tab on every
update, interrupting active tasks. This adds a toggle to disable the
automatic changelog and a button to view it manually from settings.

- First install always shows changelog regardless of setting
- Default is ON to preserve existing behavior for current users
- Fallback to opening changelog if storage read fails (safe default)

* Fix computed property access for LAST_SHOWN_CHANGELOG_KEY and sync test defaults

Use bracket notation [LAST_SHOWN_CHANGELOG_KEY] so the constant's value
("changelog.lastShown") is used as the storage key, not the literal
identifier. Also add missing settings to tests/setup.js DEFAULT_SETTINGS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: OsaSoft

common.js

@@ -17,6 +17,7 @@ const DEFAULT_SETTINGS = {
     "settings.hide.lives": false,
     "settings.hide.members.only": false,
     "settings.hide.mark.watched.button": false,
+    "settings.changelog.auto.open": true,
 };
 
 const SETTINGS_KEY = "settings";

pages/background.js

@@ -21,16 +21,35 @@ brwsr.runtime.onMessage.addListener(function (message) {
     }
 });
 
-brwsr.runtime.onInstalled.addListener(() => {
-    brwsr.storage.local.get({LAST_SHOWN_CHANGELOG_KEY}, showChangelog);
+brwsr.runtime.onInstalled.addListener((details) => {
+    brwsr.storage.local.get({[LAST_SHOWN_CHANGELOG_KEY]: null}, (data) => {
+        showChangelog(data, details);
+    });
 });
 
-function showChangelog(data) {
-    let lastShownChangelog = data.LAST_SHOWN_CHANGELOG_KEY;
-    if (currentVersion !== lastShownChangelog) {
-        brwsr.tabs.create({
-            url: "pages/changelog.html"
-        });
-        brwsr.storage.local.set({LAST_SHOWN_CHANGELOG_KEY: currentVersion});
+function showChangelog(data, details) {
+    let lastShownChangelog = data[LAST_SHOWN_CHANGELOG_KEY];
+    if (currentVersion === lastShownChangelog) {
+        return;
     }
+
+    // Always update the last shown version, even if we don't open the tab
+    brwsr.storage.local.set({[LAST_SHOWN_CHANGELOG_KEY]: currentVersion});
+
+    // Always show changelog on first install
+    if (details && details.reason === "install") {
+        brwsr.tabs.create({ url: "pages/changelog.html" });
+        return;
+    }
+
+    // On update, check the user's setting
+    brwsr.storage.sync.get("settings", (result) => {
+        let autoOpen = true; // default: open changelog
+        if (result && result.settings && typeof result.settings["settings.changelog.auto.open"] === "boolean") {
+            autoOpen = result.settings["settings.changelog.auto.open"];
+        }
+        if (autoOpen) {
+            brwsr.tabs.create({ url: "pages/changelog.html" });
+        }
+    });
 }

pages/settings/settings.html

@@ -272,6 +272,25 @@ <h2 class="settings-card__title">General</h2>
                         </label>
                     </div>
 
+                    <div class="setting-item">
+                        <div class="setting-info">
+                            <span class="setting-title" id="setting-changelog-auto-open-title">Show changelog on update</span>
+                            <span class="setting-description" id="setting-changelog-auto-open-desc">Automatically open the changelog page when the extension is updated</span>
+                        </div>
+                        <label class="toggle">
+                            <input type="checkbox" id="settings.changelog.auto.open" aria-labelledby="setting-changelog-auto-open-title" aria-describedby="setting-changelog-auto-open-desc">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+
+                    <div class="data-action">
+                        <div class="data-action__info">
+                            <span class="data-action__title">View changelog</span>
+                            <span class="data-action__description">Open the changelog page to see what's new</span>
+                        </div>
+                        <button id="view-changelog" class="btn btn-secondary">View Changelog</button>
+                    </div>
+
                     <div class="setting-item">
                         <div class="setting-info">
                             <span class="setting-title">Log level</span>

pages/settings/settings.js

@@ -86,6 +86,9 @@ function setupButtons() {
     document.getElementById("force-sync").addEventListener("click", forceSyncAll);
     document.getElementById("force-pull").addEventListener("click", forcePullFromSync);
     document.getElementById("clear-oldest").addEventListener("click", clearOldestVideosHandler);
+    document.getElementById("view-changelog").addEventListener("click", () => {
+        brwsr.tabs.create({ url: "../changelog.html" });
+    });
 
     // Modal event listeners
     document.getElementById("modal-cancel").addEventListener("click", hideConfirmModal);

tests/setup.js

@@ -22,6 +22,8 @@ const DEFAULT_SETTINGS = {
     "settings.hide.shorts": false,
     "settings.hide.lives": false,
     "settings.hide.members.only": false,
+    "settings.hide.mark.watched.button": false,
+    "settings.changelog.auto.open": true,
 };
 
 // Constants matching the codebase