Show notifications for websites

Author: Stigmatoz

src/components/Notifications.vue

@@ -34,6 +34,23 @@
       </p>
       <ListWithTimeComponent :type="ListWithTime.Notifications" />
     </div>
+    <div class="settings-item">
+      <label class="setting-header">Notification message</label>
+      <p class="description">You will see this message in notification for websites every time</p>
+      <input
+        type="text"
+        class=""
+        placeholder="Enter notification message name..."
+        v-model="notificationMessage"
+      />
+      <input
+        type="button"
+        class="d-inline-block small-btn ml-10 width"
+        value="Save"
+        :disabled="notificationMessage == ''"
+        @click="saveNotificationMessage()"
+      />
+    </div>
   </div>
 </template>
 
@@ -46,7 +63,7 @@ export default {
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { injecStorage } from '../storage/inject-storage';
-import { StorageParams } from '../storage/storage-params';
+import { NOTIFICATION_MESSAGE_DEFAULT, StorageParams } from '../storage/storage-params';
 import {
   DAILY_NOTIFICATION_DEFAULT,
   DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT,
@@ -62,13 +79,19 @@ const settingsStorage = injecStorage();
 const showDailyNotifacation = ref<boolean>();
 const dailyNotificationTime = ref<number>();
 const notificationTime = ref<Time>();
+const notificationMessage = ref<string>();
 
 onMounted(async () => {
   showDailyNotifacation.value = await settingsStorage.getValue(
     StorageParams.DAILY_NOTIFICATION,
     DAILY_NOTIFICATION_DEFAULT,
   );
 
+  notificationMessage.value = await settingsStorage.getValue(
+    StorageParams.NOTIFICATION_MESSAGE,
+    NOTIFICATION_MESSAGE_DEFAULT,
+  );
+
   dailyNotificationTime.value = (await settingsStorage.getValue(
     StorageParams.DAILY_SUMMARY_NOTIFICATION_TIME,
     DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT,
@@ -78,6 +101,10 @@ onMounted(async () => {
   notificationTime.value = timeObj;
 });
 
+async function saveNotificationMessage() {
+  save(StorageParams.NOTIFICATION_MESSAGE, notificationMessage.value);
+}
+
 async function handleDate(modelData: Time) {
   if (modelData != null) {
     notificationTime.value = modelData;
@@ -103,4 +130,7 @@ async function save(storageParam: StorageParams, value: any) {
   width: 120px;
   margin: 0 15px;
 }
+.width {
+  width: 540px;
+}
 </style>

src/compositions/limit-list.ts

@@ -24,6 +24,7 @@ export async function isLimitExceeded(url: string, tab: Tab): Promise<LimitExcee
       if (date.summary >= item.time) {
         log(`Limit Exceeded: website ${url} limit ${item.time} summary time ${date.summary}`);
         if (await isInDeferList(url)) {
+          log(`Page ${url} is in deffering list`);
           return {
             IsLimitExceeded: false,
             LimitTime: null,

src/compositions/notification-list.ts

@@ -0,0 +1,40 @@
+import { Notifications } from '../entity/notification';
+import { Tab } from '../entity/tab';
+import { StorageParams } from '../storage/storage-params';
+import { isDomainEquals } from '../utils/common';
+import { todayLocalDate } from '../utils/date';
+import { log } from './logger';
+import { Settings } from './settings';
+
+export type LimitExceed = {
+  IsLimitExceeded: boolean;
+  LimitTime: number | null;
+};
+
+export async function isNeedToShowNotification(url: string, tab: Tab): Promise<boolean> {
+  const notificationList = (await Settings.getInstance().getSetting(
+    StorageParams.NOTIFICATION_LIST,
+  )) as Notifications[];
+  const array = Object.values(notificationList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  if (item != undefined) {
+    const date = tab.days.find(x => x.date == todayLocalDate());
+    if (date != undefined) {
+      if (date.summary == item.time || date.summary % item.time == 0) {
+        log(`Time for notification: website ${url} time ${item.time} summary time ${date.summary}`);
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export async function isDomainInNotificationsLimit(url: string): Promise<boolean> {
+  const notificationList = (await Settings.getInstance().getSetting(
+    StorageParams.NOTIFICATION_LIST,
+  )) as Notifications[];
+  const array = Object.values(notificationList);
+  const item = array?.find(x => isDomainEquals(x.domain, url));
+  return item != undefined;
+}

src/compositions/show-notification.ts

@@ -0,0 +1,21 @@
+import Browser from 'webextension-polyfill';
+
+export enum NotificationType {
+  DailySummaryNotification = 'daily-summary-notification',
+  WebSiteNotification = 'website-notification',
+}
+
+export async function showNotification(
+  notificationType: NotificationType,
+  title: string,
+  message: string,
+): Promise<void> {
+  await Browser.notifications.clear(notificationType);
+  await Browser.notifications.create(notificationType, {
+    type: 'basic',
+    title: title,
+    message: message,
+    iconUrl: Browser.runtime.getURL('128x128.png'),
+    isClickable: false,
+  });
+}

src/jobs/daily-summary-notification.ts

@@ -1,10 +1,8 @@
-import Browser from 'webextension-polyfill';
 import { useWebUsageSummaryForDay } from '../compositions/summary-data-today';
 import { convertLimitTimeToString } from '../utils/converter';
 import { Settings } from '../compositions/settings';
 import { StorageParams } from '../storage/storage-params';
-
-const NOTIFICATION_ID = 'daily-summary-notification';
+import { NotificationType, showNotification } from '../compositions/show-notification';
 
 export async function dailySummaryNotification() {
   const showDailyNotifacation = (await Settings.getInstance().getSetting(
@@ -20,17 +18,6 @@ export async function dailySummaryNotification() {
       data.mostVisitedSite
     } most visited website ${convertLimitTimeToString(data.mostVisitedSiteTime)}`;
 
-    await showNotification(title, message);
+    await showNotification(NotificationType.DailySummaryNotification, title, message);
   }
 }
-
-async function showNotification(title: string, message: string) {
-  await Browser.notifications.clear(NOTIFICATION_ID);
-  await Browser.notifications.create(NOTIFICATION_ID, {
-    type: 'basic',
-    title: title,
-    message: message,
-    iconUrl: Browser.runtime.getURL('128x128.png'),
-    isClickable: false,
-  });
-}

src/tracker.ts

@@ -14,6 +14,8 @@ import { Tab } from './entity/tab';
 import { useBlockPage } from './compositions/block-page';
 import { convertSummaryTimeToBadgeString } from './utils/converter';
 import { Settings } from './compositions/settings';
+import { isNeedToShowNotification } from './compositions/notification-list';
+import { NotificationType, showNotification } from './compositions/show-notification';
 
 const activeTabInstance = ActiveTab.getInstance();
 
@@ -102,6 +104,14 @@ async function mainTracker(
     if (tab.favicon == '' && activeTab.favIconUrl != undefined)
       tab.setFavicon(activeTab.favIconUrl);
 
+    if (await isNeedToShowNotification(activeDomain, tab)) {
+      const message = (await Settings.getInstance().getSetting(
+        StorageParams.NOTIFICATION_MESSAGE,
+      )) as string;
+      const title = `${activeDomain} notification`;
+      await showNotification(NotificationType.WebSiteNotification, title, message);
+    }
+
     tab.incSummaryTime();
 
     const viewInBadge = await Settings.getInstance().getSetting(StorageParams.VIEW_TIME_IN_BADGE);