fix(extension): improve Dapp API injection performance (#1576)

Author: przemyslaw-wlodek

apps/browser-extension-wallet/manifest.json

@@ -22,6 +22,13 @@
     "extension_pages": "default-src 'self' $LOCALHOST_DEFAULT_SRC; frame-src https://connect.trezor.io/ https://www.youtube-nocookie.com; script-src 'self' 'wasm-unsafe-eval' $LOCALHOST_SCRIPT_SRC; font-src 'self' https://use.typekit.net; object-src 'self'; connect-src $BLOCKFROST_URLS $CARDANO_SERVICES_URLS $CARDANO_WS_SERVER_URLS $SENTRY_URL https://coingecko.live-mainnet.eks.lw.iog.io https://muesliswap.live-mainnet.eks.lw.iog.io $LOCALHOST_CONNECT_SRC $POSTHOG_HOST https://use.typekit.net data:; style-src * 'unsafe-inline'; img-src * data:;"
   },
   "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "file://*/*"],
+      "js": ["./js/inject.js"],
+      "run_at": "document_start",
+      "world": "MAIN",
+      "all_frames": true
+    },
     {
       "matches": ["http://*/*", "https://*/*", "file://*/*"],
       "js": ["./js/content.js"],

apps/browser-extension-wallet/src/lib/scripts/background/content.ts

@@ -1,21 +1,13 @@
 import { runtime } from 'webextension-polyfill';
-import {
-  cip30,
-  consumeRemoteApi,
-  MessengerDependencies,
-  runContentScriptMessageProxy
-} from '@cardano-sdk/web-extension';
+import { consumeRemoteApi, MessengerDependencies, runContentScriptMessageProxy } from '@cardano-sdk/web-extension';
 import { consumeRemoteAuthenticatorApi, consumeRemoteWalletApi } from './api-consumers';
-import { laceFeaturesApiProperties, LACE_FEATURES_CHANNEL } from './injectUtil';
+import { LACE_FEATURES_CHANNEL, laceFeaturesApiProperties } from './injectUtil';
 
 // Disable logging in production for performance & security measures
 if (process.env.USE_DAPP_CONNECTOR === 'true') {
   console.info('initializing content script');
 
-  const initializeContentScript = (
-    { injectedScriptSrc, walletName }: cip30.InitializeContentScriptProps,
-    dependencies: MessengerDependencies
-  ) => {
+  const initializeContentScript = (walletName: string, dependencies: MessengerDependencies) => {
     const apis = [
       consumeRemoteAuthenticatorApi({ walletName }, dependencies),
       consumeRemoteWalletApi({ walletName }, dependencies),
@@ -27,19 +19,9 @@ if (process.env.USE_DAPP_CONNECTOR === 'true') {
         dependencies
       )
     ];
-    const proxy = runContentScriptMessageProxy(apis, dependencies.logger);
 
-    const script = document.createElement('script');
-    script.async = false;
-    script.src = injectedScriptSrc;
-    script.addEventListener('load', () => script.remove());
-    (document.head || document.documentElement).append(script);
-
-    return proxy;
+    return runContentScriptMessageProxy(apis, dependencies.logger);
   };
 
-  initializeContentScript(
-    { injectedScriptSrc: runtime.getURL('./js/inject.js'), walletName: process.env.WALLET_NAME },
-    { logger: console, runtime }
-  );
+  initializeContentScript(process.env.WALLET_NAME, { logger: console, runtime });
 }