Usefull Scripts

A usfull set of scripts for your projects

Element outline script

Simply set the document.querySelectorAll to the outermost element and everything inside of it will be outlined

Script for use inline in HTML

 <script>
      window.addEventListener("DOMContentLoaded", () => {
        const colors = [
          "red",
          "blue",
          "green",
          "orange",
          "purple",
          "cyan",
          "magenta",
        ];
        document.querySelectorAll("#whyFrontSection *").forEach((el, i) => {
          el.style.outline = `1px solid ${colors[i % colors.length]}`;
        });
      });
    </script>

Script for use in the browser console

(() => {
  const colors = [
    "red",
    "blue",
    "green",
    "orange",
    "purple",
    "cyan",
    "magenta",
  ];
  document.querySelectorAll(".panel-grid.panel-has-style *").forEach((el, i) => {
    el.style.outline = `1px solid ${colors[i % colors.length]}`;
  });
})();

🔗 Link Extractor & Highlighter Script for Web Cloning

This script is designed to highlight and extract all <a> tag links from a webpage. It's ideal when you're duplicating or analyzing a page that includes linked images, inline text links, and heading links, and you need a fast way to audit or copy all URLs.

---

✅ What It Does:

• Highlights every <a> tag on the page with a red outline.
• Adds a data-link-index attribute for easier tracking.
• Extracts each link’s:
• Index number
• Destination URL (href)
• Type (Image Link or Text Link)
• Display text or image alt (fallbacks to [image] if missing)
• Outputs everything in a clean console table.

---

🧪 How to Use It:

1. Open the page you want to analyze in Google Chrome.
2. Right-click anywhere on the page and choose Inspect.
3. In the Console tab, paste the script below and hit Enter:

// Add visual index badge and outline each link
document.querySelectorAll('a').forEach((el, i) => {
  el.style.outline = '2px solid blue';
  el.setAttribute('data-link-index', i + 1);

  // Create badge element
  const badge = document.createElement('div');
  badge.textContent = i + 1;
  badge.style.position = 'absolute';
  badge.style.background = 'yellow';
  badge.style.color = 'black';
  badge.style.fontSize = '10px';
  badge.style.padding = '2px 4px';
  badge.style.border = '1px solid black';
  badge.style.borderRadius = '3px';
  badge.style.zIndex = '9999';
  badge.style.transform = 'translate(-50%, -50%)';

  // Position badge
  const rect = el.getBoundingClientRect();
  badge.style.left = `${rect.left + window.scrollX}px`;
  badge.style.top = `${rect.top + window.scrollY}px`;
  badge.style.position = 'absolute';

  document.body.appendChild(badge);
});

// Extract and log link data
const links = Array.from(document.querySelectorAll('a')).map((a, i) => {
  const text = a.textContent.trim();
  const img = a.querySelector('img');
  return {
    index: i + 1,
    href: a.href,
    type: img ? 'Image Link' : 'Text Link',
    content: img ? (img.alt || '[image]') : text
  };
});

console.table(links);

1. Copy the table from the console (right-click → Copy table) and paste it into a spreadsheet or Markdown file.

---

💡 Tip:

Use this when replicating legacy or unstructured pages where link tracking and structure aren’t obvious from the visual layout alone.