Skip to content

Commit

Permalink
code sync
Browse files Browse the repository at this point in the history
  • Loading branch information
hardik-pratap-singh committed Jul 18, 2024
1 parent 6c4bb35 commit 5d744ff
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 0 deletions.
48 changes: 48 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/index.html
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions browser-extension/c4gt_testing_code/inject_svg/info.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver1.js
Original file line number Diff line number Diff line change
@@ -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%';
});
}
});
28 changes: 28 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver2.js
Original file line number Diff line number Diff line change
@@ -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);

});
}
});
});
48 changes: 48 additions & 0 deletions browser-extension/c4gt_testing_code/inject_svg/ver3.js
Original file line number Diff line number Diff line change
@@ -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();
});
});

});
}
});
});

0 comments on commit 5d744ff

Please sign in to comment.