From 57a329152fcb4a45c7f4b36e1af647d9ee0ce982 Mon Sep 17 00:00:00 2001 From: Diana Fulga Date: Mon, 19 Feb 2024 13:25:29 +0200 Subject: [PATCH] chore: Move load (#97) * Move load * Revent to mv2 * Implement feedback --------- Co-authored-by: Diana Fulga --- src/background/Background.ts | 25 +++++--- src/background/grantFlow.ts | 3 + src/content/index.ts | 14 +++++ src/content/index.tsx | 26 --------- src/content/messageListener.ts | 15 +++-- src/content/static/index.ts | 13 +++++ src/{utils => content/static}/polyfill.ts | 2 - src/manifest/chrome-v3.json | 70 +++++++++++------------ src/manifest/chrome.json | 5 ++ src/types/message.d.ts | 1 + webpack.config.utils.ts | 5 +- 11 files changed, 97 insertions(+), 82 deletions(-) create mode 100755 src/content/index.ts delete mode 100755 src/content/index.tsx create mode 100644 src/content/static/index.ts rename src/{utils => content/static}/polyfill.ts (96%) diff --git a/src/background/Background.ts b/src/background/Background.ts index f13911f1..b7ca80a5 100644 --- a/src/background/Background.ts +++ b/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) diff --git a/src/background/grantFlow.ts b/src/background/grantFlow.ts index 18fac5fb..ce5cd937 100644 --- a/src/background/grantFlow.ts +++ b/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' }) } diff --git a/src/content/index.ts b/src/content/index.ts new file mode 100755 index 00000000..5ede1b8d --- /dev/null +++ b/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() diff --git a/src/content/index.tsx b/src/content/index.tsx deleted file mode 100755 index 56d02f73..00000000 --- a/src/content/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { runtime } from 'webextension-polyfill' - -import { initMonetizationTagManager } from '@/utils/monetizationTagManager' -import { wm2Polyfill } from '@/utils/polyfill' - -import { loadObserver } from './linksObserver' -import MessageListener from './messageListener' - -// import "./content.css"; - -runtime.onMessage.addListener(MessageListener) - -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) - -loadObserver() -initMonetizationTagManager() diff --git a/src/content/messageListener.ts b/src/content/messageListener.ts index e61fed35..709a491d 100644 --- a/src/content/messageListener.ts +++ b/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 => { - // console.log('~~~~~~~', msg) - +export const onRequest = async (msg: EXTMessage): Promise => { 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"]') diff --git a/src/content/static/index.ts b/src/content/static/index.ts new file mode 100644 index 00000000..7bdea7c1 --- /dev/null +++ b/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) diff --git a/src/utils/polyfill.ts b/src/content/static/polyfill.ts similarity index 96% rename from src/utils/polyfill.ts rename to src/content/static/polyfill.ts index 6acf624e..e394da20 100644 --- a/src/utils/polyfill.ts +++ b/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') diff --git a/src/manifest/chrome-v3.json b/src/manifest/chrome-v3.json index 622b6a88..f505e507 100644 --- a/src/manifest/chrome-v3.json +++ b/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": [""] - } - ] + { + "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": [""] + } + ] } diff --git a/src/manifest/chrome.json b/src/manifest/chrome.json index 8805a11e..ed41c947 100644 --- a/src/manifest/chrome.json +++ b/src/manifest/chrome.json @@ -12,6 +12,11 @@ { "matches": ["http://*/*", "https://*/*", ""], "js": ["content/content.js"] + }, + { + "run_at": "document_start", + "matches": ["http://*/*", "https://*/*"], + "js": ["contentStatic/contentStatic.js"] } ], "background": { diff --git a/src/types/message.d.ts b/src/types/message.d.ts index 8dc5b546..8f46fc77 100644 --- a/src/types/message.d.ts +++ b/src/types/message.d.ts @@ -10,6 +10,7 @@ declare type EXTMessageType = | 'STOP_PAYMENTS' | 'PAYMENT_SUCCESS' | 'PAUSE_PAYMENTS' + | 'LOAD' declare type EXTMessage = { type: EXTMessageType diff --git a/webpack.config.utils.ts b/webpack.config.utils.ts index 3361087b..32614c34 100644 --- a/webpack.config.utils.ts +++ b/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`)], } }