求可用于Chrome扩展或纯JS的getEventListeners替代方法

Great question! I’ve dealt with this exact challenge when building Chrome extensions that need to cut through thousands of DOM elements to focus only on interactive ones—total game-changer for performance. Unfortunately, getEventListeners() is a DevTools-only internal API, so we can’t use it directly in extensions or regular JS. But there are three solid workarounds tailored to your needs:

1. Hook addEventListener to Track Events in Real-Time #

This method lets you actively monitor when click events are bound to elements, so you never have to scan the entire DOM. It’s perfect for catching both existing and future event bindings (with a small caveat for pre-bound events).

Implementation Code: #

// Save the original event methods to avoid breaking functionality
const originalAdd = EventTarget.prototype.addEventListener;
const originalRemove = EventTarget.prototype.removeEventListener;

// Use a WeakSet to store elements with click listeners (automatically cleans up when elements are removed)
const clickBoundElements = new WeakSet();

// Override addEventListener to track click bindings
EventTarget.prototype.addEventListener = function(type, listener, options) {
  if (type === 'click') {
    clickBoundElements.add(this);
  }
  return originalAdd.call(this, type, listener, options);
};

// Override removeEventListener to clean up when listeners are removed
EventTarget.prototype.removeEventListener = function(type, listener, options) {
  if (type === 'click') {
    clickBoundElements.delete(this);
  }
  return originalRemove.call(this, type, listener, options);
};

// Helper to get all elements with click listeners
function getClickElements() {
  return Array.from(clickBoundElements);
}

Pros & Cons: #

• ✅ Super efficient—no DOM traversal needed
• ✅ Tracks future event bindings automatically
• ❌ Doesn’t capture events bound before your script runs (fix this by combining with method 2)

2. Scan Targeted DOM Elements for Existing Listeners #

If you need to catch elements that already had click listeners when your extension loads, you can narrow down candidates to likely interactive elements (instead of scanning all 5000+ elements) and check for event handlers.

Implementation Code: #

function findPreBoundClickElements() {
  // Target only elements that are likely clickable (reduces scan size drastically)
  const candidates = document.querySelectorAll('a, button, [onclick], [style*="cursor:pointer"], [role="button"]');
  const result = [];

  for (const elem of candidates) {
    // Check inline onclick attributes first
    if (elem.onclick) {
      result.push(elem);
      continue;
    }

    // Check for listeners added via addEventListener (uses non-standard but Chrome-friendly property)
    if (elem.__eventListeners__?.click?.length > 0) {
      result.push(elem);
    }
  }

  return result;
}

Pros & Cons: #

• ✅ Avoids scanning the entire DOM
• ✅ Catches pre-bound events
• ❌ Relies on a non-standard __eventListeners__ property (works reliably in Chrome, but not across all browsers)

3. Use Chrome’s Debugger API (Official DevTools-like Solution) #

For the most accurate results matching getEventListeners(), use Chrome’s Debugger API. This lets your extension tap into the same internal logic DevTools uses, but requires extra setup and permissions.

Implementation Steps: #

1. Add the debugger permission to your extension’s manifest.json:

{
  "permissions": ["debugger"]
}

2. Use this code in your background or content script to fetch event listeners:

async function getElementClickListeners(tabId, elementSelector) {
  // Attach to the target tab
  await chrome.debugger.attach({tabId}, "1.3");

  try {
    // Get the element's object ID (required for the debugger command)
    const {result: {objectId}} = await chrome.debugger.sendCommand({tabId}, "DOM.querySelector", {
      selector: elementSelector
    });

    // Fetch all event listeners for the element
    const {listeners} = await chrome.debugger.sendCommand({tabId}, "DOMDebugger.getEventListeners", {
      objectId
    });

    // Check if any listener is a click event
    return listeners.some(listener => listener.type === "click");
  } finally {
    // Always detach to avoid leaving the debugger active
    await chrome.debugger.detach({tabId});
  }
}

Pros & Cons: #

• ✅ 1:1 match with DevTools’ getEventListeners() accuracy
• ✅ Official, supported API
• ❌ Requires extra permissions and setup
• ❌ Can be slower than the other methods for bulk checks

Final Recommendation #

Combine method 1 and method 2 for the best results:

1. Use method 2 to catch all pre-bound click elements when your extension loads.
2. Use method 1 to track any new click bindings that happen after your extension starts.

This way you get full coverage with minimal performance overhead, perfect for your use case where you only care about ~50 elements out of 5000+.

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