Listen to page changes and re-initialize button

Author: SeriousBug

package-lock.json

@@ -26,8 +26,7 @@
     "react-error-boundary": "^4.0.13",
     "swr": "^2.2.5",
     "tailwindcss": "^3.4.3",
-    "ulidx": "^2.3.0",
-    "yup": "^1.4.0"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

package.json

@@ -1,7 +1,22 @@
+import { isSupportedSite } from "@lib/utils/isSupportedSite";
+import { UpdateMessage } from "@lib/utils/messages";
 import browser from "webextension-polyfill";
 
-console.log("Hello from the background!");
-
 browser.runtime.onInstalled.addListener((details) => {
   console.log("Extension installed:", details);
 });
+
+browser.webNavigation.onHistoryStateUpdated.addListener((e) => {
+  if (isSupportedSite(e.url)) {
+    console.debug("Supported site:", e.url);
+    try {
+      browser.tabs.sendMessage(e.tabId, {
+        type: "devpod-update",
+      } satisfies UpdateMessage);
+    } catch (error) {
+      // This is expected if the tab is not ready to receive messages. It's not
+      // a problem if that's the case, because it means the content script has
+      // not initialized yet, and thus doesn't need to be updated.
+    }
+  }
+});

src/background.ts

@@ -0,0 +1,3 @@
+export function isSupportedSite(url: string) {
+  return /^https?:[/][/]github.com[/][^/]+[/][^/]+/.test(url);
+}

src/lib/utils/isSupportedSite.ts

@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const UpdateMessage = z.object({
+  type: z.literal("devpod-update"),
+});
+export type UpdateMessage = z.infer<typeof UpdateMessage>;

src/lib/utils/messages.ts

@@ -18,7 +18,7 @@
     "{{chrome}}.service_worker": "src/background.ts",
     "{{firefox}}.scripts": ["src/background.ts"]
   },
-  "permissions": ["activeTab", "storage"],
+  "permissions": ["activeTab", "webNavigation"],
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*", "<all_urls>"],

src/manifest.json

@@ -8,6 +8,8 @@ import { EError, EShadowError } from "@lib/utils/error";
 import { DevPodLogoIcon } from "@src/icons/devpod";
 import { StrictMode } from "react";
 import { ButtonLink } from "@lib/components/Button";
+import { runtime } from "webextension-polyfill";
+import { UpdateMessage } from "@lib/utils/messages";
 
 type PortalProps = { portal: HTMLElement | DocumentFragment };
 
@@ -46,7 +48,13 @@ export function Control({ portal }: PortalProps) {
     <StrictMode>
       <div className="flex justify-center items-center">
         <ErrorBoundaryProvider>
-          <ButtonLink href={getDevPodUrl()} color="primary" {...bindTarget}>
+          <ButtonLink
+            rel="noreferrer"
+            target="_blank"
+            href={getDevPodUrl()}
+            color="primary"
+            {...bindTarget}
+          >
             <DevPodLogoIcon
               aria-label=""
               className="w-6 h-6 text-primary-contrast"
@@ -84,14 +92,11 @@ function attachShadow<E extends Element = Element>(target: E | null) {
   const shadowTarget = document.createElement("div");
   target.appendChild(shadowTarget);
   const shadow = shadowTarget.attachShadow({ mode: "closed" });
-  const rootContainer = document.createElement("div");
-  shadow.appendChild(rootContainer);
   attachStyles(shadow);
-  return shadow;
+  return { shadow, target: shadowTarget };
 }
 
 const MAX_INIT_ATTEMPTS = 12;
-let isInitialized = false;
 
 function findDOMNodeByContent(content: string) {
   for (const node of document.querySelectorAll("button")) {
@@ -107,19 +112,41 @@ function findDOMNodeByContent(content: string) {
   });
 }
 
+let buttonContainer: HTMLDivElement | null = null;
+
 function init(attempts: number = 0) {
-  if (isInitialized || attempts > MAX_INIT_ATTEMPTS) return;
+  if (attempts > MAX_INIT_ATTEMPTS) {
+    // Too many attempts, aborting
+    return;
+  }
+  if (document.contains(buttonContainer)) {
+    // ALready initialized
+    return;
+  }
   try {
     const buttonTarget = findDOMNodeByContent("Code")?.parentElement;
-    const rootContainer = attachShadow(buttonTarget);
+    const { shadow: rootContainer, target: rootContainerTarget } =
+      attachShadow(buttonTarget);
+    buttonContainer = rootContainerTarget;
     const root = createRoot(rootContainer);
-    const portalContainer = attachShadow(document.body);
+    const { shadow: portalContainer } = attachShadow(document.body);
     root.render(<Control portal={portalContainer} />);
-    isInitialized = true;
   } catch (error) {
+    console.debug("Initialization failed", error);
     // 10ms, 20ms, 40ms, 80ms, 160ms, 320ms, 640ms, 1280ms, 2560ms, 5120ms, 10240ms, 20480ms
     setTimeout(() => init(attempts + 1), Math.pow(2, attempts) * 10);
   }
 }
 
+console.debug("Initializing DevPod button");
 init();
+runtime.onMessage.addListener((message) => {
+  UpdateMessage.safeParseAsync(message).then(async (result) => {
+    if (!result.success) return;
+    const message = result.data;
+    console.debug(`Received message ${message.type}`);
+    if (message.type === "devpod-update") {
+      init();
+    }
+  });
+});