chore: Move load (#97)

* Move load

* Revent to mv2

* Implement feedback

---------

Co-authored-by: Diana Fulga <[email protected]>

src/background/Background.ts

@@ -1,4 +1,4 @@
-import { runtime, tabs } from 'webextension-polyfill'
+import { Runtime, runtime, tabs } from 'webextension-polyfill'
 
 import { PaymentFlowService } from '@/background/grantFlow'
 
@@ -23,15 +23,24 @@ class Background {
 
   subscribeToMessages() {
     this.subscriptions = this.messageHandlers.map((handler: any) => {
-      const listener: any = async (message: EXTMessage) => {
+      const listener: any = (
+        message: EXTMessage,
+        sender: Runtime.MessageSender,
+        sendResponse: (res: any) => void,
+      ) => {
         if (handler.type === message.type) {
-          try {
-            await handler.callback(message.data, this)
-          } catch (error) {
-            console.log('[===== Error in MessageListener =====]', error)
-            return error
-          }
+          handler
+            .callback(message.data, this)
+            .then((res: any) => {
+              sendResponse(res)
+            })
+            .catch((error: any) => {
+              console.log('[===== Error in MessageListener =====]', error)
+              sendResponse(error)
+            })
         }
+
+        return true
       }
 
       runtime.onMessage.addListener(listener)

src/background/grantFlow.ts

@@ -94,6 +94,9 @@ export class PaymentFlowService {
     this.continuationRequestToken = continuationRequest.continuationRequestToken
 
     const currentTabId = await this.getCurrentActiveTabId()
+
+    await tabs.sendMessage(currentTabId ?? 0, { type: 'LOAD' })
+
     await tabs.sendMessage(currentTabId ?? 0, { type: 'START_PAYMENTS' })
   }
 

src/content/index.ts

@@ -0,0 +1,14 @@
+import { runtime } from 'webextension-polyfill'
+
+import { initMonetizationTagManager } from '@/utils/monetizationTagManager'
+
+import { loadObserver } from './linksObserver'
+import MessageListener from './messageListener'
+
+runtime.onMessage.addListener(MessageListener)
+
+// DEBUG PURPOSE
+loadObserver()
+
+// TBD - check logic
+initMonetizationTagManager()

src/content/messageListener.ts

@@ -1,16 +1,15 @@
-// import { Runtime } from 'webextension-polyfill'
-
 import { PaymentSender } from '@/content/monetization'
 
 const paymentSender = new PaymentSender()
 
-export const onRequest = async (
-  msg: EXTMessage,
-  // sender: Runtime.SendMessageOptionsType,
-): Promise<EXTResponse | undefined> => {
-  // console.log('~~~~~~~', msg)
-
+export const onRequest = async (msg: EXTMessage): Promise<EXTResponse | undefined> => {
   switch (msg.type) {
+    case 'LOAD': {
+      const monetizationTag = document.querySelector('link[rel="monetization"]')
+      monetizationTag?.dispatchEvent(new Event('load'))
+      break
+    }
+
     case 'IS_MONETIZATION_READY': {
       const monetizationTag = document.querySelector('link[rel="monetization"]')
 

src/content/static/index.ts

@@ -0,0 +1,13 @@
+import { wm2Polyfill } from '@/content/static/polyfill'
+
+function inject(configure: (_script: HTMLScriptElement) => void) {
+  const script = document.createElement('script')
+  configure(script)
+  document.documentElement.appendChild(script)
+  document.documentElement.removeChild(script)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-extra-semi
+;(function injectCode(code: string) {
+  inject(script => (script.innerHTML = code))
+})(wm2Polyfill)

src/utils/polyfill.ts → src/content/static/polyfill.ts

@@ -1,7 +1,5 @@
 // language=JavaScript
 export const wm2Polyfill = `
-  var monetizationTag = document.querySelector('link[rel="monetization"]');
-  monetizationTag.dispatchEvent(new Event('load'));
   const dbg = () => {
   }
   dbg('setonmonetization property start')

src/manifest/chrome-v3.json

@@ -1,39 +1,37 @@
 {
-    "name": "__MSG_appName__",
-    "version": "1.0.1",
-    "manifest_version": 3,
-    "description": "__MSG_appDescription__",
-    "icons": {
-        "34": "assets/icons/icon-34.png",
-        "128": "assets/icons/icon-128.png"
+  "name": "__MSG_appName__",
+  "version": "1.0.1",
+  "manifest_version": 3,
+  "description": "__MSG_appDescription__",
+  "icons": {
+    "34": "assets/icons/icon-34.png",
+    "128": "assets/icons/icon-128.png"
+  },
+  "default_locale": "en",
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["content/content.js"]
     },
-    "default_locale": "en",
-    "content_scripts": [
-        {
-            "matches": ["http://*/*", "https://*/*"],
-            "js": ["content/content.js"]
-        }
-    ],
-    "background": {
-        "service_worker": "background/background.js"
-    },
-    "permissions": ["tabs", "storage"],
-    "host_permissions": ["http://*/*", "https://*/*"],
-    "options_ui": {
-        "page": "options/index.html"
-    },
-    "action": {
-        "default_icon": {
-            "16": "assets/icons/icon-16.png",
-            "48": "assets/icons/icon-48.png"
-        },
-        "default_title": "Web Monetization",
-        "default_popup": "popup/index.html"
-    },
-    "web_accessible_resources": [
-        {
-            "resources": ["assets/*", "content/*", "options/*", "popup/*", "background/*"],
-            "matches": ["<all_urls>"]
-        }
-    ]
+    {
+      "run_at": "document_start",
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["contentStatic/contentStatic.js"]
+    }
+  ],
+  "background": {
+    "service_worker": "background/background.js"
+  },
+  "permissions": ["tabs", "storage"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "action": {
+    "default_title": "Web Monetization",
+    "default_popup": "popup/index.html"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["assets/*", "content/*", "options/*", "popup/*", "background/*"],
+      "matches": ["<all_urls>"]
+    }
+  ]
 }

src/manifest/chrome.json

@@ -12,6 +12,11 @@
     {
       "matches": ["http://*/*", "https://*/*", "<all_urls>"],
       "js": ["content/content.js"]
+    },
+    {
+      "run_at": "document_start",
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["contentStatic/contentStatic.js"]
     }
   ],
   "background": {

src/types/message.d.ts

@@ -10,6 +10,7 @@ declare type EXTMessageType =
   | 'STOP_PAYMENTS'
   | 'PAYMENT_SUCCESS'
   | 'PAUSE_PAYMENTS'
+  | 'LOAD'
 
 declare type EXTMessage<T = any> = {
   type: EXTMessageType

webpack.config.utils.ts

@@ -49,7 +49,7 @@ const EnvConfig: EnvironmentConfig = {
         ? Directories.DIST_DIR
         : Directories.DEV_DIR,
   ...(process.env.NODE_ENV ? { NODE_ENV: process.env.NODE_ENV } : { NODE_ENV: 'development' }),
-  ...(process.env.TARGET ? { TARGET: process.env.TARGET } : { TARGET: 'chrome' }),
+  ...(process.env.TARGET ? { TARGET: process.env.TARGET } : { TARGET: 'chrome-v3' }),
 }
 
 /**
@@ -109,7 +109,8 @@ export const getOutput = (browserDir: string, outputDir = Directories.DEV_DIR) =
 export const getEntry = (sourceDir = Directories.SRC_DIR) => {
   return {
     popup: [path.resolve(__dirname, `${sourceDir}/popup/index.tsx`)],
-    content: [path.resolve(__dirname, `${sourceDir}/content/index.tsx`)],
+    content: [path.resolve(__dirname, `${sourceDir}/content/index.ts`)],
+    contentStatic: [path.resolve(__dirname, `${sourceDir}/content/static/index.ts`)],
     background: [path.resolve(__dirname, `${sourceDir}/background/index.ts`)],
   }
 }