Chrome扩展开发问题：需手动点击图标及刷新才能获取商品DOM数据

Hey there! As someone who's built a few Chrome extensions for scraping e-commerce data, I totally get your frustration—manual refreshes and clicking the icon every time is such a pain. Let's fix this step by step:

The core issue here is that your extension only triggers data collection when you click the icon. Instead, we can use content scripts to automatically run your scraping logic whenever you load a Flipkart product page.

First, update your manifest.json (stick to Manifest V3, the latest standard) to inject your script automatically:

{
  "manifest_version": 3,
  "name": "Product Scraper",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.flipkart.com/*/product/*"], // Target all Flipkart product pages
      "js": ["content.js"], // Your scraping logic file
      "run_at": "document_idle" // Run after the page is fully loaded and ready
    }
  ]
}

Drop your existing data-fetching code into content.js—this script will now run automatically every time you land on a Flipkart product page, no icon click required.

Flipkart uses a single-page application (SPA) setup, which means navigating between product pages doesn’t reload the entire browser window. That’s why your original script only worked after a refresh—content scripts don’t re-run on SPA route changes by default.

To fix this, add URL change detection logic to your content.js:

let currentUrl = window.location.href;

// Check for URL updates every second (adjust the interval if needed)
setInterval(() => {
  if (window.location.href !== currentUrl) {
    currentUrl = window.location.href;
    // Re-run your data fetching function
    fetchProductDetails();
  }
}, 1000);

function fetchProductDetails() {
  // Wait for dynamic content to load (Flipkart loads product info asynchronously)
  const observer = new MutationObserver((mutations) => {
    // Use Flipkart's actual element selectors (verify these in DevTools!)
    const productName = document.querySelector('span.B_NuCI');
    const productPrice = document.querySelector('div._30jeq3');

    if (productName && productPrice) {
      console.log('Product Name:', productName.textContent.trim());
      console.log('Product Price:', productPrice.textContent.trim());
      observer.disconnect(); // Stop observing once we've grabbed the data
    }
  });

  // Watch for changes across the entire page to catch dynamic content
  observer.observe(document.body, { childList: true, subtree: true });
}

// Run once on the initial page load
fetchProductDetails();

Quick Tips: #

• Verify Selectors: Flipkart might tweak their class names over time. Right-click the product name/price in DevTools, select "Copy > Copy selector" to get the latest working selectors.
• MutationObserver > Timeouts: This method waits until the elements actually exist on the page, which is way more reliable than guessing a wait time with setTimeout.
• Manifest V2 Compatibility: If you’re still using V2, the content script setup is slightly different, but the core logic (automatic injection + URL change detection) stays the same.

If you still want the extension icon to display collected data, you can have the content script send data to the popup automatically. Use Chrome’s runtime.sendMessage API to pass the product details from content.js to your popup script whenever new data is fetched.

内容的提问来源于stack exchange，提问作者Dev Solanki