browser polyfill cleanup, debugging improvements

.eslintrc.js

@@ -79,7 +79,7 @@ module.exports = {
         node: true,
         jest: true,
       },
-      // Overridden rules: https://github.com/fregante/eslint-config-pixiebrix/blob/main/server.js
+      // Overridden rules: https://github.com/pixiebrix/eslint-config-pixiebrix/blob/main/server.js
       extends: ["pixiebrix/server"],
     },
   ],

.github/dependabot.yml

@@ -13,5 +13,3 @@ updates:
       time: "08:42"
       timezone: "Etc/UTC"
     open-pull-requests-limit: 20
-    reviewers:
-      - "fregante"

src/contrib/google/auth.ts

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import chromeP from "webext-polyfill-kinda";
 import { getErrorMessage } from "@/errors/errorHelpers";
 import { forbidContext } from "@/utils/expectContext";
 
@@ -33,7 +32,7 @@ export async function ensureAuth(
   }
 
   try {
-    const token = await chromeP.identity.getAuthToken({
+    const token = await browser.identity.getAuthToken({
       interactive,
       scopes,
     });
@@ -54,10 +53,9 @@ class PermissionsError extends Error {
 
   public readonly status: number;
 
-  constructor(m: string, status: number) {
-    super(m);
+  constructor(message: string, status: number) {
+    super(message);
     this.status = status;
-    Object.setPrototypeOf(this, Error.prototype);
   }
 }
 
@@ -80,7 +78,7 @@ export async function handleRejection(
   }
 
   if ([403, 401].includes(status)) {
-    await chromeP.identity.removeCachedAuthToken({ token });
+    await browser.identity.removeCachedAuthToken({ token });
     console.debug(
       "Bad Google OAuth token. Removed the auth token from the cache so the user can re-authenticate"
     );

src/extensionContext.ts

@@ -25,3 +25,11 @@ enrichAxiosErrors();
 
 // https://webpack.js.org/guides/public-path/#on-the-fly
 __webpack_public_path__ = chrome.runtime.getURL("/");
+
+// @ts-expect-error For debugging only
+globalThis.$ = $;
+
+if (!("browser" in globalThis)) {
+  // @ts-expect-error For debugging only
+  globalThis.browser = browser;
+}

src/hooks/useDeployments.ts

@@ -32,7 +32,6 @@ import { mergePermissions } from "@/utils/permissions";
 import { Permissions } from "webextension-polyfill";
 import { IExtension, RegistryId, UUID } from "@/core";
 import { maybeGetLinkedApiClient } from "@/services/apiClient";
-import chromeP from "webext-polyfill-kinda";
 import extensionsSlice from "@/store/extensionsSlice";
 import useFlags from "@/hooks/useFlags";
 import {
@@ -190,7 +189,7 @@ function useDeployments(): DeploymentState {
     }
 
     if (checkExtensionUpdateRequired(deployments)) {
-      await chromeP.runtime.requestUpdateCheck();
+      await browser.runtime.requestUpdateCheck();
       notify.warning(
         "You must update the PixieBrix browser extension to activate the deployment"
       );
@@ -226,7 +225,7 @@ function useDeployments(): DeploymentState {
   }, [deployments, dispatch, installedExtensions]);
 
   const updateExtension = useCallback(async () => {
-    await chromeP.runtime.requestUpdateCheck();
+    await browser.runtime.requestUpdateCheck();
     browser.runtime.reload();
   }, []);
 

src/options/pages/settings/AdvancedSettings.tsx

@@ -21,7 +21,6 @@ import { Button, Card, Form } from "react-bootstrap";
 import { DEFAULT_SERVICE_URL, useConfiguredHost } from "@/services/baseService";
 import React, { useCallback } from "react";
 import { clearExtensionAuth } from "@/auth/token";
-import chromeP from "webext-polyfill-kinda";
 import notify from "@/utils/notify";
 import useFlags from "@/hooks/useFlags";
 import settingsSlice from "@/store/settingsSlice";
@@ -56,7 +55,7 @@ const AdvancedSettings: React.FunctionComponent = () => {
   }, []);
 
   const requestExtensionUpdate = useCallback(async () => {
-    const status = await chromeP.runtime.requestUpdateCheck();
+    const status = await browser.runtime.requestUpdateCheck();
     if (status === "update_available") {
       browser.runtime.reload();
     } else if (status === "throttled") {

src/pageEditor/sidebar/Sidebar.tsx

@@ -79,9 +79,10 @@ const ReloadButton: React.VoidFunctionComponent = () => (
     className="mt-auto"
     onClick={async (event) => {
       if (event.shiftKey) {
-        browser.runtime?.reload(); // Not guaranteed
         await browser.tabs.reload(browser.devtools.inspectedWindow.tabId);
 
+        browser.runtime?.reload(); // Not guaranteed
+
         // We must wait before reloading or else the loading fails
         // https://github.com/pixiebrix/pixiebrix-extension/pull/2381
         await sleep(2000);

src/tinyPages/devtools.ts

@@ -15,11 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-const { tabId } = chrome.devtools.inspectedWindow;
-if (typeof tabId === "number") {
+if (typeof chrome.devtools.inspectedWindow.tabId === "number") {
   chrome.devtools.panels.create(
     "PixieBrix",
     "",
-    `pageEditor.html?tabId=${tabId}`
+    `pageEditor.html?tabId=${chrome.devtools.inspectedWindow.tabId}`
   );
 }