updated darkp list

cognigaurd-web/content.js

@@ -9,7 +9,7 @@ const sendWebsiteData = () => {
   };
 
   // Send data to API
-  fetch(apiUrl +"price-manipulation/", {
+  fetch(apiUrl +"dp-data/", {
 
       method: "POST",
       headers: {
@@ -29,7 +29,20 @@ const sendWebsiteData = () => {
       .catch(error => {
           console.error("Error:", error);
       });
+
 };
 
 // Execute the function when the DOM is fully loaded
-document.addEventListener("DOMContentLoaded", sendWebsiteData);
+// document.addEventListener("", sendWebsiteData);
+
+let analyzeBtn = document.getElementById("analyze-btn")
+
+analyzeBtn.addEventListener("click", sendWebsiteData )
+
+
+// Send message to background script
+chrome.runtime.sendMessage({ url: window.location.href }, function(response) {
+    console.log(response.result);
+    // Update extension UI with the dark pattern information
+    // ...
+});

cognigaurd-web/popup.css

@@ -232,15 +232,17 @@
         display: flex; 
         flex-direction: row;
         gap: 12px;
+        justify-content: center;
 
     }
-    #tp-para {
+    #analyze-btn {
         font-family: var(--sans);
         font-size: 14px;
         padding: 6px 12px;
         border-radius: 6px;
         background-color: var(--secondary-color);
         color: var(--white);
+
     }
     #transparencyScore{
         font-family: var(--sans);

cognigaurd-web/popup.html

@@ -49,26 +49,26 @@
 
 
       <div class="scan-result-box">
-        <h2>What we have found so far:</h2>
+        <!-- <h2>What we have found so far:</h2>
         <ul class="scan-list">
           <li class="scan-items">Sample</li>
           <li class="scan-items">Sample2</li>
           <li class="scan-items">Sample3</li>
           <li class="scan-items">Sample4</li>
 
 
-        </ul>
-        <a id="report-dp" href="#">Report Dark Patten</a>
+        </ul> -->
+        <a id="report-dp" href="http://127.0.0.1:8000/report-dp">Report Dark Patterns</a>
       </div>
 
     </section>
 
 
     <section id="tp-score">
       <div class="tp-box">
-
-        <p id="tp-para" >Transparency score <p>
-        <p id="transparencyScore">0</p>
+          <a id="analyze-btn" href="#">Analyze</a>
+        <!-- <p id="tp-para" >Transparency score <p> -->
+        <!-- <p id="transparencyScore">0</p> -->
 
       </div>
 

cognigaurd-web/popup.js

@@ -13,6 +13,7 @@ const fetchTransparencyScore = () => {
             }
             return response.json();
         })
+
         .then(userData => {
             // Process the retrieved data
 
@@ -25,6 +26,7 @@ const fetchTransparencyScore = () => {
         .catch(error => {
             console.log("Error", error);
         });
+
 };
 
 // Fetch transparency score when DOM is loaded
@@ -41,3 +43,40 @@ function updateTransparencyMeter(transparencyScore) {
     arrowElement.style.transform = `rotate(${rotation}deg)`;
     scoreDisplayElement.innerText = transparencyScore;
 }
+
+// Displaying dark patterns
+let scanResultBox = document.getElementsByClassName("scan-result-box")[0];
+const displayDp = (response, length) =>{
+
+
+    let head = document.createElement('h2');
+    head.innerText = "What we have found so far:";
+
+    scanResultBox.appendChild(head)
+
+    let scanList = document.createElement("ul");
+    scanList.classList.add("scan-list");
+
+    scanResultBox.appendChild(scanList)
+
+    let responseArr = []   
+
+    for(let i=0; i<length; i++)
+    {
+        let scanItems = document.createElement("li")
+        scanItems.classList.add("scan-items");
+
+        scanItems.innerText = `${responseArr[0]}`;
+
+        scanList.appendChild(scanItems);
+
+
+    }
+
+
+}
+
+let analyzeBtn = document.getElementById("analyze-btn");
+
+analyzeBtn.addEventListener("click", displayDp);
+