feat(safeMode): add chrome notification

Author: SugarF0x

extension/services/consts.ts

@@ -0,0 +1 @@
+export const ORIGIN = "https://web.simple-mmo.com"

extension/services/notifications/index.ts

@@ -1,2 +1,3 @@
 import "./bosses"
 import "./job"
+import "./safeMode"

extension/services/notifications/job/service.ts

@@ -1,11 +1,12 @@
 import { isServiceNotification } from "../utils"
 import { JobNotificationData, isJobNotification } from "./types"
+import { ORIGIN } from "~/consts"
 
 type SanitizedJobData = Omit<JobNotificationData, "timestamp">
 
 function serializeJobData(job: JobNotificationData) {
-  const { href, iconUrl } = job
-  return JSON.stringify(["job", { href, iconUrl } as SanitizedJobData])
+  const { iconUrl } = job
+  return JSON.stringify(["job", { iconUrl } as SanitizedJobData])
 }
 
 function deserializeJobData(data: string) {
@@ -45,10 +46,10 @@ chrome.alarms.onAlarm.addListener(({ name: id }) => {
 })
 
 chrome.notifications.onClicked.addListener((id) => {
-  const [notification, { href }] = deserializeJobData(id)
+  const [notification] = deserializeJobData(id)
   if (notification !== "job") return
 
-  chrome.tabs.create({ url: href })
+  chrome.tabs.create({ url: ORIGIN })
   chrome.notifications.clear(id)
 
   return true

extension/services/notifications/job/types.ts

@@ -1,7 +1,6 @@
 import { NotificationServiceMessage } from "../utils"
 
 export interface JobNotificationData {
-  href: string
   timestamp: number
   iconUrl: string
 }

extension/services/notifications/safeMode/client.ts

@@ -0,0 +1,10 @@
+import { SafeModeNotification } from "./types"
+
+export function sendSafeModeNotificationMessage(timestamp: string, toggle: boolean) {
+  chrome.runtime.sendMessage<SafeModeNotification>({
+    toggle,
+    data: { timestamp },
+    variant: "safeMode",
+    type: "notification",
+  })
+}

extension/services/notifications/safeMode/index.ts

@@ -0,0 +1 @@
+import "./service"

extension/services/notifications/safeMode/service.ts

@@ -0,0 +1,53 @@
+import { isServiceNotification } from "../utils"
+import { SafeModeNotificationData, isSafeModeNotification } from "./types"
+import { ORIGIN } from "~/consts"
+
+function serializeSafeModeData() {
+  return JSON.stringify(["safeMode"])
+}
+
+function deserializeSafeModeData(data: string) {
+  return JSON.parse(data) as [string]
+}
+
+function createSafeModeNotification(safeMode: SafeModeNotificationData) {
+  chrome.alarms.create(serializeSafeModeData(), { when: new Date(safeMode.timestamp).valueOf() })
+}
+
+function clearSafeModeNotification() {
+  chrome.alarms.clear(serializeSafeModeData())
+}
+
+chrome.runtime.onMessage.addListener((payload) => {
+  if (!isServiceNotification(payload)) return
+  if (!isSafeModeNotification(payload)) return
+
+  if (payload.toggle) createSafeModeNotification(payload.data)
+  else clearSafeModeNotification()
+
+  return true
+})
+
+chrome.alarms.onAlarm.addListener(({ name: id }) => {
+  const [notification] = deserializeSafeModeData(id)
+  if (notification !== "safeMode") return
+
+  chrome.notifications.create(id, {
+    type: "basic",
+    message: "Reactivate your safe mode now!",
+    title: "Safe mode expired",
+    iconUrl: ORIGIN + "/img/icons/E_Gold01.png",
+  })
+
+  return true
+})
+
+chrome.notifications.onClicked.addListener((id) => {
+  const [notification] = deserializeSafeModeData(id)
+  if (notification !== "safeMode") return
+
+  chrome.tabs.create({ url: ORIGIN + "/safemode" })
+  chrome.notifications.clear(id)
+
+  return true
+})

extension/services/notifications/safeMode/types.ts

@@ -0,0 +1,15 @@
+import { NotificationServiceMessage } from "../utils"
+
+export interface SafeModeNotificationData {
+  timestamp: string
+}
+
+export interface SafeModeNotification extends NotificationServiceMessage {
+  variant: "safeMode"
+  toggle: boolean
+  data: SafeModeNotificationData
+}
+
+export function isSafeModeNotification(val: NotificationServiceMessage): val is SafeModeNotification {
+  return val.variant === "safeMode"
+}

src/views/Jobs/Job/Notification.vue

@@ -32,7 +32,6 @@ watchEffect(() => {
     {
       iconUrl: getNotificationIconUrl(),
       timestamp: getTimestamp(),
-      href: window.location.origin,
     },
     shouldNotifyOnCompletion.value
   )

src/views/Notification/Items/SafeMode.vue

@@ -5,9 +5,12 @@ import { Button } from "@/components"
 import { useSafeModeStore } from "@/views/Settings/SafeMode/store"
 import { storeToRefs } from "pinia"
 import { addHours } from "date-fns"
+import { computed } from "vue"
 
 const safeModeStore = useSafeModeStore()
-const { shouldShowSafeModeNotification, expirationTimestamp } = storeToRefs(safeModeStore)
+const { shouldRemindSafeMode, isSafeModeExpired, expirationTimestamp } = storeToRefs(safeModeStore)
+
+const shouldShowSafeModeNotification = computed(() => shouldRemindSafeMode.value && isSafeModeExpired.value)
 </script>
 
 <template>

src/views/Settings/SafeMode/SafeMode.vue

@@ -2,29 +2,36 @@
 import { Controls, Checkbox } from "@/components"
 import { useSafeModeStore } from "./store"
 import { storeToRefs } from "pinia"
-import { onBeforeMount } from "vue"
+import { onBeforeMount, watchEffect } from "vue"
 import { Duration, add } from "date-fns"
+import { sendSafeModeNotificationMessage } from "~/notifications/safeMode/client"
 
-const { shouldRemindSafeMode, shouldDisplayRemainingTimeInHeader, expirationTimestamp } = storeToRefs(
-  useSafeModeStore()
-)
+const { shouldRemindSafeMode, shouldDisplayRemainingTimeInHeader, shouldUseChromeNotifications, expirationTimestamp } =
+  storeToRefs(useSafeModeStore())
 
-onBeforeMount(() => {
+function getRemainingDuration() {
   const timeDiv = document.querySelector<HTMLDivElement>("main .bg-white.mt-4 div.text-sm.text-gray-500")
-  if (!timeDiv) {
-    expirationTimestamp.value = new Date().toISOString()
-    return
-  }
+  if (!timeDiv) return {}
 
   const remainingTimeString = timeDiv.innerText.replace("Expires in ", "")
-  const remainingDuration = remainingTimeString
+  return remainingTimeString
     .split(/(,|and)/)
     .map((e) => e.trim().split(" "))
     .map((e): [number, keyof Duration] => [Number(e[0]), e[1] as keyof Duration])
     .reduce<Duration>((acc, [val, key]) => ({ ...acc, [key]: val }), {})
+}
+
+const remainingDuration = getRemainingDuration()
 
+onBeforeMount(() => {
   expirationTimestamp.value = add(new Date(), remainingDuration).toISOString()
 })
+
+watchEffect(() => {
+  if (!Object.keys(remainingDuration).length) return
+
+  sendSafeModeNotificationMessage(add(new Date(), remainingDuration).toISOString(), shouldUseChromeNotifications.value)
+})
 </script>
 
 <template>
@@ -33,6 +40,11 @@ onBeforeMount(() => {
       <template #default> Remind to enable safe mode </template>
       <template #subtitle> A safe mode a day keeps the doctor away </template>
     </Checkbox>
+    <Checkbox v-model="shouldUseChromeNotifications" :parent="shouldRemindSafeMode">
+      <template #default> Show chrome notification </template>
+      <template #subtitle> Be on point even outside simple mmo page </template>
+      <template #requires> Requires reminder enabled </template>
+    </Checkbox>
     <Checkbox v-model="shouldDisplayRemainingTimeInHeader" :parent="shouldRemindSafeMode">
       <template #default> Display remaining time in header </template>
       <template #subtitle> Know when the time to reenable is coming </template>

src/views/Settings/SafeMode/store.ts

@@ -7,19 +7,18 @@ export const useSafeModeStore = defineStore(
   () => {
     const shouldRemindSafeMode = ref(false)
     const shouldDisplayRemainingTimeInHeader = ref(false)
+    const shouldUseChromeNotifications = ref(false)
 
     const expirationTimestamp = ref(new Date().toISOString())
 
     const isSafeModeExpired = computed(() => isAfter(new Date(), new Date(expirationTimestamp.value)))
 
-    const shouldShowSafeModeNotification = computed(() => shouldRemindSafeMode.value && isSafeModeExpired.value)
-
     return {
       shouldRemindSafeMode,
       shouldDisplayRemainingTimeInHeader,
+      shouldUseChromeNotifications,
       expirationTimestamp,
       isSafeModeExpired,
-      shouldShowSafeModeNotification,
     }
   },
   {