如何增强Pesticide Chrome扩展：实现hover/click时显示元素类名？

方案1：修改Pesticide扩展源码直接增强功能 #

Pesticide本身没有内置类名显示功能，你可以直接修改它的源码添加这个特性：

1. 打开Chrome扩展管理页面：在地址栏输入chrome://extensions/，开启开发者模式。
2. 找到Pesticide扩展，点击「详细信息」→「查看源文件」，打开扩展的本地代码目录。
3. 找到核心注入脚本（通常命名为pesticide.js），在文件末尾添加以下代码：

// 鼠标hover显示元素类名
document.addEventListener('mouseover', (e) => {
  const el = e.target;
  if (!el.classList.length) return;

  let tooltip = document.getElementById('pesticide-class-tooltip');
  if (!tooltip) {
    tooltip = document.createElement('div');
    tooltip.id = 'pesticide-class-tooltip';
    tooltip.style.cssText = `
      position: fixed;
      background: #222;
      color: #fff;
      padding: 3px 6px;
      border-radius: 3px;
      z-index: 999999;
      font-size: 12px;
      pointer-events: none;
      font-family: monospace;
    `;
    document.body.appendChild(tooltip);
  }

  tooltip.textContent = `.${el.classList.join(' .')}`;
  tooltip.style.left = `${e.pageX + 8}px`;
  tooltip.style.top = `${e.pageY + 8}px`;
  tooltip.style.display = 'block';
});

// 鼠标移出隐藏提示
document.addEventListener('mouseout', () => {
  const tooltip = document.getElementById('pesticide-class-tooltip');
  if (tooltip) tooltip.style.display = 'none';
});

// 点击元素固定显示类名（可选）
document.addEventListener('click', (e) => {
  e.preventDefault();
  const el = e.target;
  if (!el.classList.length) return;

  const tooltip = document.getElementById('pesticide-class-tooltip');
  if (tooltip) {
    tooltip.textContent = `[点击选中] .${el.classList.join(' .')}`;
    tooltip.style.left = `${e.pageX + 8}px`;
    tooltip.style.top = `${e.pageY + 8}px`;
    tooltip.style.display = 'block';
  }
});

4. 保存修改后，回到扩展管理页面，刷新Pesticide扩展，重新启用即可生效。

方案2：用用户脚本实现，无需修改扩展本身 #

如果你不想改动扩展源码，可以用Tampermonkey这类用户脚本工具，实现仅在Pesticide激活时显示类名：

1. 安装Tampermonkey扩展后，创建新脚本，粘贴以下代码：

// ==UserScript==
// @name         Pesticide Class Name Tooltip
// @version      0.1
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // 检测Pesticide是否激活
  const isPesticideActive = () => document.body.classList.contains('pesticide');

  // 创建全局提示元素
  const tooltip = document.createElement('div');
  tooltip.id = 'pesticide-class-tooltip';
  tooltip.style.cssText = `
    position: fixed;
    background: #222;
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    z-index: 999999;
    font-size: 12px;
    pointer-events: none;
    font-family: monospace;
    display: none;
  `;
  document.body.appendChild(tooltip);

  // Hover事件监听
  document.addEventListener('mouseover', (e) => {
    if (!isPesticideActive()) return;
    const el = e.target;
    if (!el.classList.length) return;

    tooltip.textContent = `.${el.classList.join(' .')}`;
    tooltip.style.left = `${e.pageX + 8}px`;
    tooltip.style.top = `${e.pageY + 8}px`;
    tooltip.style.display = 'block';
  });

  document.addEventListener('mouseout', () => {
    if (!isPesticideActive()) return;
    tooltip.style.display = 'none';
  });

  // 点击固定提示
  document.addEventListener('click', (e) => {
    if (!isPesticideActive()) return;
    e.preventDefault();
    const el = e.target;
    if (!el.classList.length) return;

    tooltip.textContent = `[选中] .${el.classList.join(' .')}`;
    tooltip.style.left = `${e.pageX + 8}px`;
    tooltip.style.top = `${e.pageY + 8}px`;
    tooltip.style.display = 'block';
  });
})();

2. 保存脚本后，只要激活Pesticide，hover或点击元素就会显示对应的类名。

方案3：Chrome开发者工具替代方案 #

如果不想折腾扩展或脚本，Chrome原生DevTools就能满足需求：

• 按F12打开DevTools，点击左上角的「选择元素」按钮（或快捷键Ctrl+Shift+C），此时hover页面元素，DevTools的Elements面板会实时显示该元素的所有类名，同时悬浮提示也会展示类名信息。
• 若需要更直观的显示，可以在DevTools的「Settings」→「Appearance」中调整样式，让类名更醒目。

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