Deprecate extensionizer for webextension-polyfill (#13960)

* deprecate extensionizer for webextension-polyfill

* fix tests

* remove extensionizer

* fix browser windows api calls

* fix broken on firefox

* fix getAcceptLanguages call

* update more browser apis that are now promisified

* remove unnecessary console error ignoring in e2e tests

app/scripts/background.js

@@ -6,7 +6,7 @@ import endOfStream from 'end-of-stream';
 import pump from 'pump';
 import debounce from 'debounce-stream';
 import log from 'loglevel';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import { storeAsStream, storeTransformStream } from '@metamask/obs-store';
 import PortStream from 'extension-port-stream';
 import { captureException } from '@sentry/browser';
@@ -224,7 +224,7 @@ function setupController(initState, initLangCode) {
     // platform specific api
     platform,
     notificationManager,
-    extension,
+    browser,
     getRequestAccountTabIds: () => {
       return requestAccountTabIds;
     },
@@ -294,8 +294,8 @@ function setupController(initState, initLangCode) {
   //
   // connect to other contexts
   //
-  extension.runtime.onConnect.addListener(connectRemote);
+  browser.runtime.onConnect.addListener(connectRemote);
-  extension.runtime.onConnectExternal.addListener(connectExternal);
+  browser.runtime.onConnectExternal.addListener(connectExternal);
 
   const metamaskInternalProcessHash = {
     [ENVIRONMENT_TYPE_POPUP]: true,
@@ -359,8 +359,7 @@ function setupController(initState, initLangCode) {
       isMetaMaskInternalProcess = metamaskInternalProcessHash[processName];
     } else {
       isMetaMaskInternalProcess =
-        remotePort.sender.origin ===
+        remotePort.sender.origin === `chrome-extension://${browser.runtime.id}`;
-        `chrome-extension://${extension.runtime.id}`;
     }
 
     if (isMetaMaskInternalProcess) {
@@ -481,8 +480,8 @@ function setupController(initState, initLangCode) {
     if (count) {
       label = String(count);
     }
-    extension.browserAction.setBadgeText({ text: label });
+    browser.browserAction.setBadgeText({ text: label });
-    extension.browserAction.setBadgeBackgroundColor({ color: '#037DD6' });
+    browser.browserAction.setBadgeBackgroundColor({ color: '#037DD6' });
   }
 
   function getUnapprovedTransactionCount() {
@@ -627,7 +626,7 @@ async function openPopup() {
 }
 
 // On first install, open a new tab with MetaMask
-extension.runtime.onInstalled.addListener(({ reason }) => {
+browser.runtime.onInstalled.addListener(({ reason }) => {
   if (
     reason === 'install' &&
     !(process.env.METAMASK_DEBUG || process.env.IN_TEST)

app/scripts/contentscript.js

@@ -2,7 +2,7 @@ import querystring from 'querystring';
 import pump from 'pump';
 import { WindowPostMessageStream } from '@metamask/post-message-stream';
 import ObjectMultiplex from 'obj-multiplex';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import PortStream from 'extension-port-stream';
 import { obj as createThoughStream } from 'through2';
 
@@ -14,7 +14,7 @@ const inpageContent = fs.readFileSync(
   path.join(__dirname, '..', '..', 'dist', 'chrome', 'inpage.js'),
   'utf8',
 );
-const inpageSuffix = `//# sourceURL=${extension.runtime.getURL('inpage.js')}\n`;
+const inpageSuffix = `//# sourceURL=${browser.runtime.getURL('inpage.js')}\n`;
 const inpageBundle = inpageContent + inpageSuffix;
 
 const CONTENT_SCRIPT = 'metamask-contentscript';
@@ -61,7 +61,7 @@ async function setupStreams() {
     name: CONTENT_SCRIPT,
     target: INPAGE,
   });
-  const extensionPort = extension.runtime.connect({ name: CONTENT_SCRIPT });
+  const extensionPort = browser.runtime.connect({ name: CONTENT_SCRIPT });
   const extensionStream = new PortStream(extensionPort);
 
   // create and connect channel muxers
@@ -301,7 +301,7 @@ function blockedDomainCheck() {
  */
 function redirectToPhishingWarning() {
   console.debug('MetaMask: Routing to Phishing Warning component.');
-  const extensionURL = extension.runtime.getURL('phishing.html');
+  const extensionURL = browser.runtime.getURL('phishing.html');
   window.location.href = `${extensionURL}#${querystring.stringify({
     hostname: window.location.hostname,
     href: window.location.href,

app/scripts/lib/createOnboardingMiddleware.js

@@ -1,5 +1,5 @@
 import log from 'loglevel';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 
 /**
  * Returns a middleware that intercepts `wallet_registerOnboarding` messages
@@ -17,7 +17,7 @@ export default function createOnboardingMiddleware({
         next();
         return;
       }
-      if (req.tabId && req.tabId !== extension.tabs.TAB_ID_NONE) {
+      if (req.tabId && req.tabId !== browser.tabs.TAB_ID_NONE) {
         await registerOnboarding(location, req.tabId);
       } else {
         log.debug(

app/scripts/lib/ens-ipfs/setup.js

@@ -1,6 +1,7 @@
 import base32Encode from 'base32-encode';
 import base64 from 'base64-js';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
+
 import { SECOND } from '../../../../shared/constants/time';
 import getFetchWithTimeout from '../../../../shared/modules/fetch-with-timeout';
 import resolveEnsToIpfsContentId from './resolver';
@@ -16,7 +17,7 @@ export default function setupEnsIpfsResolver({
 }) {
   // install listener
   const urlPatterns = supportedTopLevelDomains.map((tld) => `*://*.${tld}/*`);
-  extension.webRequest.onErrorOccurred.addListener(webRequestDidFail, {
+  browser.webRequest.onErrorOccurred.addListener(webRequestDidFail, {
     urls: urlPatterns,
     types: ['main_frame'],
   });
@@ -25,7 +26,7 @@ export default function setupEnsIpfsResolver({
   return {
     // uninstall listener
     remove() {
-      extension.webRequest.onErrorOccurred.removeListener(webRequestDidFail);
+      browser.webRequest.onErrorOccurred.removeListener(webRequestDidFail);
     },
   };
 
@@ -51,7 +52,7 @@ export default function setupEnsIpfsResolver({
   async function attemptResolve({ tabId, name, pathname, search, fragment }) {
     const ipfsGateway = getIpfsGateway();
 
-    extension.tabs.update(tabId, { url: `loading.html` });
+    browser.tabs.update(tabId, { url: `loading.html` });
     let url = `https://app.ens.domains/name/${name}`;
     try {
       const { type, hash } = await resolveEnsToIpfsContentId({
@@ -101,7 +102,7 @@ export default function setupEnsIpfsResolver({
     } catch (err) {
       console.warn(err);
     } finally {
-      extension.tabs.update(tabId, { url });
+      browser.tabs.update(tabId, { url });
     }
   }
 }

app/scripts/lib/get-first-preferred-lang-code.js

@@ -1,11 +1,6 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
-import promisify from 'pify';
 import allLocales from '../../_locales/index.json';
 
-const getPreferredLocales = extension.i18n
-  ? promisify(extension.i18n.getAcceptLanguages, { errorFirst: false })
-  : async () => [];
-
 // mapping some browsers return hyphen instead underscore in locale codes (e.g. zh_TW -> zh-tw)
 const existingLocaleCodes = {};
 allLocales.forEach((locale) => {
@@ -25,7 +20,7 @@ export default async function getFirstPreferredLangCode() {
   let userPreferredLocaleCodes;
 
   try {
-    userPreferredLocaleCodes = await getPreferredLocales();
+    userPreferredLocaleCodes = await browser.i18n.getAcceptLanguages();
   } catch (e) {
     // Brave currently throws when calling getAcceptLanguages, so this handles that.
     userPreferredLocaleCodes = [];

app/scripts/lib/local-store.js

@@ -1,4 +1,4 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import log from 'loglevel';
 import { checkForError } from './util';
 
@@ -7,7 +7,7 @@ import { checkForError } from './util';
  */
 export default class ExtensionStore {
   constructor() {
-    this.isSupported = Boolean(extension.storage.local);
+    this.isSupported = Boolean(browser.storage.local);
     if (!this.isSupported) {
       log.error('Storage local API not available.');
     }
@@ -48,9 +48,9 @@ export default class ExtensionStore {
    * @returns {Object} the key-value map from local storage
    */
   _get() {
-    const { local } = extension.storage;
+    const { local } = browser.storage;
     return new Promise((resolve, reject) => {
-      local.get(null, (/** @type {any} */ result) => {
+      local.get(null).then((/** @type {any} */ result) => {
         const err = checkForError();
         if (err) {
           reject(err);
@@ -69,9 +69,9 @@ export default class ExtensionStore {
    * @private
    */
   _set(obj) {
-    const { local } = extension.storage;
+    const { local } = browser.storage;
     return new Promise((resolve, reject) => {
-      local.set(obj, () => {
+      local.set(obj).then(() => {
         const err = checkForError();
         if (err) {
           reject(err);

app/scripts/lib/util.js

@@ -1,4 +1,5 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
+
 import { stripHexPrefix } from 'ethereumjs-util';
 import BN from 'bn.js';
 import { memoize } from 'lodash';
@@ -102,7 +103,7 @@ function BnMultiplyByFraction(targetBN, numerator, denominator) {
  * @returns {Error|undefined}
  */
 function checkForError() {
-  const { lastError } = extension.runtime;
+  const { lastError } = browser.runtime;
   if (!lastError) {
     return undefined;
   }

app/scripts/metamask-controller.js

@@ -164,7 +164,7 @@ export default class MetamaskController extends EventEmitter {
       MILLISECOND * 200,
     );
     this.opts = opts;
-    this.extension = opts.extension;
+    this.extension = opts.browser;
     this.platform = opts.platform;
     this.notificationManager = opts.notificationManager;
     const initState = opts.initState || {};
@@ -1001,7 +1001,7 @@ export default class MetamaskController extends EventEmitter {
     }
 
     // Lazily update the store with the current extension environment
-    this.extension.runtime.getPlatformInfo(({ os }) => {
+    this.extension.runtime.getPlatformInfo().then(({ os }) => {
       this.appStateController.setBrowserEnvironment(
         os,
         // This method is presently only supported by Firefox

app/scripts/metamask-controller.test.js

@@ -65,7 +65,7 @@ class ThreeBoxControllerMock {
   }
 }
 
-const ExtensionizerMock = {
+const browserPolyfillMock = {
   runtime: {
     id: 'fake-extension-id',
     onInstalled: {
@@ -148,7 +148,7 @@ describe('MetaMaskController', function () {
         showTransactionNotification: () => undefined,
         getVersion: () => 'foo',
       },
-      extension: ExtensionizerMock,
+      browser: browserPolyfillMock,
       infuraProjectId: 'foo',
     });
 

app/scripts/phishing-detect.js

@@ -1,6 +1,6 @@
 import querystring from 'querystring';
 import PortStream from 'extension-port-stream';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import createRandomId from '../../shared/modules/random-id';
 import { setupMultiplex } from './lib/stream-utils';
 import { getEnvironmentType } from './lib/util';
@@ -21,7 +21,7 @@ function start() {
 
   global.platform = new ExtensionPlatform();
 
-  const extensionPort = extension.runtime.connect({
+  const extensionPort = browser.runtime.connect({
     name: getEnvironmentType(),
   });
   const connectionStream = new PortStream(extensionPort);

app/scripts/platforms/extension.js

@@ -1,4 +1,5 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
+
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import { getEnvironmentType, checkForError } from '../lib/util';
 import { ENVIRONMENT_TYPE_BACKGROUND } from '../../../shared/constants/app';
@@ -9,12 +10,12 @@ export default class ExtensionPlatform {
   // Public
   //
   reload() {
-    extension.runtime.reload();
+    browser.runtime.reload();
   }
 
   openTab(options) {
     return new Promise((resolve, reject) => {
-      extension.tabs.create(options, (newTab) => {
+      browser.tabs.create(options).then((newTab) => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -26,7 +27,7 @@ export default class ExtensionPlatform {
 
   openWindow(options) {
     return new Promise((resolve, reject) => {
-      extension.windows.create(options, (newWindow) => {
+      browser.windows.create(options).then((newWindow) => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -38,7 +39,7 @@ export default class ExtensionPlatform {
 
   focusWindow(windowId) {
     return new Promise((resolve, reject) => {
-      extension.windows.update(windowId, { focused: true }, () => {
+      browser.windows.update(windowId, { focused: true }).then(() => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -50,7 +51,7 @@ export default class ExtensionPlatform {
 
   updateWindowPosition(windowId, left, top) {
     return new Promise((resolve, reject) => {
-      extension.windows.update(windowId, { left, top }, () => {
+      browser.windows.update(windowId, { left, top }).then(() => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -62,7 +63,7 @@ export default class ExtensionPlatform {
 
   getLastFocusedWindow() {
     return new Promise((resolve, reject) => {
-      extension.windows.getLastFocused((windowObject) => {
+      browser.windows.getLastFocused().then((windowObject) => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -73,8 +74,8 @@ export default class ExtensionPlatform {
   }
 
   closeCurrentWindow() {
-    return extension.windows.getCurrent((windowDetails) => {
+    return browser.windows.getCurrent().then((windowDetails) => {
-      return extension.windows.remove(windowDetails.id);
+      return browser.windows.remove(windowDetails.id);
     });
   }
 
@@ -82,7 +83,7 @@ export default class ExtensionPlatform {
     const {
       version,
       version_name: versionName,
-    } = extension.runtime.getManifest();
+    } = browser.runtime.getManifest();
 
     const versionParts = version.split('.');
     if (versionName) {
@@ -115,7 +116,7 @@ export default class ExtensionPlatform {
     queryString = null,
     keepWindowOpen = false,
   ) {
-    let extensionURL = extension.runtime.getURL('home.html');
+    let extensionURL = browser.runtime.getURL('home.html');
 
     if (route) {
       extensionURL += `#${route}`;
@@ -136,9 +137,9 @@ export default class ExtensionPlatform {
 
   getPlatformInfo(cb) {
     try {
-      extension.runtime.getPlatformInfo((platform) => {
+      const platformInfo = browser.runtime.getPlatformInfo();
-        cb(null, platform);
+      cb(platformInfo);
-      });
+      return;
     } catch (e) {
       cb(e);
       // eslint-disable-next-line no-useless-return
@@ -163,12 +164,12 @@ export default class ExtensionPlatform {
   }
 
   addOnRemovedListener(listener) {
-    extension.windows.onRemoved.addListener(listener);
+    browser.windows.onRemoved.addListener(listener);
   }
 
   getAllWindows() {
     return new Promise((resolve, reject) => {
-      extension.windows.getAll((windows) => {
+      browser.windows.getAll().then((windows) => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -180,7 +181,7 @@ export default class ExtensionPlatform {
 
   getActiveTabs() {
     return new Promise((resolve, reject) => {
-      extension.tabs.query({ active: true }, (tabs) => {
+      browser.tabs.query({ active: true }).then((tabs) => {
         const error = checkForError();
         if (error) {
           return reject(error);
@@ -192,7 +193,7 @@ export default class ExtensionPlatform {
 
   currentTab() {
     return new Promise((resolve, reject) => {
-      extension.tabs.getCurrent((tab) => {
+      browser.tabs.getCurrent().then((tab) => {
         const err = checkForError();
         if (err) {
           reject(err);
@@ -205,7 +206,7 @@ export default class ExtensionPlatform {
 
   switchToTab(tabId) {
     return new Promise((resolve, reject) => {
-      extension.tabs.update(tabId, { highlighted: true }, (tab) => {
+      browser.tabs.update(tabId, { highlighted: true }).then((tab) => {
         const err = checkForError();
         if (err) {
           reject(err);
@@ -218,7 +219,7 @@ export default class ExtensionPlatform {
 
   closeTab(tabId) {
     return new Promise((resolve, reject) => {
-      extension.tabs.remove(tabId, () => {
+      browser.tabs.remove(tabId).then(() => {
         const err = checkForError();
         if (err) {
           reject(err);
@@ -252,23 +253,23 @@ export default class ExtensionPlatform {
   }
 
   _showNotification(title, message, url) {
-    extension.notifications.create(url, {
+    browser.notifications.create(url, {
       type: 'basic',
       title,
-      iconUrl: extension.extension.getURL('../../images/icon-64.png'),
+      iconUrl: browser.extension.getURL('../../images/icon-64.png'),
       message,
     });
   }
 
   _subscribeToNotificationClicked() {
-    if (!extension.notifications.onClicked.hasListener(this._viewOnEtherscan)) {
+    if (!browser.notifications.onClicked.hasListener(this._viewOnEtherscan)) {
-      extension.notifications.onClicked.addListener(this._viewOnEtherscan);
+      browser.notifications.onClicked.addListener(this._viewOnEtherscan);
     }
   }
 
   _viewOnEtherscan(url) {
     if (url.startsWith('https://')) {
-      extension.tabs.create({ url });
+      browser.tabs.create({ url });
     }
   }
 }

app/scripts/platforms/extension.test.js

@@ -1,7 +1,7 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import ExtensionPlatform from './extension';
 
-jest.mock('extensionizer', () => {
+jest.mock('webextension-polyfill', () => {
   return {
     runtime: {
       getManifest: jest.fn(),
@@ -17,7 +17,7 @@ describe('extension platform', () => {
 
   describe('getVersion', () => {
     it('should return non-prerelease version', () => {
-      extension.runtime.getManifest.mockReturnValue({ version: '1.2.3' });
+      browser.runtime.getManifest.mockReturnValue({ version: '1.2.3' });
       const extensionPlatform = new ExtensionPlatform();
 
       const version = extensionPlatform.getVersion();
@@ -26,7 +26,7 @@ describe('extension platform', () => {
     });
 
     it('should return SemVer-formatted version for Chrome style manifest of prerelease', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3.0',
         version_name: '1.2.3-beta.0',
       });
@@ -38,7 +38,7 @@ describe('extension platform', () => {
     });
 
     it('should return SemVer-formatted version for Firefox style manifest of prerelease', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3beta0',
       });
       const extensionPlatform = new ExtensionPlatform();
@@ -49,7 +49,7 @@ describe('extension platform', () => {
     });
 
     it('should throw error if build version is missing from Chrome style prerelease manifest', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3',
         version_name: '1.2.3-beta.0',
       });
@@ -61,7 +61,7 @@ describe('extension platform', () => {
     });
 
     it('should throw error if version name is missing from Chrome style prerelease manifest', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3.0',
       });
       const extensionPlatform = new ExtensionPlatform();
@@ -70,7 +70,7 @@ describe('extension platform', () => {
     });
 
     it('should throw error if version includes four parts in a Firefox style manifest', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3.4',
       });
       const extensionPlatform = new ExtensionPlatform();
@@ -79,7 +79,7 @@ describe('extension platform', () => {
     });
 
     it('should throw error if build version is missing from Firefox style prerelease manifest', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.3beta',
       });
       const extensionPlatform = new ExtensionPlatform();
@@ -90,7 +90,7 @@ describe('extension platform', () => {
     });
 
     it('should throw error if patch is missing from Firefox style prerelease manifest', () => {
-      extension.runtime.getManifest.mockReturnValue({
+      browser.runtime.getManifest.mockReturnValue({
         version: '1.2.beta0',
       });
       const extensionPlatform = new ExtensionPlatform();

app/scripts/ui.js

@@ -5,7 +5,7 @@ import '@formatjs/intl-relativetimeformat/polyfill';
 import 'react-devtools';
 
 import PortStream from 'extension-port-stream';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 
 import Eth from 'ethjs';
 import EthQuery from 'eth-query';
@@ -31,7 +31,7 @@ async function start() {
   const windowType = getEnvironmentType();
 
   // setup stream to background
-  const extensionPort = extension.runtime.connect({ name: windowType });
+  const extensionPort = browser.runtime.connect({ name: windowType });
   const connectionStream = new PortStream(extensionPort);
 
   const activeTab = await queryCurrentActiveTab(windowType);
@@ -72,7 +72,7 @@ async function queryCurrentActiveTab(windowType) {
       return;
     }
 
-    extension.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
       const [activeTab] = tabs;
       const { id, title, url } = activeTab;
       const { origin, protocol } = url ? new URL(url) : {};

lavamoat/browserify/beta/policy.json

@@ -2240,12 +2240,6 @@
         "stream-browserify": true
       }
     },
-    "extensionizer": {
-      "globals": {
-        "browser": true,
-        "chrome": true
-      }
-    },
     "faker": {
       "globals": {
         "console.error": true,
@@ -5189,6 +5183,15 @@
         "utf8": true
       }
     },
+    "webextension-polyfill": {
+      "globals": {
+        "browser": true,
+        "chrome": true,
+        "console.error": true,
+        "console.warn": true,
+        "define": true
+      }
+    },
     "webrtcsupport": {
       "globals": {
         "AudioContext": true,

lavamoat/browserify/flask/policy.json

@@ -2259,12 +2259,6 @@
         "stream-browserify": true
       }
     },
-    "extensionizer": {
-      "globals": {
-        "browser": true,
-        "chrome": true
-      }
-    },
     "faker": {
       "globals": {
         "console.error": true,
@@ -5208,6 +5202,15 @@
         "utf8": true
       }
     },
+    "webextension-polyfill": {
+      "globals": {
+        "browser": true,
+        "chrome": true,
+        "console.error": true,
+        "console.warn": true,
+        "define": true
+      }
+    },
     "webrtcsupport": {
       "globals": {
         "AudioContext": true,

lavamoat/browserify/main/policy.json

@@ -2240,12 +2240,6 @@
         "stream-browserify": true
       }
     },
-    "extensionizer": {
-      "globals": {
-        "browser": true,
-        "chrome": true
-      }
-    },
     "faker": {
       "globals": {
         "console.error": true,
@@ -5189,6 +5183,15 @@
         "utf8": true
       }
     },
+    "webextension-polyfill": {
+      "globals": {
+        "browser": true,
+        "chrome": true,
+        "console.error": true,
+        "console.warn": true,
+        "define": true
+      }
+    },
     "webrtcsupport": {
       "globals": {
         "AudioContext": true,

package.json

@@ -168,7 +168,6 @@
     "ethjs-ens": "^2.0.0",
     "ethjs-query": "^0.3.4",
     "extension-port-stream": "^2.0.0",
-    "extensionizer": "^1.0.1",
     "fast-json-patch": "^2.2.1",
     "fast-safe-stringify": "^2.0.7",
     "fuse.js": "^3.2.0",
@@ -363,6 +362,7 @@
     "vinyl-source-stream": "^2.0.0",
     "vinyl-sourcemaps-apply": "^0.2.1",
     "watchify": "^4.0.0",
+    "webextension-polyfill": "^0.8.0",
     "webpack": "^4.41.6",
     "yargs": "^17.0.1",
     "yarn-deduplicate": "^3.1.0"

test/helpers/setup-helper.js

@@ -6,6 +6,8 @@ import { JSDOM } from 'jsdom';
 
 process.env.IN_TEST = true;
 
+global.chrome = { runtime: { id: 'testid' } };
+
 nock.disableNetConnect();
 nock.enableNetConnect('localhost');
 

ui/__mocks__/webextension-polyfill.js

@@ -0,0 +1,3 @@
+module.exports = {
+  runtime: {},
+};

ui/components/app/menu-bar/menu-bar.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import SelectedAccount from '../selected-account';
@@ -26,7 +26,7 @@ export default function MenuBar() {
   const showStatus =
     getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
     origin &&
-    origin !== extension.runtime.id;
+    origin !== browser.runtime.id;
 
   return (
     <div className="menu-bar">

ui/pages/first-time-flow/onboarding-initiator-util.js

@@ -1,9 +1,9 @@
-import extension from 'extensionizer';
+import browser from 'webextension-polyfill';
 import log from 'loglevel';
 
 const returnToOnboardingInitiatorTab = async (onboardingInitiator) => {
   const tab = await new Promise((resolve) => {
-    extension.tabs.update(
+    browser.tabs.update(
       onboardingInitiator.tabId,
       { active: true },
       // eslint-disable-next-line no-shadow
@@ -12,8 +12,8 @@ const returnToOnboardingInitiatorTab = async (onboardingInitiator) => {
           resolve(tab);
         } else {
           // silence console message about unchecked error
-          if (extension.runtime.lastError) {
+          if (browser.runtime.lastError) {
-            log.debug(extension.runtime.lastError);
+            log.debug(browser.runtime.lastError);
           }
           resolve();
         }
@@ -24,7 +24,7 @@ const returnToOnboardingInitiatorTab = async (onboardingInitiator) => {
   if (tab) {
     window.close();
   } else {
-    // this case can happen if the tab was closed since being checked with `extension.tabs.get`
+    // this case can happen if the tab was closed since being checked with `browser.tabs.get`
     log.warn(
       `Setting current tab to onboarding initiator has failed; falling back to redirect`,
     );
@@ -35,13 +35,13 @@ const returnToOnboardingInitiatorTab = async (onboardingInitiator) => {
 export const returnToOnboardingInitiator = async (onboardingInitiator) => {
   const tab = await new Promise((resolve) => {
     // eslint-disable-next-line no-shadow
-    extension.tabs.get(onboardingInitiator.tabId, (tab) => {
+    browser.tabs.get(onboardingInitiator.tabId, (tab) => {
       if (tab) {
         resolve(tab);
       } else {
         // silence console message about unchecked error
-        if (extension.runtime.lastError) {
+        if (browser.runtime.lastError) {
-          log.debug(extension.runtime.lastError);
+          log.debug(browser.runtime.lastError);
         }
         resolve();
       }

yarn.lock

@@ -12040,11 +12040,6 @@ extension-port-stream@^2.0.0, extension-port-stream@^2.0.1:
   dependencies:
     webextension-polyfill-ts "^0.22.0"
 
-extensionizer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/extensionizer/-/extensionizer-1.0.1.tgz#504544239a7610ba8404b15c1832091a37768d09"
-  integrity sha512-UES5CSOYqshNsWFrpORcQR47+ph6UvQK25mguD44IyeMemt40CG+LTZrH1PgpGUHX3w7ACtNQnmM0J+qEe8G0Q==
-
 external-editor@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
@@ -27761,6 +27756,11 @@ webextension-polyfill@^0.7.0:
   resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz#0df1120ff0266056319ce1a622b09ad8d4a56505"
   integrity sha512-su48BkMLxqzTTvPSE1eWxKToPS2Tv5DLGxKexLEVpwFd6Po6N8hhSLIvG6acPAg7qERoEaDL+Y5HQJeJeml5Aw==
 
+webextension-polyfill@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.8.0.tgz#f80e9f4b7f81820c420abd6ffbebfa838c60e041"
+  integrity sha512-a19+DzlT6Kp9/UI+mF9XQopeZ+n2ussjhxHJ4/pmIGge9ijCDz7Gn93mNnjpZAk95T4Tae8iHZ6sSf869txqiQ==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"