☰

element parse

Select elements, outline them in red, expand/shrink selection, and show a small copy box.

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Userscripts ，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
Dante2194
日安装量
0
总安装量
2
评分
0 0 0
版本
0.1
创建于
2026-07-19
更新于
2026-07-19
大小
11.0 KB
许可证
me
适用于
所有网站

e

html element parser just by tapping anywhere in screen has a static extension menu option to activate so ir won't interfere with normal browsing

Element Parser

Interactive element selector with outline highlighting, parent/child navigation, and HTML extraction

What It Does

This script lets you click any element on a webpage to inspect it. It draws a red outline around the selected element, displays its tag and class name, and provides controls to expand up the DOM tree, shrink back down, save the element's HTML, or cancel the selection. Selected HTML can be copied to clipboard via a compact popup box.

How It Works

Action Result
Click any element Highlights it with a red outline, shows tag/class info
Expand Moves selection to the parent element
Shrink Returns to the previously selected child element
Save Opens a small modal with the element's outerHTML
Cancel Clears selection and hides the panel

Controls

  • Activation – Via userscript manager menu command labeled 🔍 Toggle Element Selector
  • State – Active (green indicator) / Inactive (white indicator) via alert messages
  • Navigation – Use the Expand and Shrink buttons on the top panel
  • Export – Save button opens the copy box; click "Copy to Clipboard" to copy HTML

Visual Elements

Component Description
Red outline Highlights the currently selected element
Top panel Shows element tag+class, plus Expand/Shrink/Save/Cancel buttons
Copy box Bottom-center modal with read-only input and clipboard button

Copy Methods

The script uses a priority chain for clipboard access:

  1. GM_setClipboard (if available)
  2. navigator.clipboard.writeText (modern browsers)
  3. document.execCommand('copy') (fallback)

Installation

  1. Install a userscript manager (Tampermonkey, Violentmonkey, Via browser)
  2. Create a new script and paste the source
  3. The script runs on all pages (*://*/*)
  4. Activate via the userscript menu command

Notes

  • The outline follows the element during scroll
  • Clicking inside the panel or copy box does not trigger a new selection
  • Expand/Shrink history is per selection session
  • Selecting a new element resets the navigation history

Troubleshooting

Issue Fix
Script not appearing in menu Check @grant GM_registerMenuCommand is allowed in your manager
Copy fails Verify clipboard permissions or try the fallback method
Outline misaligned Scroll or resize may require re-clicking the element
Panel blocking clicks Clicks on the panel are ignored; click outside to select