如何用Tampermonkey统计指定class元素数量并弹窗展示

操作步骤 #

• 打开浏览器的Tampermonkey插件，点击「添加新脚本」
• 删除默认的模板代码，替换成下面的脚本
• 根据需求修改类名和生效网站范围
• 按Ctrl+S保存脚本，刷新你要统计的页面即可看到结果

完整脚本代码 #

// ==UserScript==
// @name         统计指定类元素数量
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  页面加载完成后统计指定类的元素总数并弹窗展示
// @author       自定义你的名字
// @match        *://*/*  // 如需限定网站，替换成具体域名，比如 https://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听页面完全加载事件
    window.addEventListener('load', function() {
        // 这里修改为你要统计的类名，前面必须加.，比如统计class为"content"的元素就写".content"
        const targetClass = '.main';
        // 获取所有匹配该类的元素
        const elementList = document.querySelectorAll(targetClass);
        // 弹窗显示统计结果
        alert(`类名为 ${targetClass.replace('.', '')} 的元素总数：${elementList.length}`);
    });
})();

关键部分说明 #

• @match 行：默认是所有网站生效，如果你只想在某一个网站用，把*://*/*改成目标网站的域名，比如https://www.xxx.com/*，这样脚本只会在该网站运行
• targetClass 变量：修改成你要统计的类，注意必须以.开头，这是CSS选择器的规则
• window.addEventListener('load')：确保页面上所有图片、元素都加载完成后再统计，避免出现统计不全的情况

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