feat(27255): allow local modification for remote feature flags

.gitignore

@@ -52,6 +52,9 @@ notes.txt
 .metamaskrc
 .metamaskprodrc
 
+# Customized manifest configuration
+.manifest-overrides.json
+
 # Test results
 test-results/
 

.metamaskrc.dist

@@ -50,3 +50,13 @@ BLOCKAID_PUBLIC_KEY=
 ; API key used in Etherscan requests to prevent rate limiting.
 ; Only applies to Mainnet and Sepolia.
 ; ETHERSCAN_API_KEY=
+
+; A JSON config file that can be used to override the default manifest values.
+; e.g., `.manifest-overrides.json` where the contents might be something like:
+; {
+;  "_flags": {
+;    "remoteFeatureFlags": { }
+;  }
+; }
+; Note: Properties are shallow merged into the manifest.json file at build time.
+;MANIFEST_OVERRIDES=.manifest-overrides.json

README.md

@@ -56,6 +56,8 @@ If you are not a MetaMask Internal Developer, or are otherwise developing on a f
   - If debugging MetaMetrics, you'll need to add a value for `SEGMENT_WRITE_KEY` [Segment write key](https://segment.com/docs/connections/find-writekey/), see [Developing on MetaMask - Segment](./development/README.md#segment).
   - If debugging unhandled exceptions, you'll need to add a value for `SENTRY_DSN` [Sentry Dsn](https://docs.sentry.io/product/sentry-basics/dsn-explainer/), see [Developing on MetaMask - Sentry](./development/README.md#sentry).
   - Optionally, replace the `PASSWORD` value with your development wallet password to avoid entering it each time you open the app.
+  - If developing with remote feature flags and you want to override the flags in the build process, you can add a `.manifest-overrides.json` file to the root of the project and set `MANIFEST_OVERRIDES=.manifest-overrides.json` in `.metamaskrc` to the path of the file. This file is used to add flags to `manifest.json` build files for the extension. You can also modify the `_flags.remoteFeatureFlags` in `manifest.json` file to tweak the flags after the build process.
+  ```
 - Run `yarn install` to install the dependencies.
 - Build the project to the `./dist/` folder with `yarn dist` (for Chromium-based browsers) or `yarn dist:mv2` (for Firefox)
 

app/scripts/lib/setupSentry.js

@@ -3,8 +3,8 @@ import * as Sentry from '@sentry/browser';
 import { logger } from '@sentry/utils';
 import browser from 'webextension-polyfill';
 import { isManifestV3 } from '../../../shared/modules/mv3.utils';
+import { getManifestFlags } from '../../../shared/lib/manifestFlags';
 import extractEthjsErrorMessage from './extractEthjsErrorMessage';
-import { getManifestFlags } from './manifestFlags';
 import { filterEvents } from './sentry-filter-events';
 
 const projectLogger = createProjectLogger('sentry');

builds.yml

@@ -302,6 +302,8 @@ env:
 
   # Uses yaml anchors to DRY - https://juju.is/docs/sdk/yaml-anchors-and-aliases
   - METAMASK_BUILD_TYPE_DEFAULT: *default
+  # Path to a JSON file that will be used to override the default manifest values.
+  - MANIFEST_OVERRIDES: null
 
   ###
   # Account Abstraction (EIP-4337)

development/build/config.js

@@ -160,4 +160,5 @@ async function getConfig(buildType, environment) {
 
 module.exports = {
   getConfig,
+  fromIniFile,
 };

development/build/manifest.js

@@ -1,4 +1,5 @@
 const { promises: fs } = require('fs');
+const { readFileSync } = require('node:fs');
 const path = require('path');
 const childProcess = require('child_process');
 const { mergeWith, cloneDeep } = require('lodash');
@@ -15,9 +16,35 @@ const { loadBuildTypesConfig } = require('../lib/build-type');
 const { TASKS, ENVIRONMENT } = require('./constants');
 const { createTask, composeSeries } = require('./task');
 const { getEnvironment, getBuildName } = require('./utils');
+const { fromIniFile } = require('./config');
 
 module.exports = createManifestTasks;
 
+async function loadManifestFlags() {
+  const { definitions } = await fromIniFile(
+    path.resolve(__dirname, '..', '..', '.metamaskrc'),
+  );
+  const manifestOverridesPath = definitions.get('MANIFEST_OVERRIDES');
+  // default to undefined so that the manifest plugin can check if it was set
+  let manifestFlags;
+  if (manifestOverridesPath) {
+    try {
+      manifestFlags = await readJson(
+        path.resolve(process.cwd(), manifestOverridesPath),
+      );
+    } catch (error) {
+      // Only throw if error is not ENOENT (file not found) and manifestOverridesPath was provided
+      if (error.code === 'ENOENT') {
+        throw new Error(
+          `Manifest override file not found: ${manifestOverridesPath}`,
+        );
+      }
+    }
+  }
+
+  return manifestFlags;
+}
+
 function createManifestTasks({
   browserPlatforms,
   browserVersionMap,
@@ -28,6 +55,7 @@ function createManifestTasks({
 }) {
   // merge base manifest with per-platform manifests
   const prepPlatforms = async () => {
+    const manifestFlags = await loadManifestFlags();
     return Promise.all(
       browserPlatforms.map(async (platform) => {
         const platformModifications = await readJson(
@@ -47,8 +75,9 @@ function createManifestTasks({
           browserVersionMap[platform],
           await getBuildModifications(buildType, platform),
           customArrayMerge,
+          // Only include _flags if manifestFlags has content
+          manifestFlags && { _flags: manifestFlags },
         );
-
         modifyNameAndDescForNonProd(result);
 
         const dir = path.join('.', 'dist', platform);
@@ -160,7 +189,7 @@ function createManifestTasks({
 
 // helper for reading and deserializing json from fs
 async function readJson(file) {
-  return JSON.parse(await fs.readFile(file, 'utf8'));
+  return JSON.parse(await readFileSync(file, 'utf8'));
 }
 
 // helper for serializing and writing json to fs

development/lib/get-manifest-flag.ts

@@ -6,7 +6,7 @@ import { exec as callbackExec } from 'node:child_process';
 import { hasProperty } from '@metamask/utils';
 import { merge } from 'lodash';
 
-import type { ManifestFlags } from '../../app/scripts/lib/manifestFlags';
+import type { ManifestFlags } from '../../shared/lib/manifestFlags';
 
 const exec = promisify(callbackExec);
 const PR_BODY_FILEPATH = path.resolve(

development/webpack/test/plugins.ManifestPlugin.test.ts

@@ -232,7 +232,7 @@ describe('ManifestPlugin', () => {
       function runTest(baseManifest: Combination<typeof manifestMatrix>) {
         const manifest = baseManifest as unknown as chrome.runtime.Manifest;
         const hasTabsPermission = (manifest.permissions || []).includes('tabs');
-        const transform = transformManifest(args);
+        const transform = transformManifest(args, false);
 
         if (args.test && hasTabsPermission) {
           it("throws in test mode when manifest already contains 'tabs' permission", () => {
@@ -281,4 +281,67 @@ describe('ManifestPlugin', () => {
       }
     }
   });
+
+  describe('manifest flags in development mode', () => {
+    const testManifest = {} as chrome.runtime.Manifest;
+    const mockFlags = { remoteFeatureFlags: { testFlag: true } };
+    const manifestOverridesPath = 'testManifestOverridesPath.json';
+
+    it('adds manifest flags in development mode with path provided', () => {
+      const transform = transformManifest(
+        { lockdown: true, test: false },
+        true,
+        manifestOverridesPath,
+      );
+      assert(transform, 'transform should be truthy');
+
+      // Mock fs.readFileSync
+      const fs = require('fs');
+      const originalReadFileSync = fs.readFileSync;
+      fs.readFileSync = () => JSON.stringify(mockFlags);
+
+      try {
+        const transformed = transform(testManifest, 'chrome');
+        assert.deepStrictEqual(
+          transformed._flags,
+          mockFlags,
+          'manifest should have flags in development mode',
+        );
+      } finally {
+        // Restore original readFileSync
+        fs.readFileSync = originalReadFileSync;
+      }
+    });
+
+    it('handles missing manifest flags file with path provided', () => {
+      const transform = transformManifest(
+        { lockdown: true, test: false },
+        true,
+        manifestOverridesPath,
+      );
+      assert(transform, 'transform should be truthy');
+
+      // Mock fs.readFileSync to throw ENOENT
+      const fs = require('node:fs');
+      const originalReadFileSync = fs.readFileSync;
+      fs.readFileSync = () => {
+        const error = new Error('File not found') as NodeJS.ErrnoException;
+        error.code = 'ENOENT';
+        throw error;
+      };
+
+      try {
+        assert.throws(
+          () => transform(testManifest, 'chrome'),
+          {
+            message: `Manifest override file not found: ${manifestOverridesPath}`,
+          },
+          'should throw when manifest override file is not found',
+        );
+      } finally {
+        // Restore original readFileSync
+        fs.readFileSync = originalReadFileSync;
+      }
+    });
+  });
 });

development/webpack/test/webpack.config.test.ts

@@ -231,7 +231,7 @@ ${Object.entries(env)
     assert.deepStrictEqual(manifestPlugin.options.description, null);
     assert.deepStrictEqual(manifestPlugin.options.zip, true);
     assert(manifestPlugin.options.zipOptions, 'Zip options should be present');
-    assert.strictEqual(manifestPlugin.options.transform, undefined);
+    assert.deepStrictEqual(manifestPlugin.options.transform, undefined);
 
     const progressPlugin = instance.options.plugins.find(
       (plugin) => plugin && plugin.constructor.name === 'ProgressPlugin',

development/webpack/utils/plugins/ManifestPlugin/helpers.ts

@@ -9,11 +9,17 @@
  * @param args
  * @param args.lockdown
  * @param args.test
+ * @param isDevelopment
+ * @param manifestOverridesPath
  * @returns a function that will transform the manifest JSON object
  * @throws an error if the manifest already contains the "tabs" permission and
  * `test` is `true`
  */
-export function transformManifest(args: { lockdown: boolean; test: boolean }) {
+export function transformManifest(
+  args: { lockdown: boolean; test: boolean },
+  isDevelopment: boolean,
+  manifestOverridesPath?: string,
+) {
   const transforms: ((manifest: chrome.runtime.Manifest) => void)[] = [];
 
   function removeLockdown(browserManifest: chrome.runtime.Manifest) {
@@ -29,6 +35,48 @@ export function transformManifest(args: { lockdown: boolean; test: boolean }) {
     transforms.push(removeLockdown);
   }
 
+  /**
+   * This function sets predefined flags in the manifest's _flags property
+   * that are stored in the .manifest-flags.json file.
+   *
+   * @param browserManifest - The Chrome extension manifest object to modify
+   */
+  function addManifestFlags(browserManifest: chrome.runtime.Manifest) {
+    let manifestFlags;
+
+    if (manifestOverridesPath) {
+      try {
+        const fs = require('node:fs');
+        const path = require('node:path');
+        const manifestFlagsContent = fs.readFileSync(
+          path.resolve(process.cwd(), manifestOverridesPath),
+          'utf8',
+        );
+        manifestFlags = JSON.parse(manifestFlagsContent);
+      } catch (error: unknown) {
+        if (
+          error instanceof Error &&
+          'code' in error &&
+          error.code === 'ENOENT'
+        ) {
+          // Only throw if ENOENT and manifestOverridesPath was provided
+          throw new Error(
+            `Manifest override file not found: ${manifestOverridesPath}`,
+          );
+        }
+      }
+    }
+
+    if (manifestFlags) {
+      browserManifest._flags = manifestFlags;
+    }
+  }
+
+  if (isDevelopment) {
+    // Add manifest flags only for development builds
+    transforms.push(addManifestFlags);
+  }
+
   function addTabsPermission(browserManifest: chrome.runtime.Manifest) {
     if (browserManifest.permissions) {
       if (browserManifest.permissions.includes('tabs')) {

development/webpack/webpack.config.ts

@@ -131,7 +131,11 @@
     version: version.version,
     versionName: version.versionName,
     browsers: args.browser,
-    transform: transformManifest(args),
+    transform: transformManifest(
+      args,
+      isDevelopment,
+      variables.get('MANIFEST_OVERRIDES'),
+    ),
     zip: args.zip,
     ...(args.zip
       ? {

app/scripts/lib/manifestFlags.ts → shared/lib/manifestFlags.ts

@@ -60,6 +60,18 @@ export type ManifestFlags = {
      */
     forceEnable?: boolean;
   };
+  /**
+   * Feature flags to control business logic behavior
+   */
+  remoteFeatureFlags?: {
+    /**
+     * A test remote featureflag for threshold
+     */
+    testFlagForThreshold: {
+      name: string;
+      value: string;
+    };
+  };
 };
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- you can't extend a type, we want this to be an interface

test/e2e/constants.ts

@@ -90,3 +90,21 @@ export enum ACCOUNT_TYPE {
 /* Meta metricsId generated by generateMetaMetricsId */
 export const MOCK_META_METRICS_ID =
   '0x86bacb9b2bf9a7e8d2b147eadb95ac9aaa26842327cd24afc8bd4b3c1d136420';
+
+/* Mock remote feature flags response */
+export const MOCK_REMOTE_FEATURE_FLAGS_RESPONSE = {
+  feature1: true,
+  feature2: false,
+  feature3: {
+    name: 'groupC',
+    value: 'valueC',
+  },
+};
+
+/* Mock customized remote feature flags response*/
+export const MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS = {
+  feature3: {
+    name: 'groupA',
+    value: 'valueA',
+  },
+};

test/e2e/page-objects/pages/developer-options-page.ts

@@ -1,4 +1,9 @@
+import { strict as assert } from 'assert';
 import { Driver } from '../../webdriver/driver';
+import {
+  MOCK_REMOTE_FEATURE_FLAGS_RESPONSE,
+  MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+} from '../../constants';
 
 class DevelopOptions {
   private readonly driver: Driver;
@@ -12,6 +17,9 @@ class DevelopOptions {
     css: 'h4',
   };
 
+  private readonly developerOptionsRemoteFeatureFlagsState: string =
+    '[data-testid="developer-options-remote-feature-flags"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -33,6 +41,21 @@ class DevelopOptions {
     console.log('Generate a page crash in Developer option page');
     await this.driver.clickElement(this.generatePageCrashButton);
   }
+
+  async validateRemoteFeatureFlagState(): Promise<void> {
+    console.log('Validate remote feature flags state in Developer option page');
+    const element = await this.driver.findElement(
+      this.developerOptionsRemoteFeatureFlagsState,
+    );
+    const remoteFeatureFlagsState = await element.getText();
+    assert.equal(
+      remoteFeatureFlagsState,
+      JSON.stringify({
+        ...MOCK_REMOTE_FEATURE_FLAGS_RESPONSE,
+        ...MOCK_CUSTOMIZED_REMOTE_FEATURE_FLAGS,
+      }),
+    );
+  }
 }
 
 export default DevelopOptions;

test/e2e/set-manifest-flags.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import { merge } from 'lodash';
-import { ManifestFlags } from '../../app/scripts/lib/manifestFlags';
+import { ManifestFlags } from '../../shared/lib/manifestFlags';
 import { fetchManifestFlagsFromPRAndGit } from '../../development/lib/get-manifest-flag';
 
 export const folder = `dist/${process.env.SELENIUM_BROWSER}`;