code sync

tattle-made · Jul 18, 2024 · 5d744ff · 5d744ff
1 parent 6c4bb35
commit 5d744ff
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 0 deletions.
diff --git a/browser-extension/c4gt_testing_code/inject_svg/index.html b/browser-extension/c4gt_testing_code/inject_svg/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+<body>
+    <div>
+        <p>
+            Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid
+            nesciunt ea?
+        </p>
+
+        <p>
+            Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto.
+        </p>
+    </div>
+
+    <div class="class">
+        <img src="" alt="">
+        <div>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus
+                reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias!
+            </p>
+            <span>crazy</span>
+        </div>
+    </div>
+    <h3>
+        crazy
+    </h3>
+    <p>
+        Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum
+        mad.
+    </p>
+
+    <button>
+        crazy
+    </button>
+    <!-- <script src="./ver1.js"></script> -->
+    <!-- <script src="./ver2.js"></script> -->
+    <script src="./ver3.js"></script>
+</body>
+
+</html>
diff --git a/browser-extension/c4gt_testing_code/inject_svg/info.svg b/browser-extension/c4gt_testing_code/inject_svg/info.svg
diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver1.js b/browser-extension/c4gt_testing_code/inject_svg/ver1.js
@@ -0,0 +1,30 @@
+// Find all elements that contain the target word
+const iconSrc = './info.svg';
+const iconAlt = 'Icon description'; 
+const targetWord = 'crazy'; 
+
+// Find all elements that contain the target word
+document.querySelectorAll('*').forEach(element => {
+    // Use innerHTML to ensure all text content is considered
+    if (element.innerHTML.includes(targetWord)) {
+        // Split the innerHTML into parts to handle replacements
+        const parts = element.innerHTML.split(targetWord);
+        const replacedHTML = parts.join(`${targetWord}<span class="icon-container"></span>`);
+
+        // Update the element with the replaced content
+        element.innerHTML = replacedHTML;
+
+        // Add icon after each occurrence of the target word
+        const iconContainers = element.querySelectorAll('.icon-container');
+        iconContainers.forEach(container => {
+            const icon = document.createElement('img');
+            icon.src = iconSrc;
+            icon.alt = iconAlt;
+            container.appendChild(icon);
+
+            // Optionally, adjust icon styles here
+            // icon.style.width = '5%';
+            // icon.style.height = '5%';
+        });
+    }
+});
diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver2.js b/browser-extension/c4gt_testing_code/inject_svg/ver2.js
@@ -0,0 +1,28 @@
+const iconSrc = './info.svg';
+const iconAlt = 'Icon description';
+const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words
+
+// Find all elements that contain any of the target words
+document.querySelectorAll('*').forEach(element => {
+    targetWords.forEach(targetWord => {
+        if (element.innerHTML.includes(targetWord)) {
+            const className = `icon-container-${targetWord}`;
+            // Split the innerHTML into parts to handle replacements
+            const parts = element.innerHTML.split(targetWord);
+            const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);
+
+            // Update the element with the replaced content
+            element.innerHTML = replacedHTML;
+
+            // Add icon after each occurrence of the target word
+            const iconContainers = element.querySelectorAll(`.${className}`);
+            iconContainers.forEach(container => {
+                const icon = document.createElement('img');
+                icon.src = iconSrc;
+                icon.alt = iconAlt;
+                container.appendChild(icon);
+
+            });
+        }
+    });
+});
diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver3.js b/browser-extension/c4gt_testing_code/inject_svg/ver3.js
@@ -0,0 +1,48 @@
+const iconSrc = './info.svg';
+const iconAlt = 'Icon description'; 
+const targetWords = ['crazy', 'stupid', 'mad']; // Replace with your list of target words
+
+document.querySelectorAll('*').forEach(element => {
+    targetWords.forEach(targetWord => {
+        if (element.innerHTML.includes(targetWord)) {
+            const className = `icon-container-${targetWord}`;
+            // Split the innerHTML into parts to handle replacements
+            const parts = element.innerHTML.split(targetWord);
+            const replacedHTML = parts.join(`${targetWord}<span class="${className}"></span>`);
+
+            // Update the element with the replaced content
+            element.innerHTML = replacedHTML;
+
+            // Add icon after each occurrence of the target word
+            const iconContainers = element.querySelectorAll(`.${className}`);
+
+            iconContainers.forEach(container => {
+                const icon = document.createElement('img');
+                icon.src = iconSrc;
+                icon.alt = iconAlt;
+                container.appendChild(icon);
+
+                console.log(icon)
+                // Hovering feature: Popup with content
+                icon.addEventListener('mouseover', () => {
+                    const popup = document.createElement('div');
+                    popup.className = 'popup-content';
+                    popup.textContent = "wow";
+                    // Positioning of the popup content
+                    popup.style.position = 'absolute';
+                    popup.style.left = `${icon.offsetLeft + icon.offsetWidth}px`;
+                    popup.style.top = `${icon.offsetTop}px`;
+                    // Append popup to the document body or relevant container
+                    document.body.appendChild(popup);
+                    // container.appendChild(popup);
+
+                    // Remove popup when mouseout
+                    icon.addEventListener('mouseout', () => {
+                        popup.remove();
+                    });
+                });
+
+            });
+        }
+    });
+});