#7228: chrome.sidePanel POC 2

.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`,

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

@@ -52,7 +52,7 @@ void initMessengerLogging();
 void initRuntimeLogging();
 registerMessenger();
 registerExternalMessenger();
-initBrowserAction();
+void initBrowserAction();
 initInstaller();
 void initNavigation();
 initExecutor();

src/background/browserAction.ts

@@ -15,99 +15,29 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ensureContentScript } from "@/background/contentScript";
-import { rehydrateSidebar } from "@/contentScript/messenger/api";
-import webextAlert from "./webextAlert";
-import { browserAction, type Tab } from "@/mv3/api";
-import { executeScript, isScriptableUrl } from "webext-content-scripts";
-import { memoizeUntilSettled } from "@/utils/promiseUtils";
-import { getExtensionConsoleUrl } from "@/utils/extensionUtils";
+import { browserAction } from "@/mv3/api";
 import {
-  DISPLAY_REASON_EXTENSION_CONSOLE,
-  DISPLAY_REASON_RESTRICTED_URL,
-} from "@/tinyPages/restrictedUrlPopupConstants";
-import { setActionPopup } from "webext-tools";
+  getSidebarPath,
+  openSidePanel,
+} from "@/sidebar/sidePanel/messenger/api";
 
-const ERR_UNABLE_TO_OPEN =
-  "PixieBrix was unable to open the Sidebar. Try refreshing the page.";
+export default async function initBrowserAction(): Promise<void> {
+  void chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: false });
 
-// The sidebar is always injected to into the top level frame
-const TOP_LEVEL_FRAME_ID = 0;
-
-const toggleSidebar = memoizeUntilSettled(_toggleSidebar);
-
-// Don't accept objects here as they're not easily memoizable
-async function _toggleSidebar(tabId: number, tabUrl: string): Promise<void> {
-  console.debug("browserAction:toggleSidebar", tabId, tabUrl);
-
-  // Load the raw toggle script first, then the content script. The browser executes them
-  // in order, but we don't need to use `Promise.all` to await them at the same time as we
-  // want to catch each error separately.
-  const sidebarTogglePromise = executeScript({
-    tabId,
-    frameId: TOP_LEVEL_FRAME_ID,
-    files: ["browserActionInstantHandler.js"],
-    matchAboutBlank: false,
-    allFrames: false,
-    // Run at end instead of idle to ensure immediate feedback to clicking the browser action icon
-    runAt: "document_end",
+  // Disable by default, so that it can be enabled on a per-tab basis
+  void chrome.sidePanel.setOptions({
+    enabled: false,
   });
-
-  // Chrome adds automatically at document_idle, so it might not be ready yet when the user click the browser action
-  const contentScriptPromise = ensureContentScript({
-    tabId,
-    frameId: TOP_LEVEL_FRAME_ID,
+  browserAction.onClicked.addListener(async (tab) => {
+    await openSidePanel(tab.id, tab.url);
   });
-
-  try {
-    await sidebarTogglePromise;
-  } catch (error) {
-    webextAlert(ERR_UNABLE_TO_OPEN);
-    throw error;
-  }
-
-  // NOTE: at this point, the sidebar should already be visible on the page, even if not ready.
-  // 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,
+  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (changeInfo.url) {
+      // TODO: Drop this once the popover URL behavior is merged into sidebar.html
+      void chrome.sidePanel.setOptions({
+        tabId,
+        path: getSidebarPath(tabId, changeInfo.url),
+      });
+    }
   });
 }
-
-async function handleBrowserAction(tab: Tab): Promise<void> {
-  // The URL might not be available in certain circumstances. This silences these
-  // cases and just treats them as "not allowed on this page"
-  const url = String(tab.url);
-  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 {
-  browserAction.onClicked.addListener(handleBrowserAction);
-
-  // Track the active tab URL. We need to update the popover every time status the active tab/active URL changes.
-  // https://github.com/facebook/react/blob/bbb9cb116dbf7b6247721aa0c4bcb6ec249aa8af/packages/react-devtools-extensions/src/background/tabsManager.js#L29
-  setActionPopup(getPopoverUrl);
-}

src/background/messenger/api.ts

@@ -45,6 +45,9 @@ export const removeExtensionForEveryTab = getNotifier(
   bg,
 );
 
+export const showMySidePanel = getMethod("SHOW_MY_SIDE_PANEL", bg);
+export const hideMySidePanel = getMethod("HIDE_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

@@ -80,6 +80,7 @@ import {
   getCachedAuthData,
 } from "@/background/auth/authStorage";
 import { setCopilotProcessData } from "@/background/partnerHandlers";
+import { hideMySidePanel, showMySidePanel } from "@/background/sidePanel";
 
 expectContext("background");
 
@@ -114,6 +115,9 @@ declare global {
     PING: typeof pong;
     COLLECT_PERFORMANCE_DIAGNOSTICS: typeof collectPerformanceDiagnostics;
 
+    SHOW_MY_SIDE_PANEL: typeof showMySidePanel;
+    HIDE_MY_SIDE_PANEL: typeof hideMySidePanel;
+
     ACTIVATE_TAB: typeof activateTab;
     REACTIVATE_EVERY_TAB: typeof reactivateEveryTab;
     REMOVE_EXTENSION_EVERY_TAB: typeof removeExtensionForEveryTab;
@@ -195,6 +199,9 @@ export default function registerMessenger(): void {
     PING: pong,
     COLLECT_PERFORMANCE_DIAGNOSTICS: collectPerformanceDiagnostics,
 
+    SHOW_MY_SIDE_PANEL: showMySidePanel,
+    HIDE_MY_SIDE_PANEL: hideMySidePanel,
+
     ACTIVATE_TAB: activateTab,
     REACTIVATE_EVERY_TAB: reactivateEveryTab,
     REMOVE_EXTENSION_EVERY_TAB: removeExtensionForEveryTab,

src/background/sidePanel.ts

@@ -0,0 +1,30 @@
+/*
+ * 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,
+  hideSidePanel,
+} from "@/sidebar/sidePanel/messenger/api";
+import type { MessengerMeta } from "webext-messenger";
+
+export async function showMySidePanel(this: MessengerMeta): Promise<void> {
+  await openSidePanel(this.trace[0].tab.id, this.trace[0].url);
+}
+
+export async function hideMySidePanel(this: MessengerMeta): Promise<void> {
+  await hideSidePanel(this.trace[0].tab.id);
+}

src/bricks/effects/sidebar.ts

@@ -18,9 +18,9 @@
 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 { rehydrateSidebar } from "@/contentScript/sidebarController";
+import { hideMySidePanel, showMySidePanel } from "@/background/messenger/api";
 import { propertiesToSchema } from "@/validators/generic";
-
 import { logPromiseDuration } from "@/utils/promiseUtils";
 
 export class ShowSidebar extends EffectABC {
@@ -64,9 +64,10 @@ 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
+    await showMySidePanel();
     void logPromiseDuration(
       "ShowSidebar:showSidebar",
-      showSidebar({
+      rehydrateSidebar({
         force: forcePanel,
         panelHeading,
         blueprintId: logger.context.blueprintId,
@@ -87,6 +88,6 @@ export class HideSidebar extends EffectABC {
   inputSchema: Schema = SCHEMA_EMPTY_OBJECT;
 
   async effect(): Promise<void> {
-    hideSidebar();
+    await hideMySidePanel();
   }
 }

src/bricks/transformers/ephemeralForm/formTransformer.ts

@@ -25,16 +25,16 @@ import {
 } from "@/contentScript/ephemeralFormProtocol";
 import { expectContext } from "@/utils/expectContext";
 import {
-  ensureSidebar,
+  showSidebar,
   hideSidebarForm,
-  HIDE_SIDEBAR_EVENT_NAME,
   showSidebarForm,
 } from "@/contentScript/sidebarController";
 import { showModal } from "@/bricks/transformers/ephemeralForm/modalUtils";
 import { getThisFrame } from "webext-messenger";
 import { type BrickConfig } from "@/bricks/types";
 import { type FormDefinition } from "@/bricks/transformers/ephemeralForm/formTypes";
 import { isExpression } from "@/utils/expressionUtils";
+import { onSidePanelClosure } from "@/sidebar/sidePanel/messenger/api";
 
 // The modes for createFrameSrc are different than the location argument for FormTransformer. The mode for the frame
 // just determines the layout container of the form
@@ -157,33 +157,23 @@ export class FormTransformer extends TransformerABC {
 
     if (location === "sidebar") {
       // Ensure the sidebar is visible (which may also be showing persistent panels)
-      await ensureSidebar();
+      await showSidebar();
 
-      showSidebarForm({
+      await showSidebarForm({
         extensionId: logger.context.extensionId,
         blueprintId: logger.context.blueprintId,
         nonce: formNonce,
         form: formDefinition,
       });
 
       // Two-way binding between sidebar and form. Listen for the user (or an action) closing the sidebar
-      window.addEventListener(
-        HIDE_SIDEBAR_EVENT_NAME,
-        () => {
-          controller.abort();
-        },
-        {
-          // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-          // The listener will be removed when the given AbortSignal object's abort() method is called.
-          signal: controller.signal,
-        },
-      );
+      onSidePanelClosure(controller);
 
       controller.signal.addEventListener("abort", () => {
         // NOTE: we're not hiding the side panel here to avoid closing the sidebar if the user already had it open.
         // In the future we might creating/sending a closeIfEmpty message to the sidebar, so that it would close
         // if this form was the only entry in the panel
-        hideSidebarForm(formNonce);
+        void hideSidebarForm(formNonce);
         void cancelForm(formNonce);
       });
     } else {

src/bricks/transformers/temporaryInfo/DisplayTemporaryInfo.test.ts

@@ -67,7 +67,7 @@ jest.mock("@/bricks/transformers/ephemeralForm/modalUtils", () => ({
 const showModalMock = jest.mocked(showModal);
 
 jest.mock("@/contentScript/sidebarController", () => ({
-  ensureSidebar: jest.fn(),
+  showSidebar: jest.fn(),
   showTemporarySidebarPanel: jest.fn(),
   updateTemporarySidebarPanel: jest.fn(),
 }));
@@ -177,7 +177,7 @@ describe("DisplayTemporaryInfo", () => {
 
     let payload: PanelPayload;
     showTemporarySidebarPanelMock.mockImplementation(
-      (entry: TemporaryPanelEntry) => {
+      async (entry: TemporaryPanelEntry) => {
         payload = entry.payload;
       },
     );