Upload 4 files

BetterChub/background.js

@@ -0,0 +1,22 @@
+console.log('Background script loaded');
+
+let apiUrl = '';
+
+chrome.webRequest.onBeforeSendHeaders.addListener(
+  (details) => {
+    console.log('Intercepted request:', details.url);
+    const apiKeyHeader = details.requestHeaders.find(h => h.name === 'CH-API-KEY');
+    if (apiKeyHeader) {
+      console.log('API Key found:', apiKeyHeader.value);
+      chrome.storage.local.set({ apiKey: apiKeyHeader.value });
+    }
+    if (details.url.includes('api.chub.ai/search')) {
+      console.log('API URL found:', details.url);
+      apiUrl = details.url;
+      chrome.storage.local.set({ apiUrl: details.url });
+    }
+    return { requestHeaders: details.requestHeaders };
+  },
+  { urls: ["https://api.chub.ai/*"] },
+  ["requestHeaders"]
+);

BetterChub/content.js

@@ -0,0 +1,199 @@
+console.log('Content script loaded');
+
+let currentPage = 1;
+let totalPages = 1;
+let apiKey = '';
+let apiUrl = '';
+let lastUrl = '';
+
+function createNavigationHTML() {
+  return `
+    <div class="nav-row">
+      <button id="firstPage" class="ant-btn css-s6hibu ant-btn-default"><span>First</span></button>
+      <button id="prevPage" class="ant-btn css-s6hibu ant-btn-default"><span>Previous</span></button>
+      <span id="pageInfo">Loading...</span>
+      <button id="nextPage" class="ant-btn css-s6hibu ant-btn-default"><span>Next</span></button>
+      <button id="lastPage" class="ant-btn css-s6hibu ant-btn-default"><span>Last</span></button>
+    </div>
+    <div class="nav-row">
+      <div class="input-group">
+        <input type="number" id="pageInput" min="1" max="${totalPages}" value="${currentPage}">
+        <button id="goToPage" class="ant-btn css-s6hibu ant-btn-default"><span>Go</span></button>
+      </div>
+    </div>
+  `;
+}
+
+function updateNavigation() {
+  console.log('Updating navigation');
+  const navContainers = document.querySelectorAll('.navigation-container');
+  if (navContainers.length === 0) {
+    console.error('Navigation containers not found');
+    return;
+  }
+
+  navContainers.forEach(container => {
+    container.innerHTML = createNavigationHTML();
+    
+    container.querySelector('#firstPage').addEventListener('click', () => changePage(1));
+    container.querySelector('#prevPage').addEventListener('click', () => changePage(currentPage - 1));
+    container.querySelector('#nextPage').addEventListener('click', () => changePage(currentPage + 1));
+    container.querySelector('#lastPage').addEventListener('click', () => changePage(totalPages));
+    container.querySelector('#goToPage').addEventListener('click', () => {
+      const pageInput = container.querySelector('#pageInput');
+      changePage(parseInt(pageInput.value));
+    });
+  });
+
+  updatePageInfo();
+  console.log('Navigation updated successfully');
+}
+
+function updatePageInfo() {
+  const pageInfoElements = document.querySelectorAll('#pageInfo');
+  pageInfoElements.forEach(element => {
+    element.textContent = `Page ${currentPage} of ${totalPages}`;
+  });
+}
+
+function changePage(newPage) {
+  console.log(`Changing page to ${newPage}`);
+  if (newPage < 1 || newPage > totalPages) {
+    console.warn(`Invalid page number: ${newPage}`);
+    return;
+  }
+  currentPage = newPage;
+  updateNavigation();
+  // Update URL and trigger page reload
+  const url = new URL(window.location.href);
+  url.searchParams.set('page', currentPage);
+  console.log(`Navigating to: ${url.toString()}`);
+  window.location.href = url.toString();
+}
+
+async function findTotalPages() {
+  console.log('Finding total pages');
+  let left = 1;
+  let right = 1000; // Assuming a reasonable upper limit
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    console.log(`Checking page ${mid}`);
+    const hasContent = await checkPageContent(mid);
+
+    if (hasContent) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  console.log(`Total pages found: ${right}`);
+  return right; // This will be the last page with content
+}
+
+async function checkPageContent(page) {
+  const url = new URL(apiUrl);
+  url.searchParams.set('page', page);
+
+  console.log(`Checking content for page ${page}`);
+  try {
+    const response = await fetch(url.toString(), {
+      headers: { 'CH-API-KEY': apiKey }
+    });
+    const data = await response.json();
+    console.log(`Page ${page} content:`, data);
+    return data.data.nodes.length > 0;
+  } catch (error) {
+    console.error(`Error checking page ${page}:`, error);
+    return false;
+  }
+}
+
+async function initializeNavigation() {
+  console.log('Initializing navigation');
+  currentPage = parseInt(new URL(window.location.href).searchParams.get('page') || '1');
+  console.log(`Current page: ${currentPage}`);
+  totalPages = await findTotalPages();
+  updateNavigation();
+}
+
+function waitForApiInfo() {
+  chrome.storage.local.get(['apiKey', 'apiUrl'], async (result) => {
+    console.log('Retrieved from storage:', result);
+    if (result.apiKey && result.apiUrl) {
+      apiKey = result.apiKey;
+      apiUrl = result.apiUrl;
+      console.log('API Key and URL found, initializing navigation');
+      await initializeNavigation();
+    } else {
+      console.log('API Key or URL missing, retrying in 1 second');
+      setTimeout(waitForApiInfo, 1000);
+    }
+  });
+}
+
+function addNavigationContainers() {
+  const containerDiv = document.querySelector('.mt-2');
+  if (containerDiv) {
+    // Remove any existing navigation containers
+    containerDiv.querySelectorAll('.navigation-container').forEach(el => el.remove());
+
+    // Add top navigation
+    const topNav = document.createElement('div');
+    topNav.className = 'navigation-container top-nav';
+    topNav.innerHTML = createNavigationHTML();
+    containerDiv.insertBefore(topNav, containerDiv.firstChild);
+
+    // Replace bottom navigation
+    const bottomNav = containerDiv.querySelector('.flex.justify-between.mt-4');
+    if (bottomNav) {
+      bottomNav.className = 'navigation-container bottom-nav';
+      bottomNav.innerHTML = createNavigationHTML();
+    } else {
+      const newBottomNav = document.createElement('div');
+      newBottomNav.className = 'navigation-container bottom-nav';
+      newBottomNav.innerHTML = createNavigationHTML();
+      containerDiv.appendChild(newBottomNav);
+    }
+
+    updateNavigation();
+  } else {
+    console.error('Container div not found');
+  }
+}
+
+function checkUrlChange() {
+  const currentUrl = window.location.href;
+  if (currentUrl !== lastUrl) {
+    console.log('URL changed, reinitializing navigation');
+    lastUrl = currentUrl;
+    waitForApiInfo();
+  }
+}
+
+// Start the process once the page is fully loaded
+window.addEventListener('load', () => {
+  console.log('Page fully loaded, starting navigation enhancement');
+  lastUrl = window.location.href;
+  addNavigationContainers();
+  waitForApiInfo();
+});
+
+// Check for URL changes
+setInterval(checkUrlChange, 1000);
+
+// Observe DOM changes to add navigation containers when the character list is loaded
+const observer = new MutationObserver((mutations) => {
+  for (const mutation of mutations) {
+    if (mutation.type === 'childList' && document.querySelector('.mt-2')) {
+      console.log('Character list container found, adding navigation containers');
+      addNavigationContainers();
+      observer.disconnect(); // Stop observing once we've added the navigation containers
+    }
+  }
+});
+
+observer.observe(document.body, { childList: true, subtree: true });
+
+console.log('Content script finished loading');

BetterChub/manifest.json

@@ -0,0 +1,18 @@
+{
+  "manifest_version": 3,
+  "name": "BetterChub",
+  "version": "1.0",
+  "description": "Navigation does *tap* *tap*",
+  "permissions": ["webRequest", "storage"],
+  "host_permissions": ["https://chub.ai/*", "https://api.chub.ai/*"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://chub.ai/*"],
+      "js": ["content.js"],
+      "css": ["styles.css"]
+    }
+  ]
+}

BetterChub/styles.css

@@ -0,0 +1,38 @@
+.navigation-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.nav-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem 0;
+}
+
+#pageInfo {
+  margin: 0 1rem;
+  font-weight: bold;
+}
+
+.input-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#pageInput {
+  width: 50px;
+  margin-right: 0.5rem;
+}
+
+.top-nav {
+  margin-bottom: 1rem;
+}
+
+.bottom-nav {
+  margin-top: 1rem;
+}