iframe gets deleted when tutorial exits - fixes #40 (#42)

Author: anna-st-40

public/content.js

@@ -15,6 +15,7 @@ function searchEmailSenders(emails) {
 function displayTutorial() {
   // Create an iframe element
   const iframe = document.createElement("iframe");
+  iframe.id = "inboxwhiz-tutorial";
   iframe.src = chrome.runtime.getURL("tutorial/index.html");
 
   // Style the iframe as a modal
@@ -33,6 +34,11 @@ function displayTutorial() {
   document.body.appendChild(iframe);
 }
 
+function closeTutorial() {
+  const iframe = document.getElementById("inboxwhiz-tutorial");
+  iframe?.remove();
+}
+
 function getEmailAccount() {
   // Get the email account from the page
   const title = document.querySelector("title").textContent;
@@ -53,6 +59,13 @@ chrome.runtime.onMessage.addListener((message) => {
   }
 });
 
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.action === "CLOSE_TUTORIAL") {
+    console.log("Received message to close tutorial");
+    closeTutorial();
+  }
+});
+
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.action === "GET_EMAIL_ACCOUNT") {
     const value = getEmailAccount();

src/tutorial/Tutorial.tsx

@@ -13,7 +13,6 @@ import { ActionsProvider } from "../_shared/providers/actionsContext";
 
 const Tutorial = () => {
   const [step, setStep] = useState(0);
-  const [isModalOpen, setIsModalOpen] = useState(true);
 
   const handleNext = () => {
     setStep(step + 1);
@@ -22,8 +21,16 @@ const Tutorial = () => {
   return (
     <ActionsProvider>
       <Modal
-        isOpen={isModalOpen}
-        onClose={step === 5 ? () => setIsModalOpen(false) : () => {}}
+        onClose={step === 5
+          ? () => {
+            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+              const tab = tabs[0];
+              if (tab && tab.id !== undefined) {
+                chrome.tabs.sendMessage(tab.id, { action: "CLOSE_TUTORIAL" });
+              }
+            });
+          }
+          : () => { }}
       >
         <div className="tutorial-popup">
           {step === 0 ? (

src/tutorial/components/modal.tsx

@@ -3,11 +3,9 @@ import "./modal.css";
 
 export const Modal = ({
   children,
-  isOpen,
   onClose,
 }: {
   children: ReactNode;
-  isOpen: boolean;
   onClose: () => void;
 }) => {
   const handleBackgroundClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -20,7 +18,6 @@ export const Modal = ({
     <div
       className="modal"
       onClick={handleBackgroundClick}
-      style={{ display: isOpen ? "flex" : "none" }}
     >
       {children}
     </div>