Show changelog setting

Author: Stigmatoz

src/_locales/de/messages.json

@@ -289,10 +289,14 @@
   "close": {
     "message": "Schließen"
   },
-  "useExtension": {
+  "useExtension": { 
     "message": "Verwenden Sie die Erweiterung"
   },
   "next": {
     "message": "Weiter"
+  },
+  "showChangelog": {
+    "message": "Änderungsliste anzeigen",
+    "description": "Zeigen Sie die Liste der Änderungen nach dem Aktualisieren der Erweiterung an"
   }
 }

src/_locales/en/messages.json

@@ -294,5 +294,9 @@
   },
   "next": {
     "message": "Next"
+  },
+  "showChangelog": {
+    "message": "Show changelog",
+    "description": "Show the list of changes after updating extension"
   }
 }

src/_locales/ru/messages.json

@@ -294,5 +294,9 @@
   },
   "next": {
     "message": "Продолжить"
+  },
+  "showChangelog": {
+    "message": "Показывать список изменений",
+    "description": "Показывать список изменений после обновления расширения"
   }
 }

src/background.ts

@@ -13,12 +13,6 @@ self.onerror = err => {
   console.error('Unhandled error:', err);
 };
 
-Browser.runtime.onInstalled.addListener(async details => {
-  logger.log('Extension installed:', details);
-  const settingsStorage = injecStorage();
-  await settingsStorage.saveValue(StorageParams.INSTALL_DATE, todayLocalDate());
-});
-
 Browser.storage.onChanged.addListener((changes, namespace) => {
   for (var key in changes) {
     if (Object.values(StorageParams).includes(key as StorageParams))
@@ -30,12 +24,26 @@ Browser.runtime.setUninstallURL('https://webtracker.online/goodbye.html');
 
 Browser.runtime.onInstalled.addListener(async details => {
   if (details.reason == 'install') {
+    logger.log('Extension installed:', details);
+    const settingsStorage = injecStorage();
+    await settingsStorage.saveValue(StorageParams.INSTALL_DATE, todayLocalDate());
+
     const initialPageUrl = Browser.runtime.getURL('src/welcome.html');
     await Browser.tabs.create({
       url: initialPageUrl,
       active: true,
     });
   }
+  if (details.reason == 'update') {
+    const showChangelog = (await Settings.getInstance().getSetting(
+      StorageParams.SHOW_CHANGELOG,
+    )) as boolean;
+    if (showChangelog)
+      await Browser.tabs.create({
+        url: 'https://webtracker.online/releasenotes.html',
+        active: true,
+      });
+  }
 });
 
 Browser.runtime.onStartup.addListener(() => {

src/components/GeneralSettings.vue

@@ -99,6 +99,21 @@
     />
     <input type="button" class="ml-10" :value="t('restore.message')" @click="restore()" />
   </div>
+  <div class="settings-item">
+    <label class="setting-header">
+      <input
+        type="checkbox"
+        class="filled-in"
+        id="showChangelog"
+        v-model="showChangelog"
+        @change="onChange(StorageParams.SHOW_CHANGELOG, $event.target)"
+      />
+      <span>{{ t('showChangelog.message') }}</span>
+      <p class="description">
+        {{ t('showChangelog.description') }}
+      </p>
+    </label>
+  </div>
   <div id="removeAllConfirmModal" class="modal" v-if="needToConfirmDeleteAllData">
     <div class="modal-content">
       <p class="text-center">{{ t('removeAllDataConfirm.message') }}</p>
@@ -133,6 +148,7 @@ import {
   StorageParams,
   VIEW_TIME_IN_BADGE_DEFAULT,
   InactivityInterval,
+  SHOW_CHANGELOG_DEFAULT,
 } from '../storage/storage-params';
 import { ranges, ThisWeekRange, todayLocalDate } from '../utils/date';
 import { useImportToCsv } from '../compositions/toCsv';
@@ -155,6 +171,7 @@ const selectedDate = ref<Date[]>();
 const presetRanges = ranges();
 
 const needToConfirmDeleteAllData = ref<boolean>();
+const showChangelog = ref<boolean>();
 
 const restoreFile = ref<any>();
 
@@ -173,6 +190,10 @@ onMounted(async () => {
     BLOCK_DEFERRAL_DEFAULT,
   );
   selectedDate.value = ThisWeekRange;
+  showChangelog.value = await settingsStorage.getValue(
+    StorageParams.SHOW_CHANGELOG,
+    SHOW_CHANGELOG_DEFAULT,
+  );
 });
 
 async function onChange(storageParam: StorageParams, target: any) {

src/storage/storage-params.ts

@@ -10,6 +10,7 @@ export enum StorageParams {
   INTERVAL_INACTIVITY = 'inactivity_interval',
   DARK_MODE = 'night_mode',
   VIEW_TIME_IN_BADGE = 'view_time_in_badge',
+  SHOW_CHANGELOG = 'show_changelog',
   BLOCK_DEFERRAL = 'view_block_deferral',
   BLOCK_DEFERRAL_TIME = 'view_block_deferral_time',
   DAILY_SUMMARY_NOTIFICATION_TIME = 'daily-summary-notification-time',
@@ -58,6 +59,7 @@ export const SHOW_HINT_DEFAULT = true;
 // default time is 20:00, time in seconds
 export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = (20 * HOUR) / 1000;
 export const DAILY_NOTIFICATION_DEFAULT = true;
+export const SHOW_CHANGELOG_DEFAULT = false;
 
 export function getDefaultValue(param: StorageParams) {
   switch (param) {
@@ -83,5 +85,7 @@ export function getDefaultValue(param: StorageParams) {
       return DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT;
     case StorageParams.DAILY_NOTIFICATION:
       return DAILY_NOTIFICATION_DEFAULT;
+    case StorageParams.SHOW_CHANGELOG:
+      return SHOW_CHANGELOG_DEFAULT;
   }
 }