https://github.com/markalexi/css-insight

Chrome web-extension for analysing the CSS.
https://github.com/markalexi/css-insight

addon analyzer chrome-extension css web-extension

Last synced: 2 months ago
JSON representation

Chrome web-extension for analysing the CSS.

• Host: GitHub
• URL: https://github.com/markalexi/css-insight
• Owner: MarkAlexI
• License: mit
• Created: 2024-10-07T23:33:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-08-08T16:37:39.000Z (10 months ago)
• Last Synced: 2025-10-19T14:54:12.657Z (8 months ago)
• Topics: addon, analyzer, chrome-extension, css, web-extension
• Language: JavaScript
• Homepage: https://chromewebstore.google.com/detail/keejoflofbcbepjbbhnmiomgmjjihmnb
• Size: 559 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# CSS Insight

![GitHub license](https://img.shields.io/github/license/MarkAlexI/CSS-Insight)

![GitHub stars](https://img.shields.io/github/stars/MarkAlexI/CSS-Insight?style=social)

![GitHub forks](https://img.shields.io/github/forks/MarkAlexI/CSS-Insight?style=social)

![Last commit](https://img.shields.io/github/last-commit/MarkAlexI/CSS-Insight)

![Issues](https://img.shields.io/github/issues/MarkAlexI/CSS-Insight)

[![Chrome Web Store](https://img.shields.io/badge/Chrome%20Web%20Store-v1.19.1-brightgreen?logo=google-chrome)](https://chromewebstore.google.com/detail/keejoflofbcbepjbbhnmiomgmjjihmnb)

![status](https://img.shields.io/badge/status-v1.19.1-blue)

CSS Insight is a powerful browser extension designed to simplify and enhance your CSS workflow. With this tool, you can instantly access and edit styles directly on any webpage, making it a must-have for web developers.

## Features

- **View Declared Styles**: Quickly access all CSS rules applied to any element on the page.

- **Edit Styles**: Modify styles in real time with an intuitive interface.

- **Media Rules and Keyframes**: Explore advanced CSS features like media queries and animations.

- **One-Click Copy**: Copy CSS rules to your clipboard for fast implementation.

- **Style Analysis**: Dive deep into how styles are structured and applied to elements.

## Installation

### Google Chrome

1. Visit the [Chrome Web Store](https://chromewebstore.google.com/detail/keejoflofbcbepjbbhnmiomgmjjihmnb).

2. Click **Add to Chrome**.

3. Confirm the installation.

### Mozilla Firefox

1. Visit the [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/css-insight).

2. Click **Add to Firefox**.

3. Confirm the installation.

## How to Use

1. Install the extension in your browser.

2. Click on the CSS Insight icon in your toolbar.

3. Hover over any element on the page to view its styles.

4. Use the interface to edit or copy styles as needed.

## Screenshots

![CSS Insight Screenshot](/images/icon-512.png)

## Contribution

We welcome contributions from the community! If you have ideas for new features or find a bug, feel free to open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).

## Third-Party Libraries and Licenses

This project makes use of the following third-party library:

- **highlight.js**  

  Website: [https://highlightjs.org/](https://highlightjs.org/)  

  License: [BSD 3-Clause License](https://github.com/highlightjs/highlight.js/blob/main/LICENSE)

  *highlight.js* is a syntax highlighting library used for displaying code with automatic language detection and formatting.  

  It is included in this project under the terms of the BSD 3-Clause License.

  

  Note: The project uses the "atom-one-dark" theme included with highlight.js.

---