向元素添加轮廓
■ 功能性
◈ 切换大纲
- 通过单击“切换轮廓”按钮或使用热键 Ctrl + Q 将轮廓样式应用到当前活动选项卡。
- 根据输入的 CSS 选择器针对特定元素进行概述。
◈控制轮廓属性
- 自定义轮廓的颜色、样式、宽度和偏移量以满足他们的需求。
■ 背景和目的
◈ 此扩展是一个个人实践项目，源于在 Web 开发过程中切换元素轮廓的需要。
◈ 它是 Web 开发人员、设计人员和可访问性测试人员的工具，旨在帮助他们快速可视化网页结构并识别潜在的布局或设计问题。
■ 使用方法
◈ 安装
- 访问 Chrome 网上应用店，搜索“Element Outliner”，然后单击“添加到 Chrome”。
◈ 卸载
- 打开 Chrome 中的“扩展”菜单，找到“Element Outliner”，然后单击“删除”。
◈ 一般
- 单击扩展图标（右上角）以触发弹出 HTML。
- 单击“切换轮廓”按钮可向当前活动选项卡添加/删除轮廓样式。
- 使用 Ctrl + Q 作为切换轮廓的替代方法。
- 根据您的需要/偏好设置轮廓属性。
- 要定位特定元素组或特定元素，请输入适当的 CSS 选择器。
- 要重置为默认值，请单击大纲属性部分右上角的重置按钮。
■ 故障排除和支持
◈ 如果您在使用 Element Outliner 时遇到问题，请尝试以下操作：
- 确保输入有效且不为空。
- 重新切换轮廓。
- 访问浏览器的“chrome://extensions/”并打开/关闭。
- 重新加载网页。
- 重新启动浏览器。
- 重新安装扩展。
◈ 如果您仍然遇到问题或发现错误，请在反馈部分评论您的问题。
■ 安全和隐私措施
◈ 该扩展程序不会访问、收集或修改您访问的任何网站上的任何信息。
◈ 它在清单版本 3 下运行，仅授予以下权限：
- activeTabs：查询当前活动选项卡并将样式添加到正确的网页中。
- 存储：保存每个选项卡的自定义大纲属性。
- 数据仅作为会话存储（仅在浏览器会话期间将数据保存在内存中）。
- 脚本：将 CSS 样式添加到网页中
■ 局限性
◈ 该扩展无法将轮廓样式添加到：
- 由于安全限制，Chrome 浏览器的内部页面（例如 chrome://settings/、chrome://extensions/ 等）。
- 扩展库（如 https://chromewebstore.google.com/），因为它无法编写脚本。
◈ 该扩展是使用最新版本的 Chrome 浏览器开发和测试的。与旧版本的兼容性尚未得到验证。
■ 支持
◈ 虽然扩展可以免费使用，但您的支持可以帮助维护和改进扩展。您可以通过以下几种方式提供支持：
- 分享您的想法：我重视您的意见！分享您希望在未来的更新中实现的想法或功能。
- 传播信息：如果您发现该扩展有用，请与可能从中受益的其他人分享。
- 发表评论：您的反馈很重要！留下评论或星级评级。
- 给我买杯咖啡：如果你觉得慷慨，可以考虑给我买杯咖啡，让我的创意源源不断！ ☕
- https://ko-fi.com/ceps#
非常感谢您的每一点支持。它有助于使 Element Outliner 更好地为每个人服务。向大家表示衷心的感谢！
Element Outliner插件谷歌浏览器安装教程
第一步：下载Element Outliner安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
