designr inspects CSS styles and saves snapshots of web components and designs
🎨 Functionality
designr is an open-source browser extension designed to inspect and save CSS styling on web pages. designr provides information about element styles and save the styles into a palette for later use. designr is a simple and intuitive way for designers and web developers to save CSS references.
🛠 Setup
To get started with development, fork or clone the repository. Once the repository is installed, go to the extensions page in your brower. For example, the extension manager page for Chrome is chrome://extensions which will let you edit and upload the extension package. On the extension manager page, toggle Developer Mode on, click Load unpacked, and select the folder of the downloaded extension.
⚙️ Code Structure
assets/ |
includes all assets for the extension |
css/designr.css |
CSS file for the designr element inspector view |
css/styles.css |
CSS file for the designr popup view |
js/libs |
contains all JS code for libraries |
js/background.js |
background JS code for designr |
js/designr.js |
JS code for the designr element inspector view |
js/script.js |
JS code for the designr popup view |
index.html |
HTML code for the designr popup view |
💜 Contributing
If you would like to contibute new features, bug fixes, or have any recommendations on how the extension can be improved, feel free to contribute by forking this repository, contributing a change that either resolve an issue or adds a new feature, and submitting a PR for review.