fix: error handling in content scripts

src/chrome/background/background.ts

@@ -128,7 +128,9 @@ chrome.notifications.onClicked.addListener(handleNotificationClick)
 chrome.notifications.onButtonClicked.addListener(handleNotificationClick)
 chrome.storage.onChanged.addListener(handleStorageChange)
 chrome.action.onClicked.addListener(openParingPopup)
+
 chrome.runtime.onInstalled.addListener(handleOnInstallExtension)
+chrome.management.onEnabled.addListener(handleOnInstallExtension)
 
 createOffscreen()
 

src/chrome/content-script/content-script.ts

@@ -3,7 +3,7 @@ import { ContentScriptMessageHandler } from './message-handler'
 import { createMessage } from '../messages/create-message'
 import { MessageClient } from '../messages/message-client'
 import { ConfirmationMessageError, Message } from '../messages/_types'
-import { errAsync, okAsync, ResultAsync } from 'neverthrow'
+import { err, errAsync, okAsync, ResultAsync } from 'neverthrow'
 import { logger } from 'utils/logger'
 import { MessageLifeCycleEvent } from 'chrome/dapp/_types'
 import { sendMessage } from 'chrome/helpers/send-message'
@@ -56,58 +56,56 @@ const messageHandler = MessageClient(
   { logger: appLogger },
 )
 
-const handleWalletInteraction = async (
-  walletInteraction: WalletInteraction,
-) => {
+const handleWalletInteraction = (walletInteraction: WalletInteraction) =>
   sendMessage(createMessage.dAppRequest('contentScript', walletInteraction))
-}
 
-const handleExtensionInteraction = async (
+const handleExtensionInteraction = (
   extensionInteraction: ExtensionInteraction,
 ) => {
   switch (extensionInteraction.discriminator) {
     case 'openPopup':
-      await sendMessage(createMessage.openParingPopup())
-      break
+      return sendMessage(createMessage.openParingPopup())
 
     case 'extensionStatus':
-      await hasConnections().map((hasConnections) => {
-        sendMessageToDapp(createMessage.extensionStatus(hasConnections))
-      })
-      break
+      return hasConnections().map((hasConnections) =>
+        sendMessageToDapp(createMessage.extensionStatus(hasConnections)),
+      )
 
     case 'cancelWalletInteraction':
-      sendMessage(
+      return sendMessage(
         createMessage.cancelWalletInteraction(
           addOriginToCancelInteraction(extensionInteraction),
         ),
       )
-      break
 
     case 'walletInteraction':
-      sendMessage(
+      return sendMessage(
         createMessage.walletInteraction({
           ...extensionInteraction,
           interaction: addOriginToWalletInteraction(
             extensionInteraction.interaction,
           ),
         }),
       )
-      break
 
     default:
-      logger.error({
+      return err({
         reason: 'InvalidExtensionRequest',
         interaction: extensionInteraction,
       })
-      break
   }
 }
 
 // incoming messages from dApps
 chromeDAppClient.messageListener(
-  handleWalletInteraction,
-  handleExtensionInteraction,
+  (p) =>
+    handleWalletInteraction(p).mapErr((e) => {
+      appLogger.error('handleWalletInteraction', e)
+    }),
+  (p) =>
+    handleExtensionInteraction(p).mapErr((e) => {
+      appLogger.error('handleExtensionInteraction', e)
+    }),
 )
 
 // incoming messages from extension

src/chrome/helpers/send-message.ts

@@ -3,6 +3,8 @@ import { ResultAsync } from 'neverthrow'
 
 export const sendMessage = (message: Message) =>
   ResultAsync.fromPromise(
-    chrome.runtime.sendMessage(message),
+    chrome.runtime.id
+      ? chrome.runtime.sendMessage(message)
+      : Promise.reject({ reason: 'NoChromeRuntimeId' }),
     (error) => error as Error,
   )

src/utils/logger.ts

@@ -11,5 +11,9 @@ export const logger = new Logger({
 })
 
 logger.attachTransport((logObj) => {
-  sendMessage(createMessage.log(logObj))
+  try {
+    sendMessage(createMessage.log(logObj))
+  } catch (error) {
+    console.error('Error sending log message', error)
+  }
 })

vite.config.ts

@@ -25,6 +25,7 @@ const manifest = defineManifest(async () => {
     'scripting',
     'notifications',
     'contextMenus',
+    'management',
     'idle',
   ]
   const matches = ['https://*/*', 'http://localhost/*', 'http://127.0.0.1/*']