#7228: Add support for sidePanel in the MV3 build

.eslintrc.js

@@ -21,6 +21,7 @@ const restrictedZones = [
   // These can be imported from anywhere
   except: [
     `../${exporter}/messenger`,
+    `../${exporter}/sidePanel/messenger`,
     `../${exporter}/types.ts`,
     // `../${exporter}/**/*Types.ts`, // TODO: Globs don't seem to work
     `../${exporter}/pageEditor/types.ts`,

jest.config.js

@@ -21,7 +21,7 @@ const config = {
   modulePaths: ["/src"],
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "yaml", "yml", "json"],
   testPathIgnorePatterns: ["<rootDir>/selenium/"],
-  modulePathIgnorePatterns: ["<rootDir>/headers.json"],
+  modulePathIgnorePatterns: ["<rootDir>/headers.json", "<rootDir>/dist/"],
   transform: {
     "^.+\\.[jt]sx?$": "@swc/jest",
     "^.+\\.mjs$": "@swc/jest",

knip.mjs

@@ -26,6 +26,8 @@ const knipConfig = {
     "scripts/manifest.mjs",
     // Content script entry point, init() is dynamically imported in src/contentScript/contentScript.ts
     "src/contentScript/contentScriptCore.ts",
+    // Type-only strictNullChecks helper
+    "src/types/typeOnlyMessengerRegistration.ts",
   ],
   project: ["src/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
   // https://knip.dev/guides/handling-issues#mocks-and-other-implicit-imports

scripts/manifest.mjs

@@ -51,6 +51,16 @@ function updateManifestToV3(manifestV2) {
   const { permissions, origins } = normalizeManifestPermissions(manifest);
   manifest.permissions = [...permissions, "scripting"];
   manifest.host_permissions = origins;
+  // Sidebar Panel open() is only available in Chrome 116+
+  // https://developer.chrome.com/docs/extensions/reference/api/sidePanel#method-open
+  manifest.minimum_chrome_version = "116.0";
+
+  // Add sidePanel
+  manifest.permissions.push("sidePanel");
+
+  manifest.side_panel = {
+    default_path: "sidebar.html",
+  };
 
   // Update format
   manifest.web_accessible_resources = [

src/background/background.ts

@@ -46,13 +46,15 @@ import { initLogSweep } from "@/telemetry/logging";
 import { initModUpdater } from "@/background/modUpdater";
 import { initRuntimeLogging } from "@/development/runtimeLogging";
 import initWalkthroughModalTrigger from "@/background/walkthroughModalTrigger";
+import { initSidePanel } from "./sidePanel";
 
 void initLocator();
 void initMessengerLogging();
 void initRuntimeLogging();
 registerMessenger();
 registerExternalMessenger();
-initBrowserAction();
+void initBrowserAction();
+void initSidePanel();
 initInstaller();
 void initNavigation();
 initExecutor();

src/background/browserAction.ts

@@ -16,17 +16,52 @@
  */
 
 import { ensureContentScript } from "@/background/contentScript";
-import { rehydrateSidebar } from "@/contentScript/messenger/api";
+import { updateSidebar } from "@/contentScript/messenger/api";
 import webextAlert from "./webextAlert";
-import { browserAction, type Tab } from "@/mv3/api";
-import { executeScript, isScriptableUrl } from "webext-content-scripts";
+import { browserAction, isMV3, type Tab } from "@/mv3/api";
+import { executeScript } from "webext-content-scripts";
 import { memoizeUntilSettled } from "@/utils/promiseUtils";
-import { getExtensionConsoleUrl } from "@/utils/extensionUtils";
-import {
-  DISPLAY_REASON_EXTENSION_CONSOLE,
-  DISPLAY_REASON_RESTRICTED_URL,
-} from "@/tinyPages/restrictedUrlPopupConstants";
+import { openSidePanel } from "@/mv3/sidePanelMigration";
 import { setActionPopup } from "webext-tools";
+import { getReasonByUrl } from "@/tinyPages/restrictedUrlPopupUtils";
+
+/**
+ * Show a popover on restricted URLs because we're unable to inject content into the page. Previously we'd open
+ * the Extension Console, but that was confusing because the action was inconsistent with how the button behaves
+ * other pages.
+ * @param tabUrl the url of the tab, or undefined if not accessible
+ */
+function getPopoverUrl(tabUrl: string | undefined): string | null {
+  const popoverUrl = browser.runtime.getURL("restrictedUrlPopup.html");
+  const reason = getReasonByUrl(tabUrl ?? "");
+
+  if (reason) {
+    return `${popoverUrl}?reason=${reason}`;
+  }
+
+  // The popup is disabled, and the extension will receive browserAction.onClicked events.
+  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup#popup
+  return null;
+}
+
+export default async function initBrowserAction(): Promise<void> {
+  if (!isMV3()) {
+    initBrowserActionMv2();
+    return;
+  }
+
+  void chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: false });
+
+  // Disable by default, so that it can be enabled on a per-tab basis.
+  // Without this, the sidePanel remains open as the user changes tabs
+  void chrome.sidePanel.setOptions({
+    enabled: false,
+  });
+
+  browserAction.onClicked.addListener(async (tab) => {
+    await openSidePanel(tab.id);
+  });
+}
 
 const ERR_UNABLE_TO_OPEN =
   "PixieBrix was unable to open the Sidebar. Try refreshing the page.";
@@ -53,11 +88,13 @@ async function _toggleSidebar(tabId: number, tabUrl: string): Promise<void> {
     runAt: "document_end",
   });
 
-  // Chrome adds automatically at document_idle, so it might not be ready yet when the user click the browser action
-  const contentScriptPromise = ensureContentScript({
+  const contentScriptTarget = {
     tabId,
     frameId: TOP_LEVEL_FRAME_ID,
-  });
+  } as const;
+
+  // Chrome adds automatically at document_idle, so it might not be ready yet when the user click the browser action
+  const contentScriptPromise = ensureContentScript(contentScriptTarget);
 
   try {
     await sidebarTogglePromise;
@@ -70,9 +107,7 @@ async function _toggleSidebar(tabId: number, tabUrl: string): Promise<void> {
   // Avoid showing any alerts or notifications: further messaging can appear in the sidebar itself.
   // Any errors are automatically reported by the global error handler.
   await contentScriptPromise;
-  await rehydrateSidebar({
-    tabId,
-  });
+  updateSidebar(contentScriptTarget);
 }
 
 async function handleBrowserAction(tab: Tab): Promise<void> {
@@ -82,29 +117,7 @@ async function handleBrowserAction(tab: Tab): Promise<void> {
   await toggleSidebar(tab.id, url);
 }
 
-/**
- * Show a popover on restricted URLs because we're unable to inject content into the page. Previously we'd open
- * the Extension Console, but that was confusing because the action was inconsistent with how the button behaves
- * other pages.
- * @param tabUrl the url of the tab, or null if not accessible
- */
-function getPopoverUrl(tabUrl: string | null): string | null {
-  const popoverUrl = browser.runtime.getURL("restrictedUrlPopup.html");
-
-  if (tabUrl?.startsWith(getExtensionConsoleUrl())) {
-    return `${popoverUrl}?reason=${DISPLAY_REASON_EXTENSION_CONSOLE}`;
-  }
-
-  if (!isScriptableUrl(tabUrl)) {
-    return `${popoverUrl}?reason=${DISPLAY_REASON_RESTRICTED_URL}`;
-  }
-
-  // The popup is disabled, and the extension will receive browserAction.onClicked events.
-  // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup#popup
-  return null;
-}
-
-export default function initBrowserAction(): void {
+function initBrowserActionMv2(): void {
   browserAction.onClicked.addListener(handleBrowserAction);
 
   // Track the active tab URL. We need to update the popover every time status the active tab/active URL changes.

src/background/contextMenus.ts

@@ -68,7 +68,7 @@ async function dispatchMenu(
 ): Promise<void> {
   expectContext("background");
 
-  const target = { frameId: info.frameId, tabId: tab.id };
+  const target = { frameId: info.frameId ?? 0, tabId: tab.id };
 
   if (typeof info.menuItemId !== "string") {
     throw new TypeError(`Not a PixieBrix menu item: ${info.menuItemId}`);

src/background/messenger/api.ts

@@ -45,6 +45,8 @@ export const removeExtensionForEveryTab = getNotifier(
   bg,
 );
 
+export const showMySidePanel = getMethod("SHOW_MY_SIDE_PANEL", bg);
+
 export const closeTab = getMethod("CLOSE_TAB", bg);
 export const deleteCachedAuthData = getMethod("DELETE_CACHED_AUTH", bg);
 export const getCachedAuthData = getMethod("GET_CACHED_AUTH", bg);

src/background/messenger/registration.ts

@@ -78,6 +78,7 @@ import {
   getCachedAuthData,
 } from "@/background/auth/authStorage";
 import { setCopilotProcessData } from "@/background/partnerHandlers";
+import { showMySidePanel } from "@/background/sidePanel";
 import { setToolbarBadge } from "@/background/toolbarBadge";
 
 expectContext("background");
@@ -112,6 +113,8 @@ declare global {
     PING: typeof pong;
     COLLECT_PERFORMANCE_DIAGNOSTICS: typeof collectPerformanceDiagnostics;
 
+    SHOW_MY_SIDE_PANEL: typeof showMySidePanel;
+
     SET_TOOLBAR_BADGE: typeof setToolbarBadge;
     ACTIVATE_TAB: typeof activateTab;
     REACTIVATE_EVERY_TAB: typeof reactivateEveryTab;
@@ -192,6 +195,8 @@ export default function registerMessenger(): void {
     PING: pong,
     COLLECT_PERFORMANCE_DIAGNOSTICS: collectPerformanceDiagnostics,
 
+    SHOW_MY_SIDE_PANEL: showMySidePanel,
+
     SET_TOOLBAR_BADGE: setToolbarBadge,
     ACTIVATE_TAB: activateTab,
     REACTIVATE_EVERY_TAB: reactivateEveryTab,

src/background/sidePanel.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2023 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { openSidePanel } from "@/mv3/sidePanelMigration";
+import type { MessengerMeta } from "webext-messenger";
+import { isMV3 } from "@/mv3/api";
+import { getSidebarPath } from "@/sidebar/sidePanel/messenger/api";
+
+export async function showMySidePanel(this: MessengerMeta): Promise<void> {
+  await openSidePanel(this.trace[0].tab.id);
+}
+
+// TODO: Drop if this is ever implemented: https://github.com/w3c/webextensions/issues/515
+export async function initSidePanel(): Promise<void> {
+  if (!isMV3()) {
+    return;
+  }
+
+  // TODO: Drop this once the popover URL behavior is merged into sidebar.html
+  // https://github.com/pixiebrix/pixiebrix-extension/issues/7364
+  chrome.tabs.onCreated.addListener(({ id: tabId }) => {
+    if (tabId) {
+      void chrome.sidePanel.setOptions({
+        tabId,
+        path: getSidebarPath(tabId),
+      });
+    }
+  });
+
+  // We need to target _all_ tabs, not just those we have access to
+  const existingTabs = await chrome.tabs.query({});
+  await Promise.all(
+    existingTabs.map(async ({ id: tabId, url }) =>
+      chrome.sidePanel.setOptions({
+        tabId,
+        path: getSidebarPath(tabId),
+        enabled: true,
+      }),
+    ),
+  );
+}

src/bricks/effects/sidebar.ts

@@ -18,9 +18,15 @@
 import { EffectABC } from "@/types/bricks/effectTypes";
 import { type BrickArgs, type BrickOptions } from "@/types/runtimeTypes";
 import { type Schema, SCHEMA_EMPTY_OBJECT } from "@/types/schemaTypes";
-import { hideSidebar, showSidebar } from "@/contentScript/sidebarController";
+import {
+  updateSidebar,
+  hideSidebar,
+  showSidebar,
+} from "@/contentScript/sidebarController";
+import { showMySidePanel } from "@/background/messenger/api";
+import sidebarInThisTab from "@/sidebar/messenger/api";
+import { isMV3 } from "@/mv3/api";
 import { propertiesToSchema } from "@/validators/generic";
-
 import { logPromiseDuration } from "@/utils/promiseUtils";
 
 export class ShowSidebar extends EffectABC {
@@ -64,9 +70,15 @@ export class ShowSidebar extends EffectABC {
   ): Promise<void> {
     // Don't pass extensionId here because the extensionId in showOptions refers to the extensionId of the panel,
     // not the extensionId of the extension toggling the sidebar
+    if (isMV3()) {
+      await showMySidePanel();
+    } else {
+      await showSidebar();
+    }
+
     void logPromiseDuration(
-      "ShowSidebar:showSidebar",
-      showSidebar({
+      "ShowSidebar:updateSidebar",
+      updateSidebar({
         force: forcePanel,
         panelHeading,
         blueprintId: logger.context.blueprintId,
@@ -87,6 +99,10 @@ export class HideSidebar extends EffectABC {
   inputSchema: Schema = SCHEMA_EMPTY_OBJECT;
 
   async effect(): Promise<void> {
-    hideSidebar();
+    if (isMV3()) {
+      sidebarInThisTab.close();
+    } else {
+      hideSidebar();
+    }
   }
 }

src/bricks/renderers/customForm.ts

@@ -25,7 +25,7 @@ import { validateRegistryId } from "@/types/helpers";
 import { BusinessError, PropError } from "@/errors/businessErrors";
 import { getPageState, setPageState } from "@/contentScript/messenger/api";
 import { isEmpty, isPlainObject, set } from "lodash";
-import { getTopLevelFrame } from "webext-messenger";
+import { getConnectedTarget } from "@/sidebar/connectedTarget";
 import { type UUID } from "@/types/stringTypes";
 import { type SanitizedIntegrationConfig } from "@/integrations/integrationTypes";
 import {
@@ -341,7 +341,7 @@ async function getInitialData(
 
     case "state": {
       const namespace = storage.namespace ?? "blueprint";
-      const topLevelFrame = await getTopLevelFrame();
+      const topLevelFrame = await getConnectedTarget();
       // Target the top level frame. Inline panels aren't generally available, so the renderer will always be in the
       // sidebar which runs in the context of the top-level frame
       return getPageState(topLevelFrame, {
@@ -411,7 +411,7 @@ async function setData(
     }
 
     case "state": {
-      const topLevelFrame = await getTopLevelFrame();
+      const topLevelFrame = await getConnectedTarget();
       // Target the top level frame. Inline panels aren't generally available, so the renderer will always be in the
       // sidebar which runs in the context of the top-level frame
       await setPageState(topLevelFrame, {