网页元素可视化编辑工具（支持持久化修改）PC浏览器插件

插件介绍

我觉得去网页广告应该很管用，也实用点吧，他的规则是持久化的保存的，也就是这次去掉了广告，下次打开就没有了，当然这只是一种功能，更多的功能大家自己发掘。

插件功能

智能元素选择 ：采用类似 Chrome DevTools 的高亮遮罩，鼠标悬停即可实时锁定网页元素。

双重 HTML 编辑模式 ：

原位编辑 ：直接在网页当前位置弹出输入框，像改文档一样修改 HTML 结构。

弹窗编辑 ：在独立的大窗口中编辑，支持 HTML 格式化预览。

CSS 样式探针 ：在弹窗编辑时，右侧会自动列出该元素匹配的所有 CSS 规则（包括内联样式和外部样式表）。

永久性规则管理 ：

隐藏与删除 ：一键隐藏（ display: none ）或彻底移除元素，操作会自动保存。

域名分组 ：规则按网站域名自动分类，支持折叠/展开，管理井然有序。

交互式控制面板 ：

自由拖拽 ：面板可随处停放，不遮挡视线。

智能展开 ：打开面板时自动定位并展开当前网站的规则列表。

操作指南

1. 开启选择模式

点击控制面板上的 “开启选择模式” 按钮。此时鼠标在页面上移动时，所经过的元素会被蓝色遮罩高亮显示。

注意 ：该模式会一直保持，直到你手动点击“停止选择”或关闭面板。

2. 元素操作菜单

在选择模式下，对准目标元素 点击鼠标右键 ，将弹出功能菜单：

隐藏元素 ：将元素设为不可见（保留位置）。

彻底删除 ：直接从 DOM 树中移除。

原位编辑 HTML ：在元素位置直接开启快速编辑。

弹窗编辑 HTML ：开启带 CSS 预览的高级编辑器。

选择父元素 ：当目标太小时，可通过此项逐级向上选取更大的容器。

3. 编辑 HTML

保存更改 ：在编辑器中修改代码后，点击 “✅ 保存” 按钮即可实时看到效果。

查看 CSS ：在“弹窗编辑”模式下，右侧面板会显示该元素受哪些 CSS 规则影响，方便你参考样式。

4. 规则管理

查看规则 ：在控制面板底部，点击各个域名标题即可查看已保存的屏蔽规则。

取消屏蔽 ：点击规则右侧出现的 × 号，即可恢复被隐藏/删除的元素。

当前网站高亮 ：当前访问的网站在列表中会以蓝色字体标注，并带有点亮图标。

快捷特性

最大化层级 ：控制面板和遮罩层拥有最高 Z-Index，确保不会被网页原有元素遮挡。

边界识别 ：右键菜单会自动检测屏幕边缘，防止菜单弹出在屏幕外。

格式化支持 ：编辑器会自动对 HTML 进行缩进处理，提升阅读体验。

技术信息

存储机制 ：使用 Tampermonkey 的 GM_setValue 存储，跨页面、跨会话持久化。

代码参考 

拖拽逻辑实现： makeDraggable

CSS 匹配引擎： getMatchedCSSRules

规则列表构造： updateRulesList