fixed orphan content script error #77

Author: MitchellMarkGeorge

src/background/background.ts

@@ -19,16 +19,18 @@ import browser from "webextension-polyfill";
 
 browser.runtime.onInstalled.addListener(async ({ reason }) => {
   // should this be async?
-  if (reason === "install") {
+  if (reason === "install" || reason === "update") {
     // opening the welcome page first buys the extension time to inject into the avalible pages
     // uninstall survey
-    browser.runtime.setUninstallURL("https://forms.gle/Eqi9Hgs86hSVrvT57");
-    const isMissingCommands = await checkCommands();
-    const welcomeUrl = new URL("https://tabbutler.netlify.app/welcome");
-    if (isMissingCommands) {
-      // if there are missing/unbound commands, set a query param to show on the welcome page
-      welcomeUrl.searchParams.set("missing_commands", "true");
-      await browser.tabs.create({ url: welcomeUrl.toString() }); // not really nessecary to await
+    if (reason === "install") {
+      browser.runtime.setUninstallURL("https://forms.gle/Eqi9Hgs86hSVrvT57");
+      const isMissingCommands = await checkCommands();
+      const welcomeUrl = new URL("https://tabbutler.netlify.app/welcome");
+      if (isMissingCommands) {
+        // if there are missing/unbound commands, set a query param to show on the welcome page
+        welcomeUrl.searchParams.set("missing_commands", "true");
+        await browser.tabs.create({ url: welcomeUrl.toString() }); // not really nessecary to await
+      }
     }
     await injectExtension(); // not nessecary to await
   }

src/content/content.ts

@@ -15,6 +15,13 @@ if (existingTabButlerModalRoot) {
   existingTabButlerModalRoot.remove();
 }
 
+const shutDownEvent = "tab-butler-shutdown";
+// send a shutdown message to any other content script in this tab, disabling them permernently
+document.dispatchEvent(new CustomEvent(shutDownEvent));
+// add a listener for the same shutdown event
+document.addEventListener(shutDownEvent, shutdownScript);
+
+
 // by only creating and appending the element dynamically when it is requested, it should save on memory and reduce some parts of the code
 // like the visibility toggeling and the style tag removal in the root
 // this should also help in sites where the dom might change from time to time, invalidating
@@ -46,6 +53,7 @@ const messageListener = (messagePayload: MessagePlayload) => {
 browser.runtime.onMessage.addListener(messageListener);
 
 function mountSearchComponent(message: Message) {
+  console.log("mounting...");
   // create a new modal root on mount and append as the last child of the body
   tabButlerModalRoot = document.createElement("tab-butler-modal");
 // needs to be open so that the click event can bubble up
@@ -101,6 +109,14 @@ const unmountOnClick = (event: MouseEvent) => {
   }
 };
 
+function shutdownScript() {
+  console.log("shutting down")
+  unmountSearchComponent();
+  // remove the listener to so it can't be triggered again
+  // this prevents any old content scripts in the tab from being triggered in the tab
+  browser.runtime.onMessage.removeListener(messageListener);
+}
+
 window.addEventListener("beforeunload", () => {
   if (isOpen) {
     unmountSearchComponent();