+
+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus + reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias! +
+ crazy ++ Lorem ipsum dolor sit amet consectetur crazy adipisicing elit. Quaerat alias iste quo exercitationem stupid + nesciunt ea? +
+ ++ Lorem ipsum, dolor sit amet stupid mad adipisicing elit. Magni minima adipisci architecto. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa possimus quisquam temporibus + reprehenderit nesciunt dignissimos sunt ipsum, nostrum modi? Iusto libero sed alias! +
+ crazy ++ Lorem ipsum dolor crazy stupid sit stupid amet consectetur adipisicing elit. Aut architecto illum dolorum + mad. +
+ + + + + + + + \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/inject_svg/info.svg b/browser-extension/c4gt_testing_code/inject_svg/info.svg new file mode 100644 index 00000000..1196cac6 --- /dev/null +++ b/browser-extension/c4gt_testing_code/inject_svg/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver1.js b/browser-extension/c4gt_testing_code/inject_svg/ver1.js new file mode 100644 index 00000000..625bf3b4 --- /dev/null +++ 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}`); + + // 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%'; + }); + } +}); \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver2.js b/browser-extension/c4gt_testing_code/inject_svg/ver2.js new file mode 100644 index 00000000..b57a9d91 --- /dev/null +++ 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}`); + + // 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); + + }); + } + }); +}); \ No newline at end of file diff --git a/browser-extension/c4gt_testing_code/inject_svg/ver3.js b/browser-extension/c4gt_testing_code/inject_svg/ver3.js new file mode 100644 index 00000000..2aa5755c --- /dev/null +++ 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}`); + + // 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(); + }); + }); + + }); + } + }); +});