Userscript to report WooCom components detected on each visited page, by logging to console.log

list-detected-woocom-components.user.js

// ==UserScript==
// @name        WooCom Component Enumerator
// @namespace   woo.com.danq.me
// @match       https://woo.com/*
// @match       https://woocommerce.test/*
// @grant       none
// @version     1.0
// @author      -
// @description Lists detected WooCom PHP/React components in the console.log as-you-browse.
// ==/UserScript==

function enumerateComponents(){
  const CLASS_TO_DETECT = 'wccom-component';
  const CLASS_TO_MARK_REPORTED = 'wccom-component-enumerator-reported';
  const PREFIX = 'wccom-comp-';
  const PREFIX_REGEXP = new RegExp(`^${PREFIX}(.*)$`);
  [...document.querySelectorAll(`.${CLASS_TO_DETECT}:not(.${CLASS_TO_MARK_REPORTED})`)].forEach(component=>{
    const componentName = component.classList.entries().find(n=>n=~PREFIX_REGEXP)[1].substring(PREFIX.length);
    console.log(`Component: ${componentName}`);
    component.classList.add(CLASS_TO_MARK_REPORTED);
  });
}

addEventListener('DOMContentLoaded', enumerateComponents);
setInterval(enumerateComponents, 200);