Add alert for failed sidebar injection in extension console

src/background/browserAction.ts

@@ -21,10 +21,15 @@ import { rehydrateSidebar } from "@/contentScript/messenger/api";
 import { executeScript, isScriptableUrl } from "webext-content-scripts";
 import pMemoize from "p-memoize";
 import webextAlert from "./webextAlert";
+import { isMac } from "@/utils";
+import { notify } from "@/options/messenger/api";
 
 const ERR_UNABLE_TO_OPEN =
   "PixieBrix was unable to open the Sidebar. Try refreshing the page.";
 
+const keyboardShortcut = isMac() ? "Cmd+Opt+C" : "Ctrl+Shift+C";
+const MSG_NO_SIDEBAR_ON_OPTIONS_PAGE = `PixieBrix Tip 💜\n If you want to create a new blueprint, first navigate to the page you want to modify, then open PixieBrix in the DevTools (${keyboardShortcut}).`;
+
 // The sidebar is always injected to into the top level frame
 const TOP_LEVEL_FRAME_ID = 0;
 
@@ -74,7 +79,20 @@ async function _toggleSidebar(tabId: number, tabUrl: string): Promise<void> {
 async function handleBrowserAction(tab: Tabs.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"
-  await toggleSidebar(tab.id, String(tab.url));
+  const url = String(tab.url);
+  const optionsPage = browser.runtime.getURL("options.html");
+
+  if (url.startsWith(optionsPage)) {
+    notify.info(
+      { tabId: tab.id, page: "/options.html" },
+      {
+        id: "MSG_NO_SIDEBAR_ON_OPTIONS_PAGE",
+        message: MSG_NO_SIDEBAR_ON_OPTIONS_PAGE,
+      }
+    );
+  } else {
+    await toggleSidebar(tab.id, url);
+  }
 }
 
 export default function initBrowserAction() {

src/options/messenger/api.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 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/>.
+ */
+
+/* Do not use `registerMethod` in this file */
+import { getNotifier } from "webext-messenger";
+
+export const notify = {
+  info: getNotifier("NOTIFY_INFO"),
+  error: getNotifier("NOTIFY_ERROR"),
+  success: getNotifier("NOTIFY_SUCCESS"),
+};

src/options/messenger/registration.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2022 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/>.
+ */
+
+/* Do not use `getMethod` in this file; Keep only registrations here, not implementations */
+import { registerMethods } from "webext-messenger";
+import { expectContext } from "@/utils/expectContext";
+import notify from "@/utils/notify";
+
+expectContext("extension");
+
+declare global {
+  interface MessengerMethods {
+    NOTIFY_INFO: typeof notify.info;
+    NOTIFY_ERROR: typeof notify.error;
+    NOTIFY_SUCCESS: typeof notify.success;
+  }
+}
+
+export default function registerMessenger(): void {
+  registerMethods({
+    NOTIFY_INFO: notify.info,
+    NOTIFY_ERROR: notify.error,
+    NOTIFY_SUCCESS: notify.success,
+  });
+}

src/options/options.tsx

@@ -27,11 +27,13 @@ import React from "react";
 import App from "@/options/App";
 import initGoogle from "@/contrib/google/initGoogle";
 import { initToaster } from "@/utils/notify";
+import registerMessenger from "@/options/messenger/registration";
 
 function init(): void {
   render(<App />, document.querySelector("#container"));
 }
 
+registerMessenger();
 initGoogle();
 initToaster();
 init();

src/utils.ts

@@ -541,7 +541,7 @@ export async function logPromiseDuration<P>(
 
 export function isMac(): boolean {
   // https://stackoverflow.com/a/27862868/402560
-  return navigator.platform.includes("Mac");
+  return globalThis.navigator?.platform.includes("Mac");
 }
 
 /** Tests a target string against a list of strings (full match) or regexes (can be mixed) */