Leverage the typesystem.

Author: nedtwigg

browser-extension/src/entrypoints/background.ts

@@ -1,5 +1,11 @@
 import type { CommentDraft, CommentEvent, CommentSpot } from '../lib/enhancer'
 import { JsonMap } from '../lib/jsonmap'
+import type { GetOpenSpotsResponse, ToBackgroundMessage } from '../lib/messages'
+import {
+  isContentToBackgroundMessage,
+  isGetOpenSpotsMessage,
+  isSwitchToTabMessage,
+} from '../lib/messages'
 
 export interface Tab {
   tabId: number
@@ -46,30 +52,38 @@ export function handleCommentEvent(message: CommentEvent, sender: any): void {
   }
 }
 
-export function handlePopupMessage(message: any, _sender: any, sendResponse: (response: any) => void): void {
-  if (message.type === 'GET_OPEN_SPOTS') {
+export function handlePopupMessage(
+  message: any,
+  _sender: any,
+  sendResponse: (response: any) => void,
+): void {
+  if (isGetOpenSpotsMessage(message)) {
     const spots: CommentState[] = []
     for (const [, commentState] of openSpots) {
       spots.push(commentState)
     }
-    sendResponse({ spots })
-  } else if (message.type === 'SWITCH_TO_TAB') {
-    browser.windows.update(message.windowId, { focused: true }).then(() => {
-      return browser.tabs.update(message.tabId, { active: true })
-    }).catch(error => {
-      console.error('Error switching to tab:', error)
-    })
+    const response: GetOpenSpotsResponse = { spots }
+    sendResponse(response)
+  } else if (isSwitchToTabMessage(message)) {
+    browser.windows
+      .update(message.windowId, { focused: true })
+      .then(() => {
+        return browser.tabs.update(message.tabId, { active: true })
+      })
+      .catch((error) => {
+        console.error('Error switching to tab:', error)
+      })
   }
 }
 
 export default defineBackground(() => {
-  browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
-    if (message.type === 'GET_OPEN_SPOTS' || message.type === 'SWITCH_TO_TAB') {
-      handlePopupMessage(message, sender, sendResponse)
-      return true
-    } else {
+  browser.runtime.onMessage.addListener((message: ToBackgroundMessage, sender, sendResponse) => {
+    if (isContentToBackgroundMessage(message)) {
       handleCommentEvent(message, sender)
       return false
+    } else {
+      handlePopupMessage(message, sender, sendResponse)
+      return true
     }
   })
 })

browser-extension/src/entrypoints/popup/main.ts

@@ -1,11 +1,16 @@
 import './style.css'
-import type { CommentState } from '../background'
-import { EnhancerRegistry } from '../../lib/registries'
 import { logger } from '../../lib/logger'
+import type {
+  GetOpenSpotsMessage,
+  GetOpenSpotsResponse,
+  SwitchToTabMessage,
+} from '../../lib/messages'
+import { EnhancerRegistry } from '../../lib/registries'
+import type { CommentState } from '../background'
 
 // Test basic DOM access
 try {
-  const app = document.getElementById('app')!!
+  const app = document.getElementById('app')!
   logger.debug('Found app element:', app)
   app.innerHTML = '<div>Script is running...</div>'
 } catch (error) {
@@ -17,7 +22,8 @@ const enhancers = new EnhancerRegistry()
 async function getOpenSpots(): Promise<CommentState[]> {
   logger.debug('Sending message to background script...')
   try {
-    const response = await browser.runtime.sendMessage({ type: 'GET_OPEN_SPOTS' })
+    const message: GetOpenSpotsMessage = { type: 'GET_OPEN_SPOTS' }
+    const response = (await browser.runtime.sendMessage(message)) as GetOpenSpotsResponse
     logger.debug('Received response:', response)
     return response.spots || []
   } catch (error) {
@@ -29,11 +35,12 @@ async function getOpenSpots(): Promise<CommentState[]> {
 function switchToTab(tabId: number, windowId: number): void {
   // Send message to background script to handle tab switching
   // This avoids the popup context being destroyed before completion
-  browser.runtime.sendMessage({
-    type: 'SWITCH_TO_TAB',
+  const message: SwitchToTabMessage = {
     tabId,
-    windowId
-  })
+    type: 'SWITCH_TO_TAB',
+    windowId,
+  }
+  browser.runtime.sendMessage(message)
   window.close()
 }
 
@@ -76,14 +83,14 @@ async function renderOpenSpots(): Promise<void> {
   const list = document.createElement('div')
   list.className = 'spots-list'
 
-  spots.forEach(spot => {
+  spots.forEach((spot) => {
     list.appendChild(createSpotElement(spot))
   })
 
   app.appendChild(list)
 }
 
-renderOpenSpots().catch(error => {
+renderOpenSpots().catch((error) => {
   logger.error('Error in renderOpenSpots:', error)
   const app = document.getElementById('app')!
   app.innerHTML = `<div class="no-spots">Error loading spots: ${error.message}</div>`

browser-extension/src/lib/messages.ts

@@ -0,0 +1,76 @@
+import type { CommentDraft, CommentEvent, CommentSpot } from './enhancer'
+
+// Content -> Background messages (already well-typed as CommentEvent)
+export type ContentToBackgroundMessage = CommentEvent
+
+// Popup -> Background messages
+export interface GetOpenSpotsMessage {
+  type: 'GET_OPEN_SPOTS'
+}
+
+export interface SwitchToTabMessage {
+  type: 'SWITCH_TO_TAB'
+  tabId: number
+  windowId: number
+}
+
+export type PopupToBackgroundMessage = GetOpenSpotsMessage | SwitchToTabMessage
+
+// All messages sent to background
+export type ToBackgroundMessage = ContentToBackgroundMessage | PopupToBackgroundMessage
+
+// Background -> Popup responses
+export interface GetOpenSpotsResponse {
+  spots: Array<{
+    tab: {
+      tabId: number
+      windowId: number
+    }
+    spot: CommentSpot
+    drafts: Array<[number, CommentDraft]>
+  }>
+}
+
+// Type guard functions
+export function isContentToBackgroundMessage(message: any): message is ContentToBackgroundMessage {
+  return (
+    message &&
+    typeof message.type === 'string' &&
+    (message.type === 'ENHANCED' || message.type === 'DESTROYED') &&
+    message.spot
+  )
+}
+
+export function isPopupToBackgroundMessage(message: any): message is PopupToBackgroundMessage {
+  return (
+    message &&
+    typeof message.type === 'string' &&
+    (message.type === 'GET_OPEN_SPOTS' || message.type === 'SWITCH_TO_TAB')
+  )
+}
+
+export function isGetOpenSpotsMessage(message: any): message is GetOpenSpotsMessage {
+  return message && message.type === 'GET_OPEN_SPOTS'
+}
+
+export function isSwitchToTabMessage(message: any): message is SwitchToTabMessage {
+  return (
+    message &&
+    message.type === 'SWITCH_TO_TAB' &&
+    typeof message.tabId === 'number' &&
+    typeof message.windowId === 'number'
+  )
+}
+
+// Message handler types
+export type BackgroundMessageHandler = (
+  message: ToBackgroundMessage,
+  sender: any,
+  sendResponse: (response?: any) => void,
+) => boolean | undefined
+
+export type PopupMessageSender = {
+  sendMessage<T extends PopupToBackgroundMessage>(
+    message: T,
+  ): Promise<T extends GetOpenSpotsMessage ? GetOpenSpotsResponse : void>
+}