BetterChub/content.js

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');