refactor: dynamically register key auto-add scripts (#745)

src/background/services/background.ts

@@ -8,6 +8,7 @@ import {
   isErrorWithKey,
   success,
 } from '@/shared/helpers';
+import { KeyAutoAddService } from './keyAutoAdd';
 import { OpenPaymentsClientError } from '@interledger/open-payments/dist/client/error';
 import { getTab, OPEN_PAYMENTS_ERRORS } from '@/background/utils';
 import { PERMISSION_HOSTS } from '@/shared/defines';
@@ -65,6 +66,7 @@ export class Background {
     this.bindTabHandlers();
     this.bindWindowHandlers();
     this.sendToPopup.start();
+    await KeyAutoAddService.registerContentScripts({ browser: this.browser });
   }
 
   // TODO: When Firefox 128 is old enough, inject directly via manifest.

src/background/services/keyAutoAdd.ts

@@ -6,7 +6,7 @@ import {
   withResolvers,
   type ErrorWithKeyLike,
 } from '@/shared/helpers';
-import type { Browser, Runtime, Tabs } from 'webextension-polyfill';
+import type { Browser, Runtime, Scripting, Tabs } from 'webextension-polyfill';
 import type { WalletAddress } from '@interledger/open-payments';
 import type { TabId } from '@/shared/types';
 import type { Cradle } from '@/background/container';
@@ -45,19 +45,19 @@ export class KeyAutoAddService {
   }
 
   async addPublicKeyToWallet(walletAddress: WalletAddress) {
-    const info = walletAddressToProvider(walletAddress);
+    const keyAddUrl = walletAddressToProvider(walletAddress);
     try {
       const { publicKey, keyId } = await this.storage.get([
         'publicKey',
         'keyId',
       ]);
       this.updateConnectState();
-      await this.process(info.url, {
+      await this.process(keyAddUrl, {
         publicKey,
         keyId,
         walletAddressUrl: walletAddress.id,
         nickName: this.t('appName') + ' - ' + this.browserName,
-        keyAddUrl: info.url,
+        keyAddUrl,
       });
       await this.validate(walletAddress.id, keyId);
     } catch (error) {
@@ -178,25 +178,47 @@ export class KeyAutoAddService {
       return false;
     }
   }
+
+  static async registerContentScripts({ browser }: Pick<Cradle, 'browser'>) {
+    const { scripting } = browser;
+    const existingScripts = await scripting.getRegisteredContentScripts();
+    const existingScriptIds = new Set(existingScripts.map((s) => s.id));
+    const scripts = getContentScripts().filter(
+      (s) => !existingScriptIds.has(s.id),
+    );
+    await scripting.registerContentScripts(scripts);
+  }
+}
+
+function getContentScripts(): Scripting.RegisteredContentScript[] {
+  return [
+    {
+      id: 'keyAutoAdd/testWallet',
+      matches: [
+        'https://wallet.interledger-test.dev/*',
+        'https://wallet.interledger.cards/*',
+      ],
+      js: ['content/keyAutoAdd/testWallet.js'],
+    },
+    {
+      id: 'keyAutoAdd/fynbos',
+      matches: ['https://eu1.fynbos.dev/*', 'https://wallet.fynbos.app/*'],
+      js: ['content/keyAutoAdd/fynbos.js'],
+    },
+  ];
 }
 
-export function walletAddressToProvider(walletAddress: WalletAddress): {
-  url: string;
-} {
+function walletAddressToProvider(walletAddress: WalletAddress): string {
   const { host } = new URL(walletAddress.id);
   switch (host) {
     case 'ilp.interledger-test.dev':
-      return {
-        url: 'https://wallet.interledger-test.dev/settings/developer-keys',
-      };
+      return 'https://wallet.interledger-test.dev/settings/developer-keys';
     case 'ilp.interledger.cards':
-      return {
-        url: 'https://wallet.interledger.cards/settings/developer-keys',
-      };
+      return 'https://wallet.interledger.cards/settings/developer-keys';
     case 'eu1.fynbos.me':
-      return { url: 'https://eu1.fynbos.dev/settings/keys' };
+      return 'https://eu1.fynbos.dev/settings/keys';
     case 'fynbos.me':
-      return { url: 'https://wallet.fynbos.app/settings/keys' };
+      return 'https://wallet.fynbos.app/settings/keys';
     default:
       throw new ErrorWithKey('connectWalletKeyService_error_notImplemented');
   }

src/manifest.json

@@ -17,19 +17,6 @@
       "js": ["content/content.js"],
       "run_at": "document_start",
       "all_frames": true
-    },
-    {
-      "matches": [
-        "https://wallet.interledger-test.dev/*",
-        "https://wallet.interledger.cards/*"
-      ],
-      "js": ["content/keyAutoAdd/testWallet.js"],
-      "run_at": "document_end"
-    },
-    {
-      "matches": ["https://eu1.fynbos.dev/*", "https://wallet.fynbos.app/*"],
-      "js": ["content/keyAutoAdd/fynbos.js"],
-      "run_at": "document_end"
     }
   ],
   "background": {