feat: Update icon (#234)

* Tag listener

* Monetization tag

* Add stop & resume

* merge and resolve conflicts

* merge conflicts

* update monetization event payload

* Monetization service progress

* Update monetization event (include frameId as well)

* Remove unused code

* Move message handler in contentScript

* Add contentScript file changes

* Clear payment session on closed tab

* Listen for tab events, resume & pause monetization

* Update icon

* remove logs

* Remove null validation

* Update icon logic

* Update bulk at start

* Fix build error

* Minor code updated

---------

Co-authored-by: Diana Fulga <diana.fulga@breakointit.eu>
Co-authored-by: Ionut Anin <ionutanin@gmail.com>
Co-authored-by: Radu-Cristian Popa <radu.popa@breakpointit.eu>

src/background/lib/messages.ts

@@ -24,3 +24,12 @@ export const sendMonetizationEvent = async ({
     payload
   })
 }
+
+export const emitToggleWM = async (
+  payload: BackgroundToContentActionPayload[BackgroundToContentAction.EMIT_TOGGLE_WM]
+) => {
+  return await message.sendToActiveTab({
+    action: BackgroundToContentAction.EMIT_TOGGLE_WM,
+    payload
+  })
+}

src/background/services/background.ts

@@ -33,7 +33,8 @@ export class Background {
 
   bindTabHandlers() {
     this.browser.tabs.onRemoved.addListener(this.tabEvents.onRemovedTab)
-    this.browser.tabs.onUpdated.addListener(this.tabEvents.onUpdatedTab)
+    this.browser.tabs.onCreated.addListener(this.tabEvents.onCreatedTab)
+    this.browser.tabs.onActivated.addListener(this.tabEvents.onActivatedTab)
   }
 
   bindMessageHandler() {
@@ -55,6 +56,8 @@ export class Background {
 
             case PopupToBackgroundAction.TOGGLE_WM:
               await this.monetizationService.toggleWM()
+
+              this.tabEvents.onUpdatedTab()
               return
 
             case PopupToBackgroundAction.PAY_WEBSITE:
@@ -95,6 +98,13 @@ export class Background {
                 })
               )
 
+            case ContentToBackgroundAction.IS_TAB_MONETIZED:
+              this.tabEvents.onUpdatedTab(message.payload)
+              return
+
+            case ContentToBackgroundAction.IS_WM_ENABLED:
+              return success(await this.storage.getWMState())
+
             default:
               return
           }

src/background/services/monetization.ts

@@ -7,6 +7,7 @@ import {
   StopMonetizationPayload
 } from '@/shared/messages'
 import { PaymentSession } from './paymentSession'
+import { emitToggleWM } from '../lib/messages'
 import { getCurrentActiveTab, getSender, getTabId } from '../utils'
 
 export class MonetizationService {
@@ -100,6 +101,7 @@ export class MonetizationService {
   async toggleWM() {
     const { enabled } = await this.storage.get(['enabled'])
     await this.storage.set({ enabled: !enabled })
+    emitToggleWM({ enabled: !enabled })
   }
 
   clearTabSessions(tabId: number) {

src/background/services/storage.ts

@@ -85,6 +85,12 @@ export class StorageService extends EventEmitter {
     return { ...data, url }
   }
 
+  async getWMState(): Promise<boolean> {
+    const { enabled } = await this.get(['enabled'])
+
+    return enabled
+  }
+
   async keyPairExists(): Promise<boolean> {
     const keys = await this.get(['privateKey', 'publicKey', 'keyId'])
     if (

src/background/services/tabEvents.ts

@@ -1,16 +1,76 @@
+import { type Browser, runtime } from 'webextension-polyfill'
 import { MonetizationService } from './monetization'
+import { StorageService } from './storage'
+import { IsTabMonetizedPayload } from '@/shared/messages'
 
-export class TabEvents {
-  constructor(private monetizationService: MonetizationService) {}
-
-  onRemovedTab = (tabId: number) => {
-    this.monetizationService.clearTabSessions(tabId)
-  }
+const icon34 = runtime.getURL('assets/icons/icon-34.png')
+const icon128 = runtime.getURL('assets/icons/icon-128.png')
+const iconActive34 = runtime.getURL('assets/icons/icon-active-34.png')
+const iconActive128 = runtime.getURL('assets/icons/icon-active-128.png')
+const iconInactive34 = runtime.getURL('assets/icons/icon-inactive-34.png')
+const iconInactive128 = runtime.getURL('assets/icons/icon-inactive-128.png')
+const iconWarning34 = runtime.getURL('assets/icons/icon-warning-34.png')
+const iconWarning128 = runtime.getURL('assets/icons/icon-warning-128.png')
 
+export class TabEvents {
+  constructor(
+    private monetizationService: MonetizationService,
+    private storage: StorageService,
+    private browser: Browser
+  ) {}
   // TODO: This is not ideal. Find a better way to clear the sessions for a specific tab.
   // When closing the tab, we receive the STOP_MONETIZATION message as well.
   // Maybe check if the tab is closed in the content script?
-  onUpdatedTab = (tabId: number) => {
+  onRemovedTab = (tabId: number) => {
     this.monetizationService.clearTabSessions(tabId)
   }
+
+  private changeIcon = async () => {
+    const { enabled } = await this.storage.get(['enabled'])
+
+    const iconData = {
+      '34': enabled ? icon34 : iconWarning34,
+      '128': enabled ? icon128 : iconWarning128
+    }
+
+    if (this.browser.action) {
+      await this.browser.action.setIcon({ path: iconData })
+    } else if (chrome.browserAction) {
+      chrome.browserAction.setIcon({ path: iconData })
+    }
+  }
+
+  onActivatedTab = async () => {
+    await this.changeIcon()
+  }
+
+  onCreatedTab = async () => {
+    await this.changeIcon()
+  }
+
+  onUpdatedTab = async (payload?: IsTabMonetizedPayload) => {
+    const { enabled } = await this.storage.get(['enabled'])
+
+    let iconData = {
+      '34': enabled ? icon34 : iconWarning34,
+      '128': enabled ? icon34 : iconWarning128
+    }
+
+    if (enabled) {
+      if (payload) {
+        const { value } = payload
+
+        iconData = {
+          '34': value ? iconActive34 : iconInactive34,
+          '128': value ? iconActive128 : iconInactive128
+        }
+      }
+    }
+
+    if (this.browser.action) {
+      await this.browser.action.setIcon({ path: iconData })
+    } else if (chrome.browserAction) {
+      chrome.browserAction.setIcon({ path: iconData })
+    }
+  }
 }

src/background/utils.ts

@@ -1,26 +1,8 @@
 import { WalletAmount } from '@/shared/types'
-import { type Browser, action, runtime, Runtime } from 'webextension-polyfill'
+import { type Browser, Runtime } from 'webextension-polyfill'
 import { DEFAULT_SCALE, EXCHANGE_RATES_URL } from './config'
 import { notNullOrUndef } from '@/shared/helpers'
 
-const iconActive34 = runtime.getURL('assets/icons/icon-active-34.png')
-const iconActive128 = runtime.getURL('assets/icons/icon-active-128.png')
-const iconInactive34 = runtime.getURL('assets/icons/icon-inactive-34.png')
-const iconInactive128 = runtime.getURL('assets/icons/icon-inactive-128.png')
-
-export const updateIcon = async (active: boolean) => {
-  const iconData = {
-    '34': active ? iconActive34 : iconInactive34,
-    '128': active ? iconActive128 : iconInactive128
-  }
-
-  if (action) {
-    await action.setIcon({ path: iconData })
-  } else if (chrome.browserAction) {
-    chrome.browserAction.setIcon({ path: iconData })
-  }
-}
-
 export const getCurrentActiveTab = async (browser: Browser) => {
   const activeTabs = await browser.tabs.query({
     active: true,

src/content/lib/messages.ts

@@ -44,3 +44,18 @@ export const resumeMonetization = async (
     payload
   })
 }
+
+export const isTabMonetized = async (
+  payload: ContentToBackgroundActionPayload[ContentToBackgroundAction.IS_TAB_MONETIZED]
+) => {
+  return await message.send({
+    action: ContentToBackgroundAction.IS_TAB_MONETIZED,
+    payload
+  })
+}
+
+export const isWMEnabled = async () => {
+  return await message.send<boolean>({
+    action: ContentToBackgroundAction.IS_WM_ENABLED
+  })
+}

src/content/services/contentScript.ts

@@ -30,6 +30,11 @@ export class ContentScript {
               )
               return
 
+            case BackgroundToContentAction.EMIT_TOGGLE_WM:
+              this.monetizationTagManager.toggleWM(message.payload)
+
+              return
+
             default:
               return
           }

src/content/services/monetizationTagManager.ts

@@ -7,11 +7,16 @@ import { WalletAddress } from '@interledger/open-payments/dist/types'
 import { checkWalletAddressUrlFormat } from '../utils'
 import {
   checkWalletAddressUrlCall,
+  isTabMonetized,
+  isWMEnabled,
   resumeMonetization,
   startMonetization,
   stopMonetization
 } from '../lib/messages'
-import { MonetizationEventPayload } from '@/shared/messages'
+import {
+  EmitToggleWMPayload,
+  MonetizationEventPayload
+} from '@/shared/messages'
 
 export type MonetizationTag = HTMLLinkElement
 
@@ -23,6 +28,7 @@ interface FireOnMonetizationChangeIfHaveAttributeParams {
 export class MonetizationTagManager extends EventEmitter {
   private documentObserver: MutationObserver
   private monetizationTagAttrObserver: MutationObserver
+  private iconUpdated: boolean
 
   private monetizationTags = new Map<MonetizationTag, MonetizationTagDetails>()
 
@@ -38,10 +44,10 @@ export class MonetizationTagManager extends EventEmitter {
       this.onMonetizationTagAttrsChange(records)
     )
 
-    document.addEventListener('visibilitychange', () => {
+    document.addEventListener('visibilitychange', async () => {
       document.visibilityState === 'visible'
-        ? this.resumeAllMonetization()
-        : this.stopAllMonetization()
+        ? await this.resumeAllMonetization()
+        : await this.stopAllMonetization()
     })
   }
 
@@ -59,11 +65,21 @@ export class MonetizationTagManager extends EventEmitter {
     return
   }
 
-  private resumeAllMonetization() {
-    this.monetizationTags.forEach((value) => {
-      if (value.requestId && value.walletAddress)
-        resumeMonetization({ requestId: value.requestId })
-    })
+  private async resumeAllMonetization() {
+    const response = await isWMEnabled()
+
+    if (response.success && response.payload) {
+      let validTagsCount = 0
+
+      this.monetizationTags.forEach((value) => {
+        if (value.requestId && value.walletAddress) {
+          resumeMonetization({ requestId: value.requestId })
+          ++validTagsCount
+        }
+      })
+
+      isTabMonetized({ value: validTagsCount > 0 })
+    }
   }
 
   private stopAllMonetization() {
@@ -74,6 +90,8 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private onWholeDocumentObserved(records: MutationRecord[]) {
+    this.iconUpdated = false
+
     this.logger.info('document mutation records.length=', records.length)
 
     for (const record of records) {
@@ -94,6 +112,8 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   async onMonetizationTagAttrsChange(records: MutationRecord[]) {
+    this.iconUpdated = false
+
     const handledTags = new Set<Node>()
 
     // Check for a non specified link with the type now specified and
@@ -185,7 +205,6 @@ export class MonetizationTagManager extends EventEmitter {
 
     if (!wasDisabled) {
       this.onRemovedTag(tag)
-      stopMonetization({ requestId })
     }
 
     this.onAddedTag(tag, requestId)
@@ -243,6 +262,8 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private run() {
+    this.iconUpdated = false
+
     const monetizationTags: NodeListOf<MonetizationTag> =
       this.document.querySelectorAll('link')
 
@@ -255,6 +276,8 @@ export class MonetizationTagManager extends EventEmitter {
       }
     })
 
+    this.checkIsTabMonetized()
+
     const onMonetizations: NodeListOf<HTMLElement> =
       this.document.querySelectorAll('[onmonetization]')
 
@@ -280,6 +303,19 @@ export class MonetizationTagManager extends EventEmitter {
     const { requestId } = this.getTagDetails(tag, 'onRemovedTag')
     this.monetizationTags.delete(tag)
     stopMonetization({ requestId })
+
+    // Check if tab still monetized
+    this.checkIsTabMonetized()
+  }
+
+  private checkIsTabMonetized() {
+    let validTagsCount = 0
+
+    this.monetizationTags.forEach((value) => {
+      if (value.requestId && value.walletAddress) ++validTagsCount
+    })
+
+    isTabMonetized({ value: validTagsCount > 0 })
   }
 
   // Add tag to list & start monetization
@@ -294,7 +330,14 @@ export class MonetizationTagManager extends EventEmitter {
 
     this.monetizationTags.set(tag, details)
 
-    if (walletAddress) startMonetization({ requestId, walletAddress })
+    if (walletAddress) {
+      startMonetization({ requestId, walletAddress })
+
+      if (!this.iconUpdated) {
+        isTabMonetized({ value: true })
+        this.iconUpdated = true
+      }
+    }
   }
 
   // Check tag to be enabled and for valid wallet address
@@ -348,4 +391,12 @@ export class MonetizationTagManager extends EventEmitter {
       return null
     }
   }
+
+  async toggleWM({ enabled }: EmitToggleWMPayload) {
+    if (enabled) {
+      await this.resumeAllMonetization()
+    } else {
+      await this.stopAllMonetization()
+    }
+  }
 }