Feat: Established connection with the database for loading valid urls....

Feat: Established connection with the database for loading valid urls. Incorporated functionality for checking it and reworked the background worker to check for both the brand of the product as well as the store that is selling it.
@

assets/dataset_small.json

@@ -1581,6 +1581,13 @@
     "supplychain_total": 5.75,
     "social_total": 2.25
   },
+  {
+    "brand": "Tommy Jeans",
+    "COUNTRY": "USA",
+    "environmental_total": 1.75,
+    "supplychain_total": 5.75,
+    "social_total": 2.25
+  },
   {
     "brand": "TOPVALU COLLECTION",
     "COUNTRY": "Japan",

background/index.ts

+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app"
+import { getFirestore } from "firebase/firestore/lite"
+
 export {}
 
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyAIXCufoNziwwkDEj6pF1pFs1b2ogqtITw",
+  authDomain: "leaf-0001.firebaseapp.com",
+  projectId: "leaf-0001",
+  storageBucket: "leaf-0001.appspot.com",
+  messagingSenderId: "679986368350",
+  appId: "1:679986368350:web:3aecada812fdeb3348c9cf"
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+export const db = getFirestore(app)
+
 console.log(
   "Live now; make now always the most precious time. Now will never come again."
 )
 /**
  * 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 
+ * 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(() => {
@@ -15,6 +36,6 @@ chrome.action.onClicked.addListener(() => {
       chrome.storage.sync.set({ visible: false })
     } else {
       chrome.storage.sync.set({ visible: true })
-    }
+    }6
   })
 })

background/messages/ping.ts

 import dataset from "assets/dataset_small.json"
+import { collection, getDocs, type DocumentData } from "firebase/firestore/lite"
 
 import type { PlasmoMessaging } from "@plasmohq/messaging"
 
+// import initialized db instance
+import { db } from "~background"
+
 interface data_small {
   brand: string
   COUNTRY: string
@@ -9,22 +13,50 @@ interface data_small {
   supplychain_total: number
   social_total: number
 }
+
+interface url_data {
+  name: string
+  url: string
+}
+
 const data: data_small[] = dataset
-console.log(data)
 
-function ifExists(brandName: string) {
-  const answer = data.find((brand) => brandName.toLowerCase().includes(brand.brand.toLowerCase()))
+async function queryUrls() {
+  const urlsCollection = collection(db, "urls")
+  const urlsSnapshot = await getDocs(urlsCollection)
+  const urlsList = urlsSnapshot.docs.map((doc) => doc.data())
+  return urlsList
+}
+
+function ifExists(tokens: string) {
+  const answer = data.find((brand) =>
+    tokens.toLowerCase().includes(brand.brand.toLowerCase())
+  )
   return answer
 }
 
+function getAnswers(tokens: string, validUrl: DocumentData) {
+  let secondAnswer
+  let mainAnswer: data_small = ifExists(tokens)
+  if (validUrl.name.toLowerCase().includes(mainAnswer.brand.toLowerCase())) {
+    secondAnswer = mainAnswer
+    mainAnswer = ifExists(tokens.replace(secondAnswer.brand, ""))
+  } else {
+    secondAnswer = ifExists(validUrl.name)
+  }
+  return { mainAnswer, secondAnswer }
+}
+
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const urls = await queryUrls()
   const queryOptions = { active: true, lastFocusedWindow: true }
-  const [tab] = await chrome.tabs.query(queryOptions)
+  const [tab]: chrome.tabs.Tab[] = await chrome.tabs.query(queryOptions)
+  const validUrl = urls.find((doc) => tab.url.includes(doc.url))
   const tokens: string = await tab.title
-  console.log(tokens)
-  let answer = ifExists(tokens)
+  const answer = getAnswers(tokens, validUrl)
   res.send({
-    answer
+    answer,
+    validUrl
   })
 }
 

content.svelte

@@ -48,19 +48,23 @@
 
     console.log(resp)
     console.log("done")
-    if (resp.answer === undefined) {
+    if (resp.answer.mainAnswer === undefined) {
       brand = "Not found"
       environmental = "N/A"
       supply = "N/A"
       social = "N/A"
     } else {
-      brand = resp.answer.brand
+      brand = resp.answer.mainAnswer.brand
       environmental = Math.round(
-        (resp.answer.environmental_total / 1.75) * 100
+        (resp.answer.mainAnswer.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
+      supply = Math.round((resp.answer.mainAnswer.supplychain_total / 6) * 100).toString()
+      social = Math.round((resp.answer.mainAnswer.social_total / 3.25) * 100).toString()
+      if (resp.validUrl != undefined) {
+        visible = true
+      } else {
+        visible = false
+      }
     }
     return brand
   }
@@ -69,7 +73,7 @@
 
 {#if visible}
   <section
-    class="p-2 font-roboto font-normal fixed top-10 right-10 w-80 bg-gray-800 rounded-xl text-white">
+    class="p-2 font-roboto font-normal fixed top-10 right-10 w-80 bg-white rounded-xl text-black shadow-md">
     <div class="grid grid-cols-2">
       <div class="flex gap-2 items-center">
         <h2 class="text-xl font-bold">Leaf</h2>

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@plasmohq/messaging": "^0.6.1",
     "@plasmohq/storage": "^1.9.0",
+    "firebase": "^10.7.2",
     "plasmo": "0.84.0",
     "svelte": "^4.2.8",
     "svelte-preprocess": "^5.1.2"

rating.svelte

@@ -5,11 +5,19 @@
 <div class="text-3xl">
   {#if score <= 20}
     <p class="text-red-700">{score}</p>
+  {:else if score <= 30}
+    <p class="text-red-500">{score}</p>
   {:else if score <= 40}
     <p class="text-red-300">{score}</p>
+  {:else if score <= 50}
+    <p class="text-orange-500">{score}</p>
   {:else if score <= 60}
-    <p class="text-yellow-300">{score}</p>
+    <p class="text-orange-300">{score}</p>
+  {:else if score <= 70}
+    <p class="text-yellow-500">{score}</p>
   {:else if score <= 80}
+    <p class="text-yellow-300">{score}</p>
+  {:else if score <= 90}
     <p class="text-green-300">{score}</p>
   {:else}
     <p class="text-green-700">{score}</p>