inject svg v 1.0.1

tattle-made · Jun 25, 2024 · fd6213d · fd6213d
1 parent 6c4bb35
commit fd6213d
Show file tree

Hide file tree

Showing 4 changed files with 106 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,47 @@
+<!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>
+</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);
+
+            });
+        }
+    });
+});