Skip to content

Instantly share code, notes, and snippets.

@Dan-Q
Created April 2, 2024 21:04
Show Gist options
  • Save Dan-Q/b02159814a8d1dd0ac386ed3acd3cd84 to your computer and use it in GitHub Desktop.
Save Dan-Q/b02159814a8d1dd0ac386ed3acd3cd84 to your computer and use it in GitHub Desktop.
Userscript to report WooCom components detected on each visited page, by logging to console.log
// ==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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment