Style Extractor

About

## 简短说明

从网页元素中提取 HTML 和 CSS，包括匹配规则、变量、伪元素和继承样式。

---

## 详细说明

Style Extractor 可帮助你检查网页中的元素，并导出与该元素相关的 HTML 和 CSS，方便在开发、调试或样式参考时使用。

通过可视化元素选择器，你可以在当前页面中选择目标元素，查看其结构，并提取应用在该元素上的样式。扩展可在可用时包含匹配规则、行内样式、继承属性、CSS 自定义属性以及伪元素样式。

## 主要功能

- 使用可视化选择器选择页面元素
- 鼠标移动时高亮显示元素
- 在所选元素及其父级元素之间切换

# Style Extractor

## Extension Name

Style Extractor

## Short Description

Extract HTML and CSS from selected page elements, including matched rules, variables, pseudo-elements, and inherited styles.

---

## Detailed Description

Style Extractor helps you inspect a web page element and export its related HTML and CSS for reference, debugging, or reuse during development.

With the visual picker, you can select an element on the current page, review its structure, and extract the styles that apply to it. The extension can include matched rules, inline styles, inherited properties, CSS custom properties, and pseudo-element styles when available.

## Features

- Select page elements with a visual picker
- Highlight elements while moving across the page
- Navigate between the selected element and its parent elements
- Extract the selected element’s HTML
- View matched CSS rules and inline styles
- Include inheritable properties from parent elements
- Detect related CSS custom properties
- Capture styles for pseudo-elements such as `::before` and `::after`
- Preview the extracted result inside the extension
- Copy the extracted HTML or CSS
- Download the result as a complete HTML file

## How to Use

1. Click the Style Extractor extension icon.
2. Choose **Pick Element**.
3. Move the cursor over the page to highlight elements.
4. Click the element you want to inspect.
5. Optionally select a parent element from the dropdown.
6. Click **Extract** to generate the result.
7. Review, copy, or download the extracted content.

## Extracted Content

The extension may provide:

- The selected element’s HTML
- CSS rules that apply to the element
- Inline styles
- Inherited style properties
- Related CSS custom properties
- Pseudo-element styles
- Font information detected from the selected element

## Notes

- The extension requires debugger permission to inspect page styles accurately.
- It does not work on restricted pages such as `chrome://` or `chrome-extension://`.
- Some styles may depend on page interactions or dynamic states.

## Privacy

Style Extractor works locally in your browser. It does not collect, store, or upload user data.

---

## Category

Developer Tools