initial commit

packages/KomSearcher/content.js

@@ -0,0 +1,84 @@
+// Detect the active site and add a magnifying lens in the appropriate location
+const siteHandlers = {
+  'mangadex.org': () => {
+    const headers = document.querySelectorAll('div.title p.mb-1'); // Select the text inside p.mb-1 within div.title
+    headers.forEach(header => addLens(header));
+  },
+  'anilist.co': () => {
+    const headers = document.querySelectorAll('.header-title');
+    headers.forEach(header => addLens(header));
+  },
+  'kitsu.app': () => {
+    const headers = document.querySelectorAll('section.media--title h3'); // Select the text inside h3 within section.media--title
+    headers.forEach(header => addLens(header));
+  },
+  'myanimelist.net': () => {
+    const headers = document.querySelectorAll('.title-name');
+    headers.forEach(header => addLens(header));
+  }
+};
+
+function addLens(header) {
+  // Check if the lens is already present
+  if (header.querySelector('span.lens-icon')) {
+    return; // Exit if the lens is already added
+  }
+
+  const lens = document.createElement('span');
+  lens.textContent = '🔍';
+  lens.className = 'lens-icon'; // Add a class to identify the lens
+  lens.style.cursor = 'pointer';
+  lens.style.marginLeft = '10px';
+  lens.title = 'Search for this title?'; // Add a tooltip to the lens
+  lens.addEventListener('click', () => {
+    const query = header.textContent.trim().replace('🔍', '').trim(); // Remove the lens icon from the query
+    console.log(`Searching for title: ${query}`);
+    chrome.runtime.sendMessage({ action: 'search', query }, (response) => {
+      if (response && response.results) {
+        displayResults(response.results);
+      }
+    });
+  });
+  header.appendChild(lens);
+}
+
+function displayResults(results) {
+  const resultWindow = document.createElement('div');
+  resultWindow.style.position = 'fixed';
+  resultWindow.style.top = '10px';
+  resultWindow.style.right = '10px';
+  resultWindow.style.backgroundColor = 'white';
+  resultWindow.style.border = '1px solid black';
+  resultWindow.style.padding = '10px';
+  resultWindow.style.zIndex = '10000';
+  resultWindow.style.maxHeight = '400px';
+  resultWindow.style.overflowY = 'auto'; // Make the result window scrollable
+
+  // Ensure results are displayed as titles
+  resultWindow.innerHTML = results.map(r => `<p>${r.title || 'No title available'}</p>`).join('');
+
+  // Remove any existing result window before appending a new one
+  const existingWindow = document.querySelector('.result-window');
+  if (existingWindow) {
+    existingWindow.remove();
+  }
+
+  resultWindow.className = 'result-window';
+  document.body.appendChild(resultWindow);
+}
+
+// Execute the handler for the current site immediately on page load
+const hostname = window.location.hostname;
+if (siteHandlers[hostname]) {
+  siteHandlers[hostname]();
+}
+
+// Listen for messages from the background script
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.action === 'addLens') {
+    const hostname = message.hostname;
+    if (siteHandlers[hostname]) {
+      siteHandlers[hostname]();
+    }
+  }
+});