Refactor message listener

Author: sheepzh

global.d.ts

@@ -509,6 +509,14 @@ declare namespace timer {
             | 'limitWaking'
             // @since 1.2.3
             | 'limitRemoved'
+            // Request by content script
+            // @since 1.3.0
+            | "cs.isInWhitelist"
+            | "cs.incVisitCount"
+            | "cs.printTodayInfo"
+            | "cs.getTodayInfo"
+            | "cs.moreMinutes"
+            | "cs.getLimitedRules"
         type ResCode = "success" | "fail" | "ignore"
 
         /**
@@ -526,6 +534,10 @@ declare namespace timer {
             msg?: string
             data?: T
         }
+        /**
+         * @since 1.3.0
+         */
+        type Handler<Req, Res> = (data: Req) => Promise<Res>
         /**
          * @since 0.8.4
          */

src/app/components/limit/modify/form/time-limit.ts

@@ -35,7 +35,8 @@ const timeInput = (valRef: Ref<number>, unit: string, maxVal: number) => h(ElCol
             clearable: true,
             onInput: (val: string) => handleInput(val, valRef, maxVal),
             onClear: () => valRef.value = undefined,
-            placeholder: '0'
+            placeholder: '0',
+            class: 'limit-modify-time-limit-input'
         },
         {
             append: () => unit

src/background/content-script-handler.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import TimeLimitItem from "@entity/time-limit-item"
+import limitService from "@service/limit-service"
+import optionService from "@service/option-service"
+import timerService from "@service/timer-service"
+import whitelistService from "@service/whitelist-service"
+import MessageDispatcher from "./message-dispatcher"
+
+/**
+ * Handle request from contentscript
+ * 
+ * @param dispatcher message dispatcher
+ */
+export default function init(dispatcher: MessageDispatcher) {
+    dispatcher
+        // Increase the visit time
+        .register<string, void>('cs.incVisitCount', async host => {
+            timerService.addOneTime(host)
+        })
+        // Judge is in whitelist
+        .register<string, boolean>('cs.isInWhitelist', host => whitelistService.include(host))
+        // Need to print the information of today
+        .register<void, boolean>('cs.printTodayInfo', async () => {
+            const option = await optionService.getAllOption()
+            return !!option.printInConsole
+        })
+        // Get today info
+        .register<string, timer.stat.Result>('cs.getTodayInfo', host => {
+            const now = new Date()
+            return timerService.getResult(host, now)
+        })
+        // More minutes
+        .register<string, timer.limit.Item[]>('cs.moreMinutes', url => limitService.moreMinutes(url))
+        // cs.getLimitedRules
+        .register<string, TimeLimitItem[]>('cs.getLimitedRules', url => limitService.getLimited(url))
+}

src/background/index.ts

@@ -9,26 +9,33 @@ import { openLog } from "../common/logger"
 import WhitelistMenuManager from "./whitelist-menu-manager"
 import BrowserActionMenuManager from "./browser-action-menu-manager"
 import IconAndAliasCollector from "./icon-and-alias-collector"
-import MessageListener from "./message-listener"
 import Timer from "./timer"
 import VersionManager from "./version-manager"
 import ActiveTabListener from "./active-tab-listener"
 import badgeTextManager from "./badge-text-manager"
 import metaService from "@service/meta-service"
 import UninstallListener from "./uninstall-listener"
+import MessageDispatcher from "./message-dispatcher"
+import initLimitProcesser from "./limit-processor"
+import initCsHandler from "./content-script-handler"
 
 // Open the log of console
 openLog()
 
+const messageDispatcher = new MessageDispatcher()
+
+// Limit processor
+initLimitProcesser(messageDispatcher)
+
+// Content-script's request handler
+initCsHandler(messageDispatcher)
+
 // Start the timer
 new Timer().start()
 
 // Collect the icon url and title
 new IconAndAliasCollector().listen()
 
-// Message listener
-new MessageListener().listen()
-
 // Process version
 new VersionManager().init()
 
@@ -52,3 +59,5 @@ chrome.runtime.onInstalled.addListener(async detail => {
     // Questionnaire for uninstall
     new UninstallListener().listen()
 })
+
+messageDispatcher.start()

src/background/limit-processor.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { LIMIT_ROUTE } from "@app/router/constants"
+import TimeLimitItem from "@entity/time-limit-item"
+import { getAppPageUrl } from "@util/constant/url"
+import MessageDispatcher from "./message-dispatcher"
+
+function processLimitWaking(rules: TimeLimitItem[], tab: chrome.tabs.Tab) {
+    const { url } = tab
+    const anyMatch = rules.map(rule => rule.matches(url)).reduce((a, b) => a || b, false)
+    if (!anyMatch) {
+        return
+    }
+    chrome.tabs.sendMessage<timer.mq.Request<timer.limit.Item[]>, timer.mq.Response>(tab.id, {
+        code: "limitWaking",
+        data: rules
+    }, result => {
+        if (result?.code === "fail") {
+            console.error(`Failed to wake with limit rule: rules=${JSON.stringify(rules)}, msg=${result.msg}`)
+        } else if (result?.code === "success") {
+            console.log(`Waked tab[id=${tab.id}]`)
+        }
+    })
+}
+
+export default function init(dispatcher: MessageDispatcher) {
+    dispatcher
+        .register<string, void>(
+            'openLimitPage',
+            async (url: string) => {
+                const pageUrl = getAppPageUrl(true, LIMIT_ROUTE, { url: encodeURI(url) })
+                chrome.tabs.create({ url: pageUrl })
+            }
+        )
+        .register<timer.limit.Item[]>(
+            'limitWaking',
+            async data => {
+                const rules = (data || [])
+                    .map(like => TimeLimitItem.of(like))
+                chrome.tabs.query({ status: "complete" }, tabs => {
+                    tabs.forEach(tab => processLimitWaking(rules, tab))
+                })
+            }
+        )
+}

src/background/message-dispatcher.ts

@@ -0,0 +1,55 @@
+import { log } from "@src/common/logger"
+
+/**
+ * Copyright (c) 2022-present Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+class MessageDispatcher {
+    private handlers: Partial<{
+        [code in timer.mq.ReqCode]: timer.mq.Handler<any, any>
+    }> = {}
+
+    register<Req = any, Res = any>(code: timer.mq.ReqCode, handler: timer.mq.Handler<Req, Res>): MessageDispatcher {
+        if (this.handlers[code]) {
+            throw new Error("Duplicate handler")
+        }
+        this.handlers[code] = handler
+        return this
+    }
+
+    private async handle(message: timer.mq.Request<unknown>): Promise<timer.mq.Response<unknown>> {
+        const code = message?.code
+        if (!code) {
+            return { code: 'ignore' }
+        }
+        const handler = this.handlers[code]
+        if (!handler) {
+            return { code: 'ignore' }
+        }
+        try {
+            const result = await handler(message.data)
+            return { code: 'success', data: result }
+        } catch (error) {
+            return { code: 'fail', msg: error }
+        }
+    }
+
+    start() {
+        // Be careful!!!
+        // Can't use await/async in callback parameter
+        chrome.runtime.onMessage.addListener((message: timer.mq.Request<unknown>, _sender: never, sendResponse: timer.mq.Callback<unknown>) => {
+            log('start to handle message', message.code, message.data)
+            this.handle(message).then(response => {
+                log('the response is', response, message)
+                sendResponse(response)
+            })
+            // 'return ture' will force chrome to wait for the response processed in the above promise.
+            // @see https://github.com/mozilla/webextension-polyfill/issues/130
+            return true
+        })
+    }
+}
+
+export default MessageDispatcher

src/background/message-listener.ts

@@ -5,29 +5,52 @@
  * https://opensource.org/licenses/MIT
  */
 
-import optionService from "@service/option-service"
-import timerService from "@service/timer-service"
-import whitelistService from "@service/whitelist-service"
 import { initLocale } from "@util/i18n"
 import processLimit from "./limit"
 import printInfo from "./printer"
 
 const host = document.location.host
 const url = document.location.href
 
+function isInWhitelist(host: string): Promise<boolean> {
+    const request: timer.mq.Request<string> = {
+        code: 'cs.isInWhitelist',
+        data: host
+    }
+    return new Promise(resolve => chrome.runtime.sendMessage(request, {},
+        (res: timer.mq.Response<boolean>) => resolve(res.code === 'success' && !!res.data)
+    ))
+}
+
+function addOneTime(host: string): void {
+    const request: timer.mq.Request<string> = {
+        code: 'cs.incVisitCount',
+        data: host
+    }
+    chrome.runtime.sendMessage(request, () => { })
+}
+
+function printTodayInfo(): Promise<boolean> {
+    const request: timer.mq.Request<void> = {
+        code: 'cs.printTodayInfo',
+        data: undefined
+    }
+    return new Promise(resolve => chrome.runtime.sendMessage(request,
+        (res: timer.mq.Response<boolean>) => resolve(res.code === 'success' && !!res.data)
+    ))
+}
+
 async function main() {
     if (!host) return
 
-    const isWhitelist = await whitelistService.include(host)
+    const isWhitelist = await isInWhitelist(host)
     if (isWhitelist) return
 
-    timerService.addOneTime(host)
+    addOneTime(host)
 
     await initLocale()
-    const option = await optionService.getAllOption()
-    if (!!option.printInConsole) {
-        printInfo(host)
-    }
+    const needPrintInfo = await printTodayInfo()
+    !!needPrintInfo && printInfo(host)
     processLimit(url)
 }
 

src/content-script/index.ts

@@ -6,9 +6,28 @@
  */
 
 import TimeLimitItem from "@entity/time-limit-item"
-import limitService from "@service/limit-service"
 import { t2Chrome } from "@util/i18n/chrome/t"
 
+function moreMinutes(url: string): Promise<timer.limit.Item[]> {
+    const request: timer.mq.Request<string> = {
+        code: 'cs.moreMinutes',
+        data: url
+    }
+    return new Promise(resolve => chrome.runtime.sendMessage(request,
+        (res: timer.mq.Response<timer.limit.Item[]>) => resolve(res?.code === 'success' ? res.data || [] : [])
+    ))
+}
+
+function getLimited(url: string): Promise<timer.limit.Item[]> {
+    const request: timer.mq.Request<string> = {
+        code: 'cs.getLimitedRules',
+        data: url
+    }
+    return new Promise(resolve => chrome.runtime.sendMessage(request,
+        (res: timer.mq.Response<timer.limit.Item[]>) => resolve(res?.code === 'success' ? res.data || [] : [])
+    ))
+}
+
 class _Modal {
     url: string
     mask: HTMLDivElement
@@ -36,7 +55,7 @@ class _Modal {
             const text = t2Chrome(msg => msg.message.more5Minutes)
             link.innerText = text
             link.onclick = async () => {
-                const delayRules = await limitService.moreMinutes(_thisUrl)
+                const delayRules = await moreMinutes(_thisUrl)
                 const wakingRules = delayRules
                     .map(like => TimeLimitItem.of(like))
                     .filter(rule => !rule.hasLimited())
@@ -165,7 +184,7 @@ function handleLimitRemoved(msg: timer.mq.Request<void>, modal: _Modal): timer.m
 
 export default async function processLimit(url: string) {
     const modal = new _Modal(url)
-    const limitedRules: TimeLimitItem[] = await limitService.getLimited(url)
+    const limitedRules: timer.limit.Item[] = await getLimited(url)
     if (limitedRules?.length) {
         window.onload = () => modal.showModal(!!limitedRules?.filter?.(item => item.allowDelay).length)
     }