some potential issue with the loader, showing the loader even after the searching is completed with the text of searching.. (last search text). check and fix the code below:"chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "findSearchBox") {
const searchBox = findSearchBox();
if (searchBox) {
searchBox.focus();
searchBox.style.border = "2px solid red";
} else {
alert("No search box found on this page.");
}
} else if (request.action === "autoInputMultiple") {
performMultipleSearches(request.searchTerms);
}
});

function findSearchBox() {
const searchInputs = document.querySelectorAll('input[type="search"], input[name*="search"], input[id*="search"], input[class*="search"]');
if (searchInputs.length > 0) {
return searchInputs[0];
}
return null;
}

let globalLoader = null;

function createLoader() {
if (globalLoader) {
console.log('Loader already exists, returning existing loader');
return globalLoader;
}

console.log('Creating new loader');
const loader = document.createElement('div');
loader.id = 'search-loader';
loader.style.cssText = position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; ;
const messageElement = document.createElement('div');
messageElement.style.cssText = color: white; font-size: 24px; text-align: center; padding: 20px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; ;
messageElement.textContent = 'Searching...';
loader.appendChild(messageElement);
document.body.appendChild(loader);

globalLoader = {
updateMessage: (message) => {
console.log('Updating loader message:', message);
messageElement.textContent = message;
},
remove: () => {
console.log('Removing loader');
loader.remove();
globalLoader = null;
}
};

return globalLoader;
}

function forceRemoveLoader() {
const loader = document.getElementById('search-loader');
if (loader) {
console.log('Forcibly removing loader');
loader.remove();
}
globalLoader = null;
}

async function performMultipleSearches(searchTerms) {
const searchBox = findSearchBox();
if (!searchBox) {
alert("No search box found on this page.");
return;
}

console.log('Creating loader for multiple searches');
const loader = createLoader();

let aggregatedResults = '';

try {
for (let i = 0; i < searchTerms.length; i++) {
const term = searchTerms[i];
console.log(Searching for: ${term} (${i + 1}/${searchTerms.length}));
loader.updateMessage(Searching: ${term} (${i + 1}/${searchTerms.length}));


  searchBox.value = term;
  searchBox.dispatchEvent(new Event('input', { bubbles: true }));
  
  const enterEvent = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    key: 'Enter',
    keyCode: 13
  });
  searchBox.dispatchEvent(enterEvent);

  await waitForPageLoad();

  const pageContent = document.body.innerHTML;
  aggregatedResults += `<div class="search-result"><h2>Results for "${term}"</h2>${pageContent}</div>`;

  if (i < searchTerms.length - 1) {
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

console.log('All searches completed');
loader.updateMessage('Preparing results...');

await new Promise(resolve => setTimeout(resolve, 1000));

console.log('Removing loader after searches');
loader.remove();
forceRemoveLoader(); // Additional safeguard

console.log('Displaying results');
displayResults(aggregatedResults);
} catch (error) {
console.error('Error during search:', error);
alert(An error occurred during the search: ${error.message});
} finally {
console.log('Final check: Ensuring loader is removed');
forceRemoveLoader();
}
}

function displayResults(results) {
try {
console.log('Creating results container');
const resultsContainer = document.createElement('div');
resultsContainer.style.cssText = position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; overflow-y: auto; z-index: 10000; ;
resultsContainer.innerHTML = <div style="padding: 20px;"> <h1>Search Results</h1> <button id="closeResults" style="position: fixed; top: 10px; right: 10px;">Close</button> ${results} </div> ;
console.log('Appending results container to body');
document.body.appendChild(resultsContainer);


console.log('Adding event listener to close button');
document.getElementById('closeResults').addEventListener('click', () => {
  console.log('Closing results');
  resultsContainer.remove();
});
} catch (error) {
console.error('Error displaying results:', error);
alert(An error occurred while displaying results: ${error.message});
}
}

function waitForPageLoad(timeout = 10000) {
return new Promise((resolve, reject) => {
const startTime = Date.now();
const checkReadyState = () => {
if (document.readyState === 'complete') {
resolve();
} else if (Date.now() - startTime > timeout) {
reject(new Error('Page load timeout'));
} else {
setTimeout(checkReadyState, 100);
}
};
checkReadyState();
});
}"