This Chrome extension allows you to extract and copy the HTML and CSS of a selected element and its children directly to your clipboard. This is especially useful for web developers who need to quickly get the styles and structure of specific elements on a webpage.
- Extracts HTML and CSS of the selected element and all its children.
- Copies the extracted HTML and CSS to the clipboard.
- Simple and easy-to-use interface.
-
Clone this repository or download the files as a ZIP and extract them.
bash
Copy code
git clone <repository-url> cd <repository-directory>
- Open Chrome and navigate to
chrome://extensions/. - Enable "Developer mode" by toggling the switch in the top right corner.
- Click on the "Load unpacked" button.
- Select the directory where you downloaded/extracted the extension files.
The extension should now appear in your list of installed extensions.
- Click on the extension icon in the Chrome toolbar to open the popup.
- Enter the CSS selector of the element you want to extract in the input field.
- Click the "Extract CSS" button.
- The HTML and CSS of the selected element and its children will be copied to your clipboard.
- An alert will notify you that the content has been copied successfully.
manifest.json: Contains metadata about the extension.background.js: Handles background tasks and scripts execution.content.js: (Optional) Can be used for additional DOM manipulations.popup.html: The popup interface of the extension.popup.js: Handles interactions in the popup.styles.css: (Optional) Styles for the popup interface.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
For any issues or questions, please open an issue in this repository.