如何用JavaScript书签小工具逐个点击网页图标（含眼睛图标适配）？

Got it, let's build a robust bookmarklet that handles sequential icon clicks, including that special eye icon scenario. Here's a complete solution tailored to your needs—flexible, easy to adjust, and designed to work as a one-click bookmark.

Core Logic & Readable Code #

First, here's the human-readable JavaScript code so you can tweak selectors and timings to match your specific webpage:

(function() {
  // 🛠️ Configuration - Update these to match your page's elements
  const EYE_ICON_SELECTOR = ".icon.icon_eye"; // Replace with your eye icon's actual selector
  const TARGET_ICON_SELECTOR = "span.icon.icon_e"; // Your target icon selector (adjust as needed)
  const CLICK_DELAY = 500; // Delay between clicks (milliseconds) - increase if page is slow
  const MAX_ICONS_PER_PAGE = 16;

  // Helper: Safely click an element (skips disabled/hidden ones)
  function clickElement(el) {
    if (el && !el.disabled && el.offsetParent !== null) {
      el.click();
      return true;
    }
    return false;
  }

  async function runClickSequence() {
    // Step 1: Handle the special eye icon if present
    const eyeIcon = document.querySelector(EYE_ICON_SELECTOR);
    if (eyeIcon) {
      console.log("Detected eye icon—clicking first...");
      clickElement(eyeIcon);
      await new Promise(resolve => setTimeout(resolve, CLICK_DELAY));
    }

    // Step 2: Collect all target icons (limit to max per page)
    const targetIcons = Array.from(document.querySelectorAll(TARGET_ICON_SELECTOR)).slice(0, MAX_ICONS_PER_PAGE);
    console.log(`Found ${targetIcons.length} target icons to process`);

    // Step 3: Click each icon sequentially
    for (let i = 0; i < targetIcons.length; i++) {
      const icon = targetIcons[i];
      console.log(`Clicking icon ${i + 1}/${targetIcons.length}`);
      const clicked = clickElement(icon);
      if (!clicked) console.log(`Skipping icon ${i + 1} (not clickable)`);
      await new Promise(resolve => setTimeout(resolve, CLICK_DELAY));
    }

    console.log("✅ Click sequence completed!");
  }

  // Start the sequence
  runClickSequence().catch(err => console.error("❌ Error in sequence:", err));
})();

How to Turn This Into a Bookmarklet #

1. Minify & URL-encode the code: Use a JS minifier + URL encoder (or just use the pre-encoded version below).
2. Create a new bookmark: In your browser, add a new bookmark.
3. Paste the encoded code into the "URL" field: Name it something like "Sequential Icon Clicker".

Pre-Encoded Bookmarklet Code #

Copy this directly into your bookmark's URL field:

javascript:(function(){const e=".icon.icon_eye",t="span.icon.icon_e",n=500,o=16;function i(e){return!!(e&&!e.disabled&&null!==e.offsetParent)&&(e.click(),!0)}async function c(){const c=document.querySelector(e);if(c&&(console.log("Detected eye icon—clicking first..."),i(c),await new Promise(e=>setTimeout(e,n))),console.log(`Found ${(c=Array.from(document.querySelectorAll(t)).slice(0,o)).length} target icons to process`),c.length>0)for(let e=0;e<c.length;e++){const t=c[e];console.log(`Clicking icon ${e+1}/${c.length}`),i(t)||console.log(`Skipping icon ${e+1} (not clickable)`),await new Promise(e=>setTimeout(e,n))}console.log("✅ Click sequence completed!")}c().catch(e=>console.error("❌ Error in sequence:",e))})();

Key Notes for Customization #

• Adjust selectors: Use your browser's dev tools (right-click → Inspect → Copy selector) to get the exact CSS selectors for the eye icon and target icons. Replace the values in EYE_ICON_SELECTOR and TARGET_ICON_SELECTOR.
• Tweak delays: If the page takes time to respond after each click, increase CLICK_DELAY (e.g., to 1000 for 1 second between clicks).
• Dynamic content: If icons load after the page initializes, you might need to add a short wait at the start, or use a mutation observer—but this assumes icons are present when you click the bookmarklet.
• jQuery alternative: If your page uses jQuery, you can swap out the document.querySelector calls with $(selector)[0] for compatibility, but the vanilla JS version works on more sites.

内容的提问来源于stack exchange，提问作者Fabian Montossi