Need Help

[Mateo2000]

I am trying to create an extension for a drop down paragraph everytime I hover over a button that is under the search suggestion on google. I attached a image for more description. What did I do wrong in this code because everytime I test it out, it doesn't work. Thanks

 

[Mateo2000]

I am trying to create an extension for a drop down paragraph everytime I hover over a button that is under the search suggestion on google. I attached a image for more description. What did I do wrong in this code because everytime I test it out, it doesn't work. Thanks

Here is the code "
// Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Create a function that checks for the suggestions box
function checkForSuggestionsBox() {
// Try to find the Google search suggestions dropdown
const suggestionsBox = document.querySelector('.erkvQe'); // Google's class for the dropdown

if (suggestionsBox) {
// Query all suggestion items in the dropdown
const suggestionItems = suggestionsBox.querySelectorAll('.sbct'); // Google's class for suggestion items

// Iterate over each suggestion item
suggestionItems.forEach(function(suggestion) {
// Ensure the lightbulb button doesn't already exist in this suggestion item
if (!suggestion.querySelector('.lightbulb-button')) {
// Create your lightbulb button
const button = document.createElement('button');
button.style.width = '32px';
button.style.height = '32px';
button.style.backgroundImage = 'url("https://cdn-icons-png.flaticon.com/512/1237/1237106.png")';
button.style.backgroundSize = 'contain';
button.style.backgroundRepeat = 'no-repeat';
button.style.border = 'none';
button.style.cursor = 'pointer';
button.style.position = 'absolute'; // Position it relative to the suggestion item
button.style.right = '10px'; // Adjust as needed
button.style.top = '50%';
button.style.transform = 'translateY(-50%)'; // Center vertically
button.classList.add('lightbulb-button'); // Add a class for easier targeting

// Inject the button into the suggestion item
suggestion.appendChild(button);

// Add hover functionality
button.addEventListener('mouseenter', function() {
const hoverParagraph = document.createElement('div');
hoverParagraph.textContent = 'This is additional info.';
hoverParagraph.style.backgroundColor = '#f0f0f0';
hoverParagraph.style.border = '1px solid #ccc';
hoverParagraph.style.padding = '10px';
hoverParagraph.style.position = 'absolute';
hoverParagraph.style.zIndex = '1000';
hoverParagraph.style.top = suggestion.getBoundingClientRect().top + 'px';
hoverParagraph.style.left = (suggestion.getBoundingClientRect().right + 10) + 'px';

document.body.appendChild(hoverParagraph);

// Remove the hover paragraph on mouse leave
button.addEventListener('mouseleave', function() {
hoverParagraph.remove();
}, { once: true });
});
}
});
}
}

// Observe the entire body for changes (or just repeatedly check)
const observer = new MutationObserver(checkForSuggestionsBox);
observer.observe(document.body, { childList: true, subtree: true });

// Also run the check function every 500ms (in case MutationObserver doesn't catch all changes)
setInterval(checkForSuggestionsBox, 500);
});
"

And a attachment of what I mean as a dropdown paragraph.

 

[VBService]

When you provide the code, it will be easier for others to understand what might be going wrong and give you the necessary help. Please feel free to share the specific code you're working with!