Feature to highlight html elements on hover

rohitasare7 · Dec 22, 2024 · 0c5bf14 · 0c5bf14
1 parent 8608827
commit 0c5bf14
Show file tree

Hide file tree

Showing 18 changed files with 179 additions and 35 deletions.
diff --git a/dist/app.html b/dist/app.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.799bb3e1.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.042307f6.css" rel="stylesheet"><link href="/css/app.f2deb53f.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
diff --git a/dist/css/app.f2deb53f.css → dist/css/app.6c7584f0.css b/dist/css/app.f2deb53f.css → dist/css/app.6c7584f0.css
diff --git a/dist/css/chunk-common.042307f6.css b/dist/css/chunk-common.042307f6.css
diff --git a/dist/css/chunk-common.28654670.css b/dist/css/chunk-common.28654670.css
diff --git a/dist/css/index.54c7e9e0.css → dist/css/index.14054b0c.css b/dist/css/index.54c7e9e0.css → dist/css/index.14054b0c.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>Home</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/index.710f218e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.042307f6.css" rel="stylesheet"><link href="/css/index.54c7e9e0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>Home</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/index.3853c14f.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/index.14054b0c.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
diff --git a/dist/js/app.799bb3e1.js → dist/js/app.14ebf52e.js b/dist/js/app.799bb3e1.js → dist/js/app.14ebf52e.js
diff --git a/dist/js/app.14ebf52e.js.map b/dist/js/app.14ebf52e.js.map
diff --git a/dist/js/app.799bb3e1.js.map b/dist/js/app.799bb3e1.js.map
diff --git a/dist/js/content-script.js b/dist/js/content-script.js
@@ -156,7 +156,7 @@ function isLwc(element) {
 // }
 
 //Ignore some common items and vlocity package lwc
-const exclusionList = ["C-ICON","C-NAVIGATE-ACTION"];
+const exclusionList = ["C-ICON", "C-NAVIGATE-ACTION"];
 function isCustomLwc(element) {
   if (!isLwc(element)) return false;
 
@@ -261,7 +261,7 @@ function getQueryParameter(urlString, attributeName) {
     if (pos3 != -1 && pos3 < pos2) afterAttribute = afterAttribute2.substring(0, pos3);
     return decodeURIComponent(afterAttribute);
   } catch (e) {
-    console.error(`Error extracting query parameter '${attributeName}' from URL '${urlString}' -> ${e}`);
+    console.log(`Error extracting query parameter '${attributeName}' from URL '${urlString}' -> ${e}`);
   }
 }
 
@@ -282,7 +282,7 @@ function findOmniStudioComponents(doc) {
         "elementName": element.localName + "@" + element.getAttribute("layout-name"),
       };
       key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`;
-    } 
+    }
     else if (isOmniScript(element) && isVisible(element)) {
       obj = {
         "type": "OmniScript",
@@ -291,16 +291,16 @@ function findOmniStudioComponents(doc) {
         "elementName": element.localName + "@" + getOmniScriptName(element),
       };
       key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`;
-    } 
+    }
     else if (isLwcOmniScript(element) && isVisible(element)) {
       obj = {
         "type": "OmniScript",
         "subtype": "LWC",
-        "name": getOmniScriptName(element), 
+        "name": getOmniScriptName(element),
         "elementName": getParentLwc(element).localName,
       };
       key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`;
-    } 
+    }
     else if (isFlexCard(element) && isVisible(element)) {
       obj = {
         "type": "FlexCard",
@@ -309,7 +309,7 @@ function findOmniStudioComponents(doc) {
         "elementName": element.localName,
       };
       key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`;
-    } 
+    }
     /*
     else if (isCustomLwc(element) && isVisible(element)) {
       obj = {
@@ -336,7 +336,7 @@ function getOSCompList() {
     console.log('inside getOSCompList');
     findOmniStudioComponents(window.document);
   } catch (e) {
-    console.error("Error occurred: " + e);
+    console.log("Error occurred: " + e);
     objectsFound.push({
       'type': 'Error',
       'msg': 'Error occurred: ' + e
@@ -345,4 +345,58 @@ function getOSCompList() {
   console.log('objectsFound --> ' + JSON.stringify(objectsFound));
   // Return the list of OmniStudio components
   return objectsFound;
+}
+
+
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  console.log('inside event --> ' + JSON.stringify(message));
+  if (message.msg === 'HIGHLIGHT_ELEMENT') {
+    console.log('inside HIGHLIGHT_ELEMENT');
+    const response = highlightElement(message.elementName);
+    sendResponse(response);
+  } else if (message.msg === 'REMOVE_HIGHLIGHT') {
+    const response = removeHighlight(message.elementName);
+    sendResponse(response);
+  }
+  return false; // Not doing any async work
+});
+
+// Method to highlight the child element
+function highlightElement(selector) {
+  const parentElement = document.querySelector(selector); // Parent element
+  if (parentElement) {
+    // Select the first child div
+    const childDiv = parentElement.querySelector('div');
+    if (childDiv) {
+      childDiv.style.border = '3px solid #007bff'; // Apply border instead of outline
+      childDiv.style.padding = '2px'; // Optionally add padding to make it stand out more
+      childDiv.style.borderRadius = '5px'; // Optional: rounded corners for a softer look
+      childDiv.style.boxShadow = '0 4px 15px rgba(0, 123, 255, 0.5)'; // Subtle glow effect
+      return { success: true, message: 'Child element highlighted.' };
+    } else {
+      return { success: false, message: 'Child div not found.' };
+    }
+  } else {
+    return { success: false, message: 'Parent element not found.' };
+  }
+}
+
+// Method to remove the highlight from the child element
+function removeHighlight(selector) {
+  const parentElement = document.querySelector(selector); // Parent element
+  if (parentElement) {
+    const childDiv = parentElement.querySelector('div');
+    if (childDiv) {
+      childDiv.style.border = ''; // Remove border
+      childDiv.style.padding = ''; // Remove padding if added
+      childDiv.style.borderRadius = ''; // Remove border radius if added
+      childDiv.style.boxShadow = ''; // Remove box shadow if added
+      return { success: true, message: 'Highlight removed.' };
+    } else {
+      return { success: false, message: 'Child div not found.' };
+    }
+  } else {
+    return { success: false, message: 'Parent element not found.' };
+  }
 }
diff --git a/dist/js/index.3853c14f.js b/dist/js/index.3853c14f.js
diff --git a/dist/js/index.3853c14f.js.map b/dist/js/index.3853c14f.js.map
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.799bb3e1.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.042307f6.css" rel="stylesheet"><link href="/css/app.f2deb53f.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>