Listen to URL Changes

[Asahi Suenaga]

Google Docs introduced Document Tabs in a recent update. I'm having issues with the caret keeping its styling when tabs are switched for my Chrome Extension. I've tried multiple times to detect the URL changes and update but I wasn't able to get it to work.

 URL Structure - document/d/[document_name]/edit?tab=t.[letters and numbers] 

  // Load saved settings
  chrome.storage.sync.get(['caretWidth', 'removeBlink', 'gradientStyle'], (result) => {
    caretWidthSelect.value = result.caretWidth || '2';
    removeBlinkSelect.value = result.removeBlink !== undefined ? String(result.removeBlink) : 'false';
    gradientStyleSelect.value = result.gradientStyle || 'dynamic'; // Load gradient style
  });

...

  // Check if user is in Google Docs
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentUrl = tabs[0].url;
    const isGoogleDocs = currentUrl.includes("docs.google.com/document");

    if (!isGoogleDocs) {
      // Show message and button if not in Google Docs
      infoMessage.innerHTML = `<p>${chrome.i18n.getMessage("notInDocsMessage")}</p>`;
      redirectContainer.style.display = 'block';
      optionsContainer.style.display = 'none';
      saveButton.style.display = 'none';
      upgradeButton.style.display = 'none';

      // Event listener for "Open Google Docs" button
      document.getElementById('redirectButton').addEventListener('click', () => {
        window.open('https://docs.google.com/document', '_blank');
      });
    } else {
      // Hide redirect message if in Google Docs
      redirectContainer.style.display = 'none';
    }
  });

[woxxom]

Assuming this code is inside the "action" popup or "sidePanel", you can use chrome.tabs.onUpdated event to observe the changes.

[Asahi Suenaga]

Thanks for your quick response. I did not realize that I had to make a Javascript service worker file in order for chrome.tabs.onUpdated to work as I wanted it. I wasted so much time 😭.