feat: better tab management

package.json

@@ -61,6 +61,7 @@
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
     "vite": "~4.3.3",
+    "vite-plugin-checker": "^0.6.4",
     "vitest": "^1.0.4",
     "vitest-dom": "^0.1.1",
     "web-ext": "^7.6.2"

playwright.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 3 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

src/entries/background/main.ts

@@ -1,20 +0,0 @@
-import browser from "webextension-polyfill";
-import OptionsSyncStorage from "../../lib/services/storage";
-import TabsService from "../../lib/services/tabsService";
-
-const storage = OptionsSyncStorage.getInstance();
-const tabs = new TabsService(storage);
-
-browser.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
-  if (
-    changeInfo.status == "complete" &&
-    (tab.title?.toLowerCase().includes("vitesicure") ||
-      tab.title?.toLowerCase().includes("bridge insurance services"))
-  ) {
-    await tabs.addTab(tabId.toString());
-  }
-});
-
-browser.tabs.onRemoved.addListener(async function (tabId, _removeInfo) {
-  await tabs.removeTab(tabId.toString());
-});

src/entries/contentScript/primary/main.ts

@@ -3,10 +3,9 @@ import { waitForElement } from "../../../lib/utils/waitForElement";
 import prepareComponent from "../renderContent";
 import PageFactory from "../../../lib/pages/pageFactory";
 import OptionsSyncStorage from "../../../lib/services/storage";
-import BrowserMessagingClient from "../../../lib/services/messenger/messagingClient";
+import MessagingService from "../../../lib/services/messagingService/messagingService";
 
 const storage = OptionsSyncStorage.getInstance();
-const messageListener = new BrowserMessagingClient();
 
 let lastUrl = location.href;
 new MutationObserver(() => {
@@ -37,7 +36,7 @@ async function loadPathBox() {
 
 loadPathBox();
 
-messageListener.listenForMessage("auto-fill", async (content) => {
+MessagingService.listen("auto-fill", async (content) => {
   const { goToNextPage } = content;
   const [_, product, isPreventivatorePage, isOtherPage] =
     window.location.pathname.split("/");
@@ -51,10 +50,10 @@ messageListener.listenForMessage("auto-fill", async (content) => {
   }
 });
 
-messageListener.listenForMessage("remove-path-box", async () => {
+MessagingService.listen("remove-path-box", async () => {
   document.getElementById("vitesicure-path-box")?.remove();
 });
 
-messageListener.listenForMessage("load-path-box", async () => {
+MessagingService.listen("load-path-box", async () => {
   loadPathBox();
 });

src/entries/popup/App.svelte

@@ -2,14 +2,10 @@
   import { onMount } from "svelte";
   import Button from "~/lib/components/Button.svelte";
   import Switch from "~/lib/components/Switch.svelte";
-  import MessengerService from "~/lib/services/messenger/messengerService";
-  import BrowserMessagingClient from "~/lib/services/messenger/messagingClient";
+  import MessagingService from "~/lib/services/messagingService/messagingService";
   import OptionsSyncStorage from "~/lib/services/storage";
-  import TabsService from "~/lib/services/tabsService";
 
   const storage = OptionsSyncStorage.getInstance();
-  const tabs = new TabsService(storage);
-  const messenger = new MessengerService(new BrowserMessagingClient(), tabs);
 
   let showPathBox = true;
   let debugMode = false;
@@ -27,15 +23,15 @@
     storage.set("debugMode", debugMode);
   };
 
-  $: messenger.send(debugMode ? "set-debug-mode" : "unset-debug-mode");
-  $: messenger.send(showPathBox ? "load-path-box" : "remove-path-box");
+  $: MessagingService.send(debugMode ? "set-debug-mode" : "unset-debug-mode");
+  $: MessagingService.send(showPathBox ? "load-path-box" : "remove-path-box");
 
   const autofill = async () => {
-    await messenger.send("auto-fill");
+    await MessagingService.send("auto-fill");
   };
 
   const autofillAndGoToNextPage = async () => {
-    await messenger.send("auto-fill", {
+    await MessagingService.send("auto-fill", {
       goToNextPage: true,
     });
   };

src/lib/pages/page.ts

@@ -1,17 +1,15 @@
-import BrowserMessagingClient from "../services/messenger/messagingClient";
+import MessagingService from "../services/messagingService/messagingService";
 
 export default abstract class Page {
   static path: string;
   protected debugMode: boolean;
 
   constructor() {
-    const messageListener = new BrowserMessagingClient();
-
-    messageListener.listenForMessage("set-debug-mode", () => {
+    MessagingService.listen("set-debug-mode", () => {
       this.debugMode = true;
     });
 
-    messageListener.listenForMessage("unset-debug-mode", () => {
+    MessagingService.listen("unset-debug-mode", () => {
       this.debugMode = false;
     });
   }

src/lib/pages/pageFactory.test.ts

@@ -1,4 +1,3 @@
-import BrowserMessagingClient from "../services/messenger/messagingClient";
 import InjuryCheckoutPage from "./injury/checkoutPage";
 import ContractorPage from "./injury/contractorPage";
 import SelectPage from "./injury/selectPage";
@@ -17,17 +16,6 @@ import OldPreventivatorePage from "./old-life/preventivatorePage";
 import OldYourOfferPage from "./old-life/yourOfferPage";
 import PageFactory from "./pageFactory";
 
-vi.mock("../services/messenger/messagingClient", () => {
-  return {
-    __esModule: true,
-    default: vi.fn().mockImplementation(() => {
-      return {
-        listenForMessage: vi.fn(),
-      };
-    }),
-  };
-});
-
 describe("PageFactory tests", () => {
   it("should return correct page from product and path", () => {
     expect(PageFactory.getPage("vita", "preventivatore")).toBeInstanceOf(

src/lib/services/browser.ts

@@ -0,0 +1,25 @@
+import browser from "webextension-polyfill";
+
+export const getCurrentTab = async () => {
+  const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+  return tab;
+};
+
+export const sendMessage = async (
+  message: string,
+  content: any,
+  tabId: number,
+) => {
+  await browser.tabs.sendMessage(tabId, { message, content });
+};
+
+export const listenForMessage = (
+  message: string,
+  callback: (content: any) => void,
+) => {
+  browser.runtime.onMessage.addListener((listenerMessage) => {
+    if (listenerMessage.message === message) {
+      callback(listenerMessage.content);
+    }
+  });
+};

src/lib/services/messagingService/messagingService.test.ts

@@ -0,0 +1,22 @@
+import MessagingService from "./messagingService";
+import * as browser from "../browser";
+
+describe("MessagingService", () => {
+  const browserSendMessage = vi.spyOn(browser, "sendMessage");
+
+  it("sendMessage should send message to current tab", async () => {
+    MessagingService.send("messageTest", {
+      myContent: "test",
+    });
+
+    await vi.waitFor(() => {
+      expect(browserSendMessage).toHaveBeenCalledWith(
+        "messageTest",
+        {
+          myContent: "test",
+        },
+        1,
+      );
+    });
+  });
+});

src/lib/services/messagingService/messagingService.ts

@@ -0,0 +1,17 @@
+import { getCurrentTab, listenForMessage, sendMessage } from "../browser";
+
+class MessagingService {
+  public static async send(message: string, content: any = {}) {
+    const tab = await getCurrentTab();
+    await sendMessage(message, content, tab.id);
+  }
+
+  public static async listen(
+    message: string,
+    callback: (content: any) => void,
+  ) {
+    listenForMessage(message, callback);
+  }
+}
+
+export default MessagingService;