Feat/firefox

build/paths.js

@@ -14,6 +14,7 @@ module.exports = {
  backgroundHtml: rootResolve('src/background/background.html'),
  offscreenHtml: rootResolve('src/offscreen/offscreen.html'),
  dist: rootResolve('dist'),
+ distMv2: rootResolve('dist-mv2'),
 
  rootResolve,
 };

build/webpack.common.config.js

@@ -21,6 +21,12 @@ const BUILD_GIT_HASH = child_process
  .toString()
  .trim();
 
+// 'chrome-mv2', 'chrome-mv3', 'firefox-mv2', 'firefox-mv3'
+const MANIFEST_TYPE = process.env.MANIFEST_TYPE || 'chrome-mv2';
+const IS_MANIFEST_MV3 = MANIFEST_TYPE.includes('-mv3');
+const FINAL_DIST = IS_MANIFEST_MV3 ? paths.dist : paths.distMv2;
+const IS_FIREFOX = MANIFEST_TYPE.includes('firefox');
+
 const config = {
  entry: {
  background: paths.rootResolve('src/background/index.ts'),
@@ -32,7 +38,7 @@ const config = {
  offscreen: paths.rootResolve('src/offscreen/scripts/offscreen.ts'),
  },
  output: {
- path: paths.dist,
+ path: FINAL_DIST,
  filename: '[name].js',
  publicPath: '/',
  },
@@ -193,25 +199,27 @@ const config = {
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.popupHtml,
- chunks: ['ui'],
+ chunks: ['ui', 'ui-vender'],
  filename: 'popup.html',
  }),
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.notificationHtml,
- chunks: ['ui'],
+ chunks: ['ui', 'ui-vender'],
  filename: 'notification.html',
  }),
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.indexHtml,
- chunks: ['ui'],
+ chunks: ['ui', 'ui-vender'],
  filename: 'index.html',
  }),
  new HtmlWebpackPlugin({
  inject: true,
  template: paths.backgroundHtml,
- chunks: ['background'],
+ chunks: ['background'].concat(
+ IS_FIREFOX ? ['bg-chunk1', 'bg-chunk2', 'bg-chunk3'] : []
+ ),
  filename: 'background.html',
  }),
  new HtmlWebpackPlugin({
@@ -233,45 +241,49 @@ const config = {
  }),
  new CopyPlugin({
  patterns: [
- { from: paths.rootResolve('_raw'), to: paths.rootResolve('dist') },
+ { from: paths.rootResolve('_raw'), to: FINAL_DIST },
  {
- from: process.env.ENABLE_MV3
- ? paths.rootResolve('src/manifest/mv3/manifest.json')
-  : paths.rootResolve('src/manifest/mv2/manifest.json'),
- to: paths.dist,
+ from: paths.rootResolve(
+ `src/manifest/${MANIFEST_TYPE}/manifest.json`
+ ),
+ to: FINAL_DIST,
  },
- process.env.ENABLE_MV3
+ IS_MANIFEST_MV3
  ? {
  from: require.resolve(
  '@trezor/connect-webextension/build/content-script.js'
  ),
- to: paths.rootResolve(
- 'dist/vendor/trezor/trezor-content-script.js'
+ to: path.resolve(
+ FINAL_DIST,
+ './vendor/trezor/trezor-content-script.js'
  ),
  }
  : {
  from: require.resolve(
  '@trezor/connect-web/lib/webextension/trezor-content-script.js'
  ),
- to: paths.rootResolve(
- 'dist/vendor/trezor/trezor-content-script.js'
+ to: path.resolve(
+ FINAL_DIST,
+ './vendor/trezor/trezor-content-script.js'
  ),
  },
- process.env.ENABLE_MV3
+ IS_MANIFEST_MV3
  ? {
  from: require.resolve(
  '@trezor/connect-webextension/build/trezor-connect-webextension.js'
  ),
- to: paths.rootResolve(
- 'dist/vendor/trezor/trezor-connect-webextension.js'
+ to: path.resolve(
+ FINAL_DIST,
+ './vendor/trezor/trezor-connect-webextension.js'
  ),
  }
  : {
  from: require.resolve(
  '@trezor/connect-web/lib/webextension/trezor-usb-permissions.js'
  ),
- to: paths.rootResolve(
- 'dist/vendor/trezor/trezor-usb-permissions.js'
+ to: path.resolve(
+ FINAL_DIST,
+ './vendor/trezor/trezor-usb-permissions.js'
  ),
  },
  ],
@@ -303,6 +315,32 @@ const config = {
  name: 'webextension-polyfill',
  chunks: 'all',
  },
+ ...(IS_FIREFOX && {
+ bgChunk1: {
+ test: /[\\/]node_modules[\\/](@rabby-wallet|ethers|@ethersproject|@chainsafe|@trezor|@safe-global|@walletconnect)[\\/]/,
+ name: 'bg-chunk1',
+ chunks: (chunk) => chunk.name === 'background',
+ minSize: 0,
+ },
+ bgChunk2: {
+ test: /[\\/]node_modules[\\/](@keystonehq|@eth-optimism|@coinbase|gridplus-sdk)[\\/]/,
+ name: 'bg-chunk2',
+ chunks: (chunk) => chunk.name === 'background',
+ minSize: 0,
+ },
+ bgChunk3: {
+ test: /[\\/]node_modules[\\/](@imkey|@onekeyfe|@ethereumjs|viem|@metamask)[\\/]/,
+ name: 'bg-chunk3',
+ chunks: (chunk) => chunk.name === 'background',
+ minSize: 0,
+ },
+ }),
+ uiVender: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'ui-vender',
+ chunks: (chunk) => chunk.name === 'ui',
+ minSize: 0,
+ },
  },
  },
  },

package.json

@@ -8,12 +8,12 @@
  "build:dev:default": "npm run clean && npm run make-theme && cross-env TAILWIND_MODE=watch webpack --progress --env config=dev",
  "build:pro:default": "npm run clean && npm run make-theme && webpack --progress --env config=pro",
  "build:debug:default": "npm run clean && npm run make-theme && webpack --progress --env config=debug",
- "build:dev:mv2": "npm run build:dev:default",
- "build:pro:mv2": "npm run build:pro:default",
- "build:debug:mv2": "npm run build:debug:default",
- "build:dev": "cross-env ENABLE_MV3=true npm run build:dev:default",
- "build:pro": "cross-env ENABLE_MV3=true npm run build:pro:default",
- "build:debug": "cross-env ENABLE_MV3=true npm run build:debug:default",
+ "build:dev:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:dev:default",
+ "build:pro:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:pro:default",
+ "build:debug:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:debug:default",
+ "build:dev": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:dev:default",
+ "build:pro": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:pro:default",
+ "build:debug": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:debug:default",
  "build:sourcemap": "npm run clean && npm run make-theme && webpack --progress --env config=sourcemap",
  "sync-chain": "node ./scripts/sync-support-chain.js",
  "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",

src/background/index.ts

@@ -1,4 +1,4 @@
-import { groupBy } from 'lodash';
+import { groupBy, isNull } from 'lodash';
 import 'reflect-metadata';
 import * as Sentry from '@sentry/browser';
 import browser from 'webextension-polyfill';
@@ -10,6 +10,7 @@ import {
  CHAINS_ENUM,
  EVENTS,
  EVENTS_IN_BG,
+ IS_FIREFOX,
  KEYRING_CATEGORY_MAP,
  KEYRING_TYPE,
 } from 'consts';
@@ -36,7 +37,7 @@ import {
  gasAccountService,
 } from './service';
 import { providerController, walletController } from './controller';
-import { getOriginFromUrl } from '@/utils';
+import { getOriginFromUrl, transformFunctionsToZero } from '@/utils';
 import rpcCache from './utils/rpcCache';
 import eventBus from '@/eventBus';
 import migrateData from '@/migrations';
@@ -268,7 +269,25 @@ browser.runtime.onConnect.addListener((port) => {
  case 'controller':
  default:
  if (data.method) {
- return walletController[data.method].apply(null, data.params);
+ const res = walletController[data.method].apply(
+ null,
+ data.params
+ );
+ if (!IS_FIREFOX) {
+ return res;
+ }
+ if (typeof res?.then === 'function') {
+ return res.then((x) => {
+ if (typeof x !== 'object' || isNull(x)) {
+ return x;
+ }
+ return transformFunctionsToZero(x);
+ });
+ }
+ if (typeof res !== 'object' || isNull(res)) {
+ return res;
+ }
+ return transformFunctionsToZero(res);
  }
  }
  }

src/background/service/contextMenu.ts

@@ -4,6 +4,7 @@ import {
  preferenceService,
  sessionService,
 } from 'background/service';
+import Browser, { Menus, Tabs } from 'webextension-polyfill';
 
 const getTabsOriginList = () => {
  const res: string[] = [];
@@ -27,15 +28,15 @@ export class ContextMenu {
  store = new Set<string>();
 
  constructor() {
- chrome.contextMenus.onClicked.addListener(this.listener);
+ Browser.contextMenus.onClicked.addListener(this.listener);
  }
 
  create(origin: string) {
  if (this.store.has(origin) || !preferenceService.getHasOtherProvider()) {
  return;
  }
 
- chrome.contextMenus.create(
+ Browser.contextMenus.create(
  {
  id: origin,
  title: getContextMenuTitle(origin),
@@ -58,21 +59,21 @@ export class ContextMenu {
  return;
  }
 
- chrome.contextMenus.update(origin, {
+ Browser.contextMenus.update(origin, {
  title: getContextMenuTitle(origin),
  });
  }
  remove(origin: string) {
  if (!this.store.has(origin)) {
  return;
  }
- chrome.contextMenus.remove(origin, () => {
+ Browser.contextMenus.remove(origin).then(() => {
  this.store.delete(origin);
  });
  }
  removeAll() {
  this.store.clear();
- chrome.contextMenus.removeAll();
+ Browser.contextMenus.removeAll();
  }
 
  async sync() {
@@ -97,10 +98,7 @@ export class ContextMenu {
  });
  }
 
- private listener = (
- info: chrome.contextMenus.OnClickData,
- tab?: chrome.tabs.Tab
- ) => {
+ private listener = (info: Menus.OnClickData, tab: Tabs.Tab | undefined) => {
  if (!info.menuItemId) {
  return;
  }

src/background/service/keyring/eth-bitbox02-keyring/bitbox02-offscreen-bridge.ts

@@ -27,7 +27,7 @@ export default class BitBox02OffscreenBridge
  }
 
  init: BitBox02BridgeInterface['init'] = async (hdPath) => {
- chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+ browser.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
  if (
  msg.target === OffscreenCommunicationTarget.extension &&
  msg.event === OffscreenCommunicationEvents.bitbox02DeviceConnect

src/background/service/keyring/eth-lattice-keyring/eth-lattice-keyring.ts

@@ -11,6 +11,7 @@ import {
  KnownOrigins,
  OffscreenCommunicationTarget,
 } from '@/constant/offscreen-communication';
+import Browser from 'webextension-polyfill';
 
 const HD_PATH_BASE = {
  [HDPathType.BIP44]: "m/44'/60'/0'/0/x",
@@ -47,27 +48,12 @@ class LatticeKeyring extends OldLatticeKeyring {
 
  // send a msg to the render process to open lattice connector
  // and collect the credentials
- const creds = await new Promise<{
- deviceID: string;
- password: string;
- endpoint: string;
- }>((resolve, reject) => {
- chrome.runtime.sendMessage(
- {
- target: OffscreenCommunicationTarget.latticeOffscreen,
- params: {
- url,
- },
- },
- (response) => {
- if (response.error) {
- reject(response.error);
- }
-
- resolve(response.result);
- }
- );
- });
+ const creds = await Browser.runtime.sendMessage({
+ target: OffscreenCommunicationTarget.latticeOffscreen,
+ params: {
+ url,
+ },
+ })
 
  return creds;
  } catch (err: any) {

src/background/service/notification.ts

@@ -6,7 +6,6 @@ import * as Sentry from '@sentry/browser';
 import { EthereumProviderError } from 'eth-rpc-errors/dist/classes';
 import { winMgr } from 'background/webapi';
 import {
- CHAINS,
  KEYRING_CATEGORY_MAP,
  IS_LINUX,
  IS_VIVALDI,
@@ -17,7 +16,6 @@ import {
 import transactionHistoryService from './transactionHistory';
 import preferenceService from './preference';
 import stats from '@/stats';
-import BigNumber from 'bignumber.js';
 import { findChain } from '@/utils/chain';
 import { isManifestV3 } from '@/utils/env';
 
@@ -134,7 +132,7 @@ class NotificationService extends Events {
  if (IS_VIVALDI) return;
  if (
  IS_CHROME &&
- winId === chrome.windows.WINDOW_ID_NONE &&
+ winId === browser.windows.WINDOW_ID_NONE &&
  (IS_LINUX || IS_WINDOWS)
  ) {
  // When sign on Linux or Windows, will focus on -1 first then focus on sign window