Asset Scanner JS (asset-scanner-js)

A lightweight, zero-dependency JavaScript utility to inspect, extract, and list all image URLs and CSS font families rendered on any webpage.

📌 Overview

Asset Scanner JS is a browser-side utility script designed to analyze the active Document Object Model (DOM) and computed CSS styles. It automatically collects:

Images: tag sources (src, currentSrc) and CSS background-image URLs.

Fonts: Active CSS font-family declarations applied directly to text-rendering DOM elements.

This tool is useful for web auditing, design extraction, asset migration, and accessibility/compliance checks.

✨ Features

⚡ Zero Dependencies: Pure Vanilla JavaScript execution—no external libraries or build steps needed.

🖼️ Comprehensive Image Extraction: Captures standard HTML images as well as CSS background image declarations.

🔤 Precise Font Detection: Scans computed element styles to find active, rendered font-family declarations.

🧹 De-duplicated Results: Returns clean, unique arrays of URLs and font family names.

🌐 Browser Console Ready: Can be executed instantly via Developer Tools or saved as a browser Bookmarklet.

🚀 Quick Start / Usage

Option 1: Browser Console Execution

Open any webpage in your web browser.

Open the Developer Tools console: Windows/Linux: F12 or Ctrl + Shift + J macOS: Cmd + Option + J

Paste the snippet into the console and press Enter:

(() => { // 1. Identify all Image Elements & Background Images const getWebsiteImages = () => { const images = new Set();

// Standard <img> elements
document.querySelectorAll('img').forEach(img => {
  const src = img.currentSrc || img.src;
  if (src) images.add(src);
});

// CSS Background Images
document.querySelectorAll('*').forEach(el => {
  const bgImage = window.getComputedStyle(el).backgroundImage;
  if (bgImage && bgImage !== 'none') {
    const matches = bgImage.match(/url\(['"]?(.*?)['"]?\)/g);
    if (matches) {
      matches.forEach(url => {
        const cleanUrl = url.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
        images.add(cleanUrl);
      });
    }
  }
});

return Array.from(images);

};

// 2. Identify all Rendered Fonts const getWebsiteFonts = () => { const fontFamilies = new Set();

document.querySelectorAll('*').forEach(el => {
  // Filter for elements containing rendered text
  if (el.children.length === 0 && el.textContent.trim().length > 0) {
    const family = window.getComputedStyle(el).fontFamily;
    if (family) {
      fontFamilies.add(family.replace(/["']/g, ''));
    }
  }
});

return Array.from(fontFamilies);

};

// Log outputs to console console.log('--- IMAGES FOUND ---', getWebsiteImages()); console.log('--- FONTS USED ---', getWebsiteFonts()); })();

📂 Example Output

When executed in the developer console, the script outputs formatted arrays:

--- IMAGES FOUND --- [ "https://example.com/assets/logo.png", "https://example.com/assets/hero-bg.jpg", "https://example.com/assets/icon-check.svg" ]

--- FONTS USED --- [ "Inter, sans-serif", "Roboto Mono, monospace", "Georgia, serif" ]

🔧 How It Works

getWebsiteImages(): Iterates through all HTML elements to read currentSrc or src. Next, it queries every DOM element via window.getComputedStyle() to locate active CSS background-image properties, extracting cleaned image URLs via regular expression matching.

getWebsiteFonts(): Traverses leaf nodes in the DOM tree containing actual non-whitespace text. It evaluates the computed font-family property to determine which font stack is actively applied to text elements across the page.

📝 License

Distributed under the MIT License. See LICENSE for details.