Feat: Implemented listener that hides and shows the CSUI on action button click

background/index.ts

@@ -2,4 +2,22 @@ export {}
 
 console.log(
   "Live now; make now always the most precious time. Now will never come again."
-)
\ No newline at end of file
+)
+/**
+ * Listener that reacts to users clicking on the chrome action button
+ * It first grabs the current state of the content script UI 
+ * from the chrome.storage API and depending on its current value 
+ * either hides or displays the popup window
+ */
+chrome.action.onClicked.addListener(() => {
+  chrome.storage.sync.get(["visible"]).then((result) => {
+    if (result.visible) {
+      chrome.storage.sync.set({ visible: false })
+      console.log("im here where i want")
+    } else {
+      chrome.storage.sync.set({ visible: true })
+      console.log("im here where i dont want")
+    }
+  })
+  console.log(currentState)
+})

content.svelte

@@ -3,14 +3,9 @@
   import cssText from "data-text:~style.css"
 
   import { sendToBackground } from "@plasmohq/messaging"
-  import { Storage } from "@plasmohq/storage"
 
   import Rating from "~rating.svelte"
 
-  let visible = true
-  const storage = new Storage()
-  //const [visible, setVisible] = useStorage("visible", true)
-
   export const getStyle = () => {
     const style = document.createElement("style")
     style.textContent = cssText
@@ -19,11 +14,32 @@
 </script>
 
 <script>
+  import { onMount } from "svelte"
+
+  import { Storage } from "@plasmohq/storage"
+
+  let visible = false
+
+  const storage = new Storage()
+
+  onMount(async () => {
+    await storage.set("visible", false)
+  })
+
+  storage.watch({
+    visible: (c) => {
+      visible = c.newValue
+    }
+  })
+
   let brand = ""
   let environmental = ""
   let supply = ""
   let social = ""
-  let visible = true
+
+  function closePopup() {
+    chrome.storage.sync.set({ visible: false })
+  }
 
   async function getPokemon() {
     const resp = await sendToBackground({
@@ -39,24 +55,28 @@
       social = "N/A"
     } else {
       brand = resp.answer.brand
-      environmental = (Math.round(resp.answer.environmental_total/1.75*100)).toString()
-      supply = (Math.round(resp.answer.supplychain_total/6*100)).toString()
-      social = (Math.round(resp.answer.social_total/3.25*100)).toString()
+      environmental = Math.round(
+        (resp.answer.environmental_total / 1.75) * 100
+      ).toString()
+      supply = Math.round((resp.answer.supplychain_total / 6) * 100).toString()
+      social = Math.round((resp.answer.social_total / 3.25) * 100).toString()
+      visible = true
     }
     return brand
   }
   getPokemon()
 </script>
+
 {#if visible}
-<section
-  class="p-2 font-roboto font-normal fixed top-10 right-10 w-80 bg-gray-800 rounded-xl text-white">
+  <section
+    class="p-2 font-roboto font-normal fixed top-10 right-10 w-80 bg-gray-800 rounded-xl text-white">
     <div class="grid grid-cols-2">
       <div class="flex gap-2 items-center">
         <h2 class="text-xl font-bold">Leaf</h2>
         <img class="w-6 h-6" src={logo} alt="Leaf logo" />
       </div>
       <button
-        on:click={() => (visible = false)}
+        on:click={() => closePopup()}
         class="justify-self-end mr-3 text-2xl">x</button>
     </div>
     <div>
@@ -84,5 +104,5 @@
         Fashion Transparency Index
       </a>
     </p>
-</section>
-{/if}
\ No newline at end of file
+  </section>
+{/if}

popup.svelte

-<script lang="ts">
-  import "./style.css"
-  import logo from "data-base64:~assets/icon.development.png"
-
-  let data = ""
-</script>
-
-<section class="p-2">
-  <div class="flex gap-2 items-center">
-    <h2 class="text-xl font-bold">Leaf</h2>
-    <img class="w-6 h-6" src={logo} alt="Leaf logo" />
-  </div>
-  <input bind:value={data} />
-  <a href="https://docs.plasmo.com" target="_blank"> View Docs </a>
-</section>