Let's walk through the key issues in your code and how to fix them to get your click counter working properly:

1. Critical Script Order Error in popup.html #

In your popup.html, you're loading popup.js before jQuery. Since popup.js uses jQuery's $ function, this will throw an error because jQuery hasn't been loaded yet. Fix the order:

<!-- Before (broken): -->
<script src="popup.js"></script>
<script src="jquery-3.4.1.min.js"></script>

<!-- After (fixed): -->
<script src="jquery-3.4.1.min.js"></script>
<script src="popup.js"></script>

2. Transient Messaging vs Persistent Storage #

Directly sending messages from content.js to popup.js only works if the popup is open when the message is sent. If the popup is closed, the message is lost. Instead, use chrome.storage.local to persist the click count—this way, the count is saved even when the popup is closed, and the popup can retrieve it whenever it's opened.

Updated content.js #

Modify your content script to increment and save the count to storage when the button is clicked:

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById("nav-logobar-greeting");
  if (button) { // Avoid errors if the button doesn't exist on the page
    button.addEventListener("click", () => {
      // Get current count from storage (default to 0 if not set)
      chrome.storage.local.get('clickCount', (result) => {
        const newCount = (result.clickCount || 0) + 1;
        // Save the updated count back to storage
        chrome.storage.local.set({ clickCount: newCount }, () => {
          console.log(`Click count updated to: ${newCount}`);
        });
      });
    });
  }
});

3. Popup.js: Load Count on Open & Listen for Changes #

Update your popup script to:

• Load the saved count when the popup opens
• Listen for changes to storage (so the count updates in real-time if the button is clicked while the popup is open)
• Handle the reset and show buttons

Updated popup.js #

$(document).ready(function() {
  // Helper function to update the count display (keeps it 2 digits like your original)
  function updateCountDisplay(count) {
    $("#counts").text(count.toString().padStart(2, '0'));
  }

  // Load initial count when popup opens
  chrome.storage.local.get('clickCount', (result) => {
    updateCountDisplay(result.clickCount || 0);
  });

  // Listen for storage changes to update count in real-time
  chrome.storage.onChanged.addListener((changes) => {
    if (changes.clickCount) {
      updateCountDisplay(changes.clickCount.newValue || 0);
    }
  });

  // Reset button functionality
  $("#reset").click(() => {
    chrome.storage.local.set({ clickCount: 0 }, () => {
      updateCountDisplay(0);
    });
  });

  // Show button (refreshes count from storage)
  $("#show").click(() => {
    chrome.storage.local.get('clickCount', (result) => {
      updateCountDisplay(result.clickCount || 0);
    });
  });
});

4. Why Your Original Message Listener Didn't Work #

• The popup's message listener only runs if the popup is open when the message is sent. If the popup is closed, the listener doesn't exist to receive the message.
• Your $(document).ready inside the message listener was unnecessary—by the time the popup receives a message, the DOM is already fully loaded, so that callback never executes.

With these changes, your extension will:

• Track button clicks even when the popup is closed
• Show the latest count whenever you open the popup
• Update the count in real-time if you click the button while the popup is open
• Allow you to reset the count to 0

内容的提问来源于stack exchange，提问作者bharath kumar reddy