feat: add createExternalExtensionProvider

jest.config.js

@@ -10,6 +10,7 @@ module.exports = {
   //     statements: 100,
   //   },
   // },
+  setupFilesAfterEnv: ['./jest.setup.js'],
   moduleFileExtensions: ['js'],
   silent: true,
   testEnvironment: 'jsdom',

jest.setup.js

@@ -0,0 +1 @@
+Object.assign(global, require('jest-chrome'));

package.json

@@ -39,12 +39,16 @@
   "dependencies": {
     "@metamask/object-multiplex": "^1.1.0",
     "@metamask/safe-event-emitter": "^2.0.0",
+    "@types/chrome": "^0.0.136",
+    "detect-browser": "^5.2.0",
     "eth-rpc-errors": "^4.0.2",
+    "extension-port-stream": "^2.0.1",
     "fast-deep-equal": "^2.0.1",
     "is-stream": "^2.0.0",
     "json-rpc-engine": "^6.1.0",
     "json-rpc-middleware-stream": "^3.0.0",
-    "pump": "^3.0.0"
+    "pump": "^3.0.0",
+    "webextension-polyfill-ts": "^0.25.0"
   },
   "devDependencies": {
     "@metamask/eslint-config": "^6.0.0",
@@ -58,13 +62,14 @@
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
     "eslint": "^7.15.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^23.18.0",
     "eslint-plugin-json": "^2.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-config-prettier": "^8.1.0",
     "jest": "^26.6.3",
+    "jest-chrome": "^0.7.1",
     "prettier": "^2.2.1",
     "typescript": "^4.1.3"
   }

src/BaseProvider.ts

@@ -69,7 +69,7 @@ export interface BaseProviderState {
 export interface JsonRpcConnection {
   events: SafeEventEmitter;
   middleware: JsonRpcMiddleware<unknown, unknown>;
-  stream: _Readable.Duplex;
+  stream: Duplex;
 }
 
 export default class BaseProvider extends SafeEventEmitter {
@@ -112,7 +112,7 @@ export default class BaseProvider extends SafeEventEmitter {
    * listeners. Default: 100
    */
   constructor(
-    connectionStream: typeof Duplex,
+    connectionStream: Duplex,
     {
       jsonRpcStreamName = 'metamask-provider',
       logger = console,

src/MetaMaskInpageProvider.ts

@@ -81,7 +81,7 @@ export default class MetaMaskInpageProvider extends BaseProvider {
    * send page metadata. Default: true
    */
   constructor(
-    connectionStream: typeof Duplex,
+    connectionStream: Duplex,
     {
       jsonRpcStreamName = 'metamask-provider',
       logger = console,

src/createMetaMaskExternalExtensionProvider.ts

@@ -0,0 +1,34 @@
+import PortStream from 'extension-port-stream';
+import { detect } from 'detect-browser';
+import { Runtime } from 'webextension-polyfill-ts';
+import MetaMaskInpageProvider from './MetaMaskInpageProvider';
+import config from './external-extension-config.json';
+
+const browser = detect();
+
+export default function createMetaMaskExternalExtensionProvider() {
+  let provider;
+  try {
+    const currentMetaMaskId = getMetaMaskId();
+    const metamaskPort = chrome.runtime.connect(
+      currentMetaMaskId,
+    ) as Runtime.Port;
+    const pluginStream = new PortStream(metamaskPort);
+    provider = new MetaMaskInpageProvider(pluginStream);
+  } catch (e) {
+    console.dir(`Metamask connect error `, e);
+    throw e;
+  }
+  return provider;
+}
+
+function getMetaMaskId() {
+  switch (browser?.name) {
+    case 'chrome':
+      return config.CHROME_ID;
+    case 'firefox':
+      return config.FIREFOX_ID;
+    default:
+      return config.CHROME_ID;
+  }
+}

src/external-extension-config.json

@@ -0,0 +1,4 @@
+{
+  "CHROME_ID": "nkbihfbeogaeaoehlefnkodbefgpgknn",
+  "FIREFOX_ID": "[email protected]"
+}

src/index.ts

@@ -1,4 +1,5 @@
 import MetaMaskInpageProvider from './MetaMaskInpageProvider';
+import createMetaMaskExternalExtensionProvider from './createMetaMaskExternalExtensionProvider';
 import BaseProvider from './BaseProvider';
 import {
   initializeProvider,
@@ -12,4 +13,5 @@ export {
   BaseProvider,
   setGlobalProvider,
   shimWeb3,
+  createMetaMaskExternalExtensionProvider,
 };

src/initializeInpageProvider.ts

@@ -8,7 +8,7 @@ interface InitializeProviderOptions extends MetaMaskInpageProviderOptions {
   /**
    * The stream used to connect to the wallet.
    */
-  connectionStream: typeof Duplex;
+  connectionStream: Duplex;
 
   /**
    * Whether the provider should be set as window.ethereum.

test/createMetaMaskExternalExtensionProvider.test.js

@@ -0,0 +1,34 @@
+const {
+  createMetaMaskExternalExtensionProvider,
+  MetaMaskInpageProvider,
+} = require('../dist');
+
+describe('createMetaMaskExternalExtensionProvider', () => {
+  beforeAll(() => {
+    global.chrome.runtime.connect.mockImplementation(() => {
+      return {
+        onMessage: {
+          addListener: jest.fn(),
+        },
+        onDisconnect: {
+          addListener: jest.fn(),
+        },
+        postMessage: jest.fn(),
+      };
+    });
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it('can be called and not throw', () => {
+    expect(() => createMetaMaskExternalExtensionProvider()).not.toThrow();
+  });
+  it('calls connect', () => {
+    createMetaMaskExternalExtensionProvider();
+    expect(global.chrome.runtime.connect).toHaveBeenCalled();
+  });
+  it('returns a MetaMaskInpageProvider', () => {
+    const results = createMetaMaskExternalExtensionProvider();
+    expect(results).toBeInstanceOf(MetaMaskInpageProvider);
+  });
+});

tsconfig.json

@@ -4,6 +4,7 @@
     "esModuleInterop": true,
     "module": "CommonJS",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "outDir": "dist",
     "sourceMap": true,
     "strict": true,