Merge pull request #38227 from MetaMask/release/13.10.3

release: 13.10.3

Author: gauthierpetetin

CHANGELOG.md

@@ -7,11 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [13.10.3]
+
+### Fixed
+
+- Feature flags sidepanel context menu (#38220)
+
 ## [13.10.2]
 
 ### Fixed
 
-- fixed entry modal closed error (#38188)
+- Fixes entry modal closed error (#38188)
 
 ## [13.10.1]
 
@@ -1233,7 +1239,8 @@ authorized by the user.` error until the user fully revoked dapp
 - This changelog was split off with 12.22.0
 - All older changes can be found in [docs/CHANGELOG_older.md](https://github.com/MetaMask/metamask-extension/blob/main/docs/CHANGELOG_older.md)
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v13.10.2...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v13.10.3...HEAD
+[13.10.3]: https://github.com/MetaMask/metamask-extension/compare/v13.10.2...v13.10.3
 [13.10.2]: https://github.com/MetaMask/metamask-extension/compare/v13.10.1...v13.10.2
 [13.10.1]: https://github.com/MetaMask/metamask-extension/compare/v13.10.0...v13.10.1
 [13.10.0]: https://github.com/MetaMask/metamask-extension/compare/v13.9.0...v13.10.0

app/scripts/background.js

@@ -55,6 +55,7 @@ import {
   CorruptionHandler,
   hasVault,
 } from './lib/state-corruption/state-corruption-recovery';
+import { initSidePanelContextMenu } from './lib/sidepanel-context-menu';
 import {
   backedUpStateKeys,
   PersistenceManager,
@@ -175,7 +176,10 @@ const ONE_SECOND_IN_MILLISECONDS = 1_000;
 // Timeout for initializing phishing warning page.
 const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;
 
-lazyListener.once('runtime', 'onInstalled').then(handleOnInstalled);
+lazyListener.once('runtime', 'onInstalled').then((details) => {
+  handleOnInstalled(details);
+  handleSidePanelContextMenu();
+});
 
 /**
  * This deferred Promise is used to track whether initialization has finished.
@@ -1672,26 +1676,14 @@ function onInstall() {
     platform.openExtensionInBrowser();
   }
 }
-// Only register sidepanel context menu for browsers that support it (Chrome/Edge/Brave)
-// and when the feature flag is enabled
-if (
-  browser.contextMenus &&
-  browser.sidePanel &&
-  process.env.IS_SIDEPANEL?.toString() === 'true'
-) {
-  browser.runtime.onInstalled.addListener(() => {
-    browser.contextMenus.create({
-      id: 'openSidePanel',
-      title: 'MetaMask Sidepanel',
-      contexts: ['all'],
-    });
-  });
-  browser.contextMenus.onClicked.addListener((info, tab) => {
-    if (info.menuItemId === 'openSidePanel') {
-      // This will open the panel in all the pages on the current window.
-      browser.sidePanel.open({ windowId: tab.windowId });
-    }
-  });
+
+/**
+ * Handles the onInstalled event for sidepanel context menu creation.
+ * This is registered via lazyListener to catch the event at module load time.
+ */
+async function handleSidePanelContextMenu() {
+  await isInitialized;
+  await initSidePanelContextMenu(controller);
 }
 
 // // On first install, open a new tab with MetaMask

app/scripts/lib/sidepanel-context-menu.ts

@@ -0,0 +1,63 @@
+import browser from 'webextension-polyfill';
+import type { RemoteFeatureFlagControllerState } from '@metamask/remote-feature-flag-controller';
+import type MetamaskController from '../metamask-controller';
+
+const MENU_ITEM_ID = 'openSidePanel';
+
+// Type augmentation for sidePanel API (not yet in webextension-polyfill types)
+type BrowserWithSidePanel = typeof browser & {
+  sidePanel?: {
+    open: (options: { windowId: number }) => Promise<void>;
+  };
+};
+
+export async function initSidePanelContextMenu(
+  controller: MetamaskController,
+): Promise<void> {
+  const browserWithSidePanel = browser as BrowserWithSidePanel;
+
+  if (
+    !browser.contextMenus ||
+    !browserWithSidePanel.sidePanel ||
+    process.env.IS_SIDEPANEL?.toString() !== 'true'
+  ) {
+    return;
+  }
+
+  const isEnabled = (state?: {
+    remoteFeatureFlags?: { extensionUxSidepanel?: boolean };
+  }) => state?.remoteFeatureFlags?.extensionUxSidepanel !== false;
+
+  const createMenu = () => {
+    browser.contextMenus.create({
+      id: MENU_ITEM_ID,
+      title: 'MetaMask Sidepanel',
+      contexts: ['all'],
+    });
+  };
+
+  const removeMenu = () => {
+    browser.contextMenus.remove(MENU_ITEM_ID);
+  };
+
+  if (isEnabled(controller?.remoteFeatureFlagController?.state)) {
+    createMenu();
+  }
+
+  browser.contextMenus.onClicked.addListener((info, tab) => {
+    if (info.menuItemId === MENU_ITEM_ID && tab?.windowId) {
+      browserWithSidePanel.sidePanel?.open({ windowId: tab.windowId });
+    }
+  });
+
+  controller?.controllerMessenger?.subscribe(
+    'RemoteFeatureFlagController:stateChange',
+    (state: RemoteFeatureFlagControllerState) => {
+      if (isEnabled(state)) {
+        createMenu();
+      } else {
+        removeMenu();
+      }
+    },
+  );
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "13.10.2",
+  "version": "13.10.3",
   "private": true,
   "repository": {
     "type": "git",