gabrielesabatino.it

Get colors, fonts and meta tags from website.

Latest Version

Version

1.1.0

Update

September 29, 2024

Size

211KiB

Developer

gabrielesabatino.it

Website breakdown Extension

Website Breakdown is an intuitive and powerful browser extension designed for web developers and designers to easily extract colors, fonts and meta datas used on any website. With a single click, you can get a detailed overview of a webpage's visual styles. Additionally, the extension allows you to download this information in a well-organized PDF file, complete with color preview, font details and meta datas.

Key Features:

Color Extraction: Retrieve all colors used on the webpage, including solid colors and gradients.
Color Picker: Pick any color from the web page.
Colors are displayed in HEX, RGB, and HSL formats.
Gradient Support: Identify and display background gradients used on the webpage.
Font Details: Extract fonts used on the page, including the HTML tags of elements where they are applied, without duplicates.
Preview Display: See colors and gradients with previews.
PDF Generation: Save the color and font details in a well-formatted PDF file with the website title and URL.
Advanced Inspector: Select on web page your elements and see how they are structured.
User-Friendly: Simple and intuitive user interface with a loading indicator for scanning colors and fonts.
Color Format Support: View colors in various formats (HEX, RGB, HSL) and maintain gradients in their original form.

Install the extension from the Chrome Web Store.
Visit any website and open the extension by clicking the icon in the browser toolbar.
Wait for the scan to complete.
View the extracted colors and fonts in the extension popup window.
Click the \"Save\" button to download a PDF file with all the color and font details.
Ideal for:

Web developers needing to replicate or analyze the visual styles of a site.
Designers looking for inspiration from color schemes and fonts used on other web pages.
Anyone wanting a quick and detailed overview of a website's visual styles.
Simplify your workflow and enhance your design process with Website Breakdown!

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Website breakdown", "version": "1.1.0", "description": "Get colors, fonts and meta tags from website.", "permissions": ["activeTab", "scripting"], "icons": { "16": "icons/icon16.png", "32": "icons/icon32.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "action": { "default_popup": "popup.html" }}

Download CRX(211KiB)