fix: feature flag sidepanel context menu cp-13.10.3 (#38220)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
fixes #38222

Wraps the sidepanel context menu configuration with the remote feature
flag

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38220?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: fix: feature flag sidepanel context menu

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Gates the sidepanel context menu behind a remote feature flag and
refactors its setup into a dedicated module initialized after background
startup.
> 
> - **Background**:
>   - **Sidepanel context menu**:
> - Extracted setup to `app/scripts/lib/sidepanel-context-menu.ts` with
`initSidePanelContextMenu(controller)`.
> - Creates/removes `openSidePanel` menu based on `IS_SIDEPANEL` and
`remoteFeatureFlags.extensionUxSidepanel`; opens side panel on click.
> - Subscribes to `RemoteFeatureFlagController:stateChange` to toggle
menu dynamically.
>   - **Initialization**:
> - In `app/scripts/background.js`, register sidepanel context menu via
`lazyListener.once('runtime','onInstalled')`, calling
`handleSidePanelContextMenu()` after `handleOnInstalled`.
> - New `handleSidePanelContextMenu` waits for `isInitialized` then
invokes `initSidePanelContextMenu(controller)`.
>     - Removes prior inline context menu registration logic.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bc69ea7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: NidhiKJha <[email protected]>

Author: n3ps

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,
@@ -180,7 +181,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.
@@ -1657,26 +1661,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);
 }
 
 /**

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();
+      }
+    },
+  );
+}