feat: inject inpage.js by chrome content-script

Author: mosshqq

packages/background/src/service-worker.js

@@ -147,3 +147,28 @@ async function initApp() {
 }
 
 initApp()
+
+let count = 0
+const registerInPageContentScript = async () => {
+  count++
+  try {
+    await chrome.scripting.registerContentScripts([
+      {
+        id: 'inpage',
+        matches: ['file://*/*', 'http://*/*', 'https://*/*'],
+        js: ['inpage.js'],
+        runAt: 'document_start',
+        world: 'MAIN',
+        allFrames: true,
+      },
+    ])
+  } catch (err) {
+    console.error('registerInPageContentScript failed:', err)
+    if (count < 3) {
+      // retry
+      registerInPageContentScript()
+    }
+  }
+}
+
+registerInPageContentScript()

packages/content-script/indexTemplate.js

@@ -2,8 +2,6 @@ import browser from 'webextension-polyfill'
 import {stream} from '@thi.ng/rstream'
 import {getSiteMetadata} from '@fluent-wallet/site-metadata'
 
-let INPAGE_INJECTED = false
-
 function _retry() {
   let retryTimeout = 100
   if (CONNECT_RETRY_COUNT >= 10) {
@@ -23,22 +21,6 @@ function _retry() {
   setTimeout(setup, retryTimeout)
 }
 
-function injectInpage(content) {
-  try {
-    const container = document.head || document.documentElement
-    const scriptTag = document.createElement('script')
-    scriptTag.setAttribute('async', 'false')
-    if (content) scriptTag.textContent = content
-    else scriptTag.src = browser.runtime.getURL('inpage.js')
-    container.insertBefore(scriptTag, container.children[0])
-    container.removeChild(scriptTag)
-    INPAGE_INJECTED = true
-    registerSite()
-  } catch (error) {
-    console.error('Fluent Wallet: Provider injection failed.', error)
-  }
-}
-
 let CONNECT_RETRY_COUNT = 0
 let s
 
@@ -91,6 +73,10 @@ function setup() {
       typeof e.data.msg !== 'object'
     )
       return
+    if (e.data.msg.event === '__INPAGE_INJECTED__') {
+      registerSite()
+      return
+    }
     if (!e.data.msg.method) return
     if (e.data.msg.jsonrpc !== '2.0') return
     if (!Number.isInteger(e.data.msg.id)) return
@@ -125,7 +111,6 @@ function setup() {
     )
   })
 
-  if (INPAGE_INJECTED) registerSite()
+  registerSite()
 }
-injectInpage()
 setup()

packages/inpage/setup-inpage-provider.js

@@ -69,6 +69,10 @@ function setupProvider() {
       location.origin,
     )
 
+  post({
+    event: '__INPAGE_INJECTED__',
+  })
+
   const {send: sendToBg, stream} = rpcStream({
     postMessage: post,
     onMessage: {
@@ -93,7 +97,6 @@ function setupProvider() {
   if (!window.ethereum) window.ethereum = PROVIDER
   Object.defineProperty(window, 'conflux', {value: PROVIDER, writable: false})
   takeOver(PROVIDER, 'cfx')
-
   if (window.localStorage.getItem(FLUENT_OVERRIDE_WINDOW_DOT_ETHEREUM)) {
     try {
       Object.defineProperty(window, 'ethereum', {

packages/inpage/take-over-portal.js

@@ -26,11 +26,17 @@ function _takeOverEthereum(PROVIDER, resolve) {
 export async function takeOver(PROVIDER, type = 'cfx') {
   if (!PROVIDER) return
   const takeOverFn = type === 'cfx' ? _takeOverConflux : _takeOverEthereum
-  return await new Promise(resolve => {
-    TakeOverInterval[type] = setInterval(
-      () => takeOverFn(PROVIDER, resolve),
-      50,
-    )
+  return await new Promise((resolve, reject) => {
+    TakeOverInterval[type] = setInterval(() => {
+      try {
+        takeOverFn(PROVIDER, resolve)
+      } catch (error) {
+        if (error?.message?.includes('Cannot redefine property')) {
+          clearInterval(TakeOverInterval[type])
+          reject(error)
+        }
+      }
+    }, 50)
   })
 }
 

packages/manifest/manifestv3.json

@@ -78,6 +78,7 @@
     "unlimitedStorage",
     "clipboardWrite",
     "tabs",
+    "scripting",
     "activeTab",
     "notifications"
   ],