DevStyle Extractor

DevStyle Extractor is a completely free, open-source Chrome extension designed to help front-end developers instantly inspect, extract, and convert web elements into usable code.

Whether you need to grab raw CSS, analyze typography, or instantly convert styles into Tailwind CSS utility classes, this extension streamlines your workflow directly from your browser.

Give feedback here

---

Features

Inspect Elements

Activate any of the inspection modes to view details simply by moving your mouse:

• Inspect CSS: Hover over any element on a webpage to instantly display and copy its specific CSS styling.
• Inspect Typography: Hover to isolate font styles, sizes, weights, and text-related CSS properties.
• Inspect HTML: Hover over components to view the underlying HTML structure on the fly.

Tailwind Converter

• Tailwind CSS v2, v3, & v4 Support: Select your preferred Tailwind version from the dropdown.
• Convert to Tailwind: Instantly transform standard CSS styles into utility-first Tailwind CSS classes with a single click.

Test View

• Device Responsiveness: Use the dropdown menu to quickly preview and test your webpage across multiple pre-configured device screen sizes.

Component Sandbox & Palette

• Export Component Sandbox: Copy the inspected elements and export them into a clean developer sandbox environment.
• Generate Page Palette: Automatically compile and generate a complete color and styling palette based on the current webpage.

---

How to Install (For Users & Developers)

Since this extension is fully open-source and not hosted on the Chrome Web Store, you can easily load it into Chrome manually for free:

1. Click the green Code button at the top right of this GitHub page.
2. Click Download ZIP and extract the files to a folder on your computer.
3. Open Google Chrome (Or your preferred browser) and navigate to chrome://extensions/.
4. Look in the top-right corner of the Extensions page and toggle Developer mode to ON (On different browsers it may appear in different positions e.g. bottom-right on Edge).
5. Click the Load unpacked button in the top-left corner.
6. Select the folder where you extracted the extension files (the folder containing the manifest.json file).

💡 Quick Tip: Once loaded, click the puzzle piece icon in your Chrome toolbar and pin DevStyle Extractor for easy access!

---

⌨️ Shortcuts & Controls

• Hover: Preview element details automatically.
• Click: Copy the code/styles to your clipboard.
• Esc: Exit inspection mode.

📄 License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license. It is free for personal use and learning, but commercial use is strictly prohibited.