尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Impeccable 浏览器扩展上架指南:用 DevTools 检测 61 种 UI 反模式的完整方案

Impeccable 浏览器扩展上架指南:用 DevTools 检测 61 种 UI 反模式的完整方案 Impeccable 浏览器扩展上架指南用 DevTools 检测 61 种 UI 反模式的完整方案【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 是一个以开源规则引擎为核心的浏览器 DevTools 扩展可在任意网页上识别 61 种常见 UI 反模式AI 生成痕迹与通用质量缺陷。本文以 extension/STORE_LISTING.md 为骨架完整梳理该扩展的检测能力、快照→WebAssembly 扫描链路、功能特性、Chrome Web Store 上架字段映射、权限与隐私声明并结合 extension/manifest.json 与 extension/background/service-worker.js 等源码给出实现级佐证。读完本文你将理解 Impeccable 如何在不被页面 CSP 拦截的前提下完成检测以及如何将一份店面文案文件与扩展源码保持同步。一、扩展定位一套规则三种形态Impeccable 的核心是一套开源规则引擎同样 61 条规则同时驱动浏览器扩展、Impeccable CLI与live design mode三种形态从同一套源码构建而来。浏览器扩展是其中最贴近设计工作流的入口——设计师或前端开发者打开 DevTools即可在当前页面上直接看到哪里像 AI 做的、哪里违反通用质量规范。STORE_LISTING 中的 61 这个数字并非写死的手工计数它来源于构建产物extension/detector/antipatterns.json中规则条目的实际数量该文件由bun run build:extension生成。因此 STORE_LISTING 开篇就强调这份店面文案必须与 extension/manifest.json 和规则注册表保持同步避免出现文案说 61 条、实际 60 条这类商店审核与用户预期不一致的问题。二、它检测什么AI 痕迹与质量缺陷两大分类STORE_LISTING 的 Detailed description 将检测内容明确分为两类以下清单必须原样继承它们是扩展的核心价值主张。AI slop一眼AI 做的设计痕迹颜色与配色米白/米色的 AI 默认背景紫罗兰 AI 配色系渐变与装饰标题渐变文字侧边圆角标签式强调条纹布局堆叠嵌套卡片、单调间距、图标瓦片堆叠、贴边卡片edge-flush cards动效滥用回弹与弹性缓动、悬停图片缩放、跑马灯marquee、脉冲圆点、闪烁光标暗色模式套路发光强调色、径向光晕、聚光灯辉光字体与排版被滥用的字体、扁平化字号层级、斜体衬线大标题超大 H1、极端负字距文案与标签大写 eyebrow chips、标题上方的 kicker、编号章节标记破折号em-dash滥用、营销套话、戏剧化措辞aphoristic cadence / theater phrases背景与插画细边框配宽投影、重复条纹与网格背景形状拼贴插画、有机裁切路径clip path、被埋没的位图Quality issues通用设计与可访问性缺陷对比度与可读性低对比度文字WCAG AA 标准、彩色背景上的灰色文字、被遮挡文字间距与节奏内边距过挤、行高过紧、标题节奏不均衡跳级标题skipped heading levels行长与溢出行长过长、文字延伸到视口边缘、列超出首屏视口字号与字重正文过小、UI 文字过小、两端对齐文本、全大写正文、过宽字距渲染与内容布局属性动画、溢出裁剪容器、文字溢出图片损坏、脚本错误、默认隐藏的内容、重复的容器文字设计系统漂移与项目自身设计系统字体、颜色、圆角、字号不一致这 61 条规则的判别逻辑并非简单的字符串匹配而是由 Rust 编写的规则引擎crates/foundation/src/rules与检测前端crates/detect/src共同承担编译为 WebAssembly 后嵌入扩展运行保证浏览器端与 CLI 端行为完全一致。三、工作机制快照 → WebAssembly 规则核 → 覆盖层STORE_LISTING 的 HOW IT WORKS 给出了面向用户的五步流程以下是其完整展开安装扩展在任意页面打开 DevToolsmacOS 下CmdOptIWindows/Linux 下F12点击 Impeccable 面板标签页面被扫描覆盖层高亮每一项发现面板按AI 痕迹 / 质量缺陷两类分组列出发现点击任意发现跳转到 Elements 面板中的对应元素在这五步背后extension/background/service-worker.js 承担了完整的路由与编排它维护每个标签页的状态tabState、向 DevTools 面板转发消息panelPorts、更新工具栏徽章计数并拥有离屏文档的创建权。扫描链路的关键在于三段式隔离快照阶段content script 对页面做测量产出一份页面快照snapshot。service worker 通过chrome.scripting.executeScript按需注入detector/snapshot.js、detector/overlay.js与content/content-script.js且刻意不在 manifest 中声明静态 content_scripts以最小化常驻占用——脚本只在用户显式操作打开面板、点击 popup 扫描等时才加载。推理阶段快照被发送到 extension/offscreen/offscreen.html 承载的离屏文档由 WebAssembly 规则核detector/core.jscore_bg.wasm在快照上求值。呈现阶段结果回到 content script绘制覆盖层高亮并同步给面板与 popup。service worker 中ensureOffscreenDocument()的实现细节值得注意它先查询已存在的离屏文档不存在时以reasons: [WORKERS]创建随后轮询 ping 等待 WASM 核心实例化完成避免首次扫描与核心加载竞态文档创建后常驻保留其规则核保持热状态关闭文档会让下一次扫描重新付出模块加载成本这与 STORE_LISTING 权限说明中扫描结束后即关闭文档的措辞存在实现差异以源码注释为准核心保持热加载直到扩展被卸载。为什么必须在离屏文档里跑 WASM这是 1.4.0 版本改造的核心动机。页面自身的 Content-Security-Policy 通常禁止unsafe-eval而 WebAssembly 实例化恰恰需要它。若把 WASM 放进 content script 或 page world严格 CSP 的站点如银行、GitHub、许多 SaaS会直接拦死检测器。离屏文档的破解之道在于它运行在扩展自己的上下文中遵循的是扩展自身的 CSP而不是被扫描页面的 CSP。见 extension/manifest.json 中的声明content_security_policy: { extension_pages: script-src self wasm-unsafe-eval; object-src self }wasm-unsafe-eval只作用于扩展页面被扫描的站点永远不需要放宽任何策略。extension/offscreen/offscreen.html 的注释也印证了这一点核心由cargo xtask bundle生成。结果是站点的 CSP 不再决定检测器能否运行这也是 STORE_LISTING Whats new 中对 1.4.0 的官方表述。SPA 路由变化的重扫对单页应用页面内导航不触发整页加载extension/background/service-worker.js 通过chrome.webNavigation.onCompleted监听导航完成事件先无条件清空该标签页的状态页面重载后 content script 必然失效再判断DevTools 是否打开且用户此前是否已参与过扫描满足条件时延迟 300ms 自动重扫。注释明确解释了为何 popup 流程不自动重扫——popup 是用户主动触发不应替用户发起其未要求的扫描。四、功能特性与可配置项STORE_LISTING 的 FEATURES 段落列出的每一项都能在源码中找到对应实现打开面板即扫描可升级为 DevTools 一开即扫默认autoScan: panel打开 Impeccable 面板/侧边栏才扫描可选devtoolsDevTools 打开瞬间扫描。该开关由 extension/devtools/devtools.js 在首次建立生命周期端口时读取并决定是否立刻下发扫描指令。分组呈现findings 在面板中按 AI tells 与 quality issues 分组extension/devtools/panel.js 负责渲染。点击跳转click-to-inspect面板向 service worker 发送{ action: highlight, selector }service worker 转发给 content script实现从发现到 Elements 面板元素的定位。覆盖层开关面板或工具栏 popup 均可切换覆盖层显隐。popupextension/popup/popup.js提供三个核心控件扫描按钮、覆盖层开关、反模式计数并通过findings-updated/scan-failed广播实时刷新。逐规则禁用用户可将不关心的规则加入disabledRules列表修改后 service worker 会对所有已注入标签页触发重扫disabled-rules-changed分支。导航重扫见上文 webNavigation 逻辑。任意站点可用 100% 本地运行见权限与隐私章节。除 STORE_LISTING 已列出的功能外extension/background/service-worker.js 中还隐藏着三个值得展开的配置项getSettings()的默认值配置项默认值说明disabledRules[]用户禁用的规则 id 列表lineLengthModestrictstrict行长上限 80 字符lax上限 120 字符经lineLengthMax传入扫描配置spotlightBlurtrue悬停高亮时是否对页面其余部分做压暗/模糊处理autoScanpanel扫描触发时机panel面板/侧边栏打开时或devtoolsDevTools 打开时这些设置保存在 Chrome 的storage.sync中随账号跨设备同步。另一个细节是工具栏徽章徽章数字统计的是发现总数一个元素可能携带多条发现并采用 kinpaku 金#ffba00背景配深墨色文字——这是为可访问性专门选定的组合源码注释给出其对比度约 11.8:1远高于 Chrome 默认白字对金色的 4.5:1 失败线。setBadgeTextColor仅在 Chrome 110 存在代码对缺失环境做了防御式降级兼容 Firefox 的 action API。五、商店上架STORE_LISTING.md 与 Developer Dashboard 的字段映射STORE_LISTING 的定位非常明确它是Chrome Web Store Developer Dashboard 的复制文案每个字段对应仪表盘中的一个输入框可直接原样粘贴。以下字段必须与 extension/manifest.json 严格对齐仪表盘字段内容对应 manifest / 源码NameImpeccablemanifest.nameShort description≤132 字符Detect AI slop and design anti-patterns in any web page. Open DevTools and see what needs fixing.manifest.description的扩写Detailed description检测能力清单 工作原理 特性见本文第二、三、四章—Whats new1.4.0WebAssembly 离屏文档改造说明extension/offscreen/offscreen.htmlCategoryDeveloper Tools—LanguageEnglish—Privacy policy URLhttps://impeccable.style/privacy仓库外页面仅在此字段引用Single purpose检测并高亮任意网页上的 UI 反模式权限最小化的合法性依据Permission justifications逐权限说明见下文第六章Remote codeNo规则引擎与脚本全部打包在包内Data usage不收集任何用户数据见下文第七章版本号与 FireFox 变体manifest 当前版本为1.4.0manifest.version与 Whats new 对应。值得注意的是打包脚本 scripts/build-extension.js 会同时产出Chromeextension.zip与Firefoxextension-firefox.zip两个产物Firefox 变体在构建时派生 manifest将 MV3 service worker 改写为 Gecko 全版本支持的 event-pagescripts条目并注入browser_specific_settings.geckostrict_min_version: 140.0、data_collection_permissions: { required: [none] }。但脚本也明确警告Firefox 包当前可以构建和过web-ext lint却尚不能扫描——因为 Gecko 没有chrome.offscreenAPI而规则核必须在离屏文档中运行。六、权限逐项说明为什么需要这五个权限STORE_LISTING 的 Permission justifications 是商店审核隐私实践页的核心材料每一项都对应源码中的实际用途activeTab只扫描用户当前正在看的页面打开面板或点击 popup 扫描时用户未过问的标签页上不会运行任何东西。extension/popup/popup.js 中getActiveTabId()始终只查询active: true的当前标签。scripting注入 content script 以拍摄页面快照并在当前标签绘制覆盖层。extension/background/service-worker.js 的ensureContentScriptInjected()是唯一注入入口且injectImmediately: true。storage仅保存用户自己的设置禁用的规则、覆盖层可见性、自动扫描偏好到 Chrome 同步存储不保存任何页面数据。webNavigation在单页应用发生页内导航无整页加载时重扫。offscreen在离屏文档中运行 WASM 规则引擎——因为页面 CSP 会封锁 content-script 与 page world 中的 WebAssembly。该文档为一次扫描而创建源码中保留常驻以维持规则核热状态。Host permissionall_urls允许用户扫描其访问的任何站点但扫描仅在用户要求时作用于活动标签页。从 MV3 权限最小化的视角看这套权限设计刻意省略了tabs、cookies、history等任何读取浏览数据的权限与 Single purpose 声明严格一致。无法扫描的边界情况ensureContentScriptInjected的失败分支揭示了真实世界的边界chrome://内部页、Chrome Web Store 页面、以及未开启允许访问文件 URL时的file://页面都无法注入。service worker 会据此向 popup 返回区分化的错误文案例如 Cant scan local files. Enable Allow access to file URLs…而不是笼统的失败提示。七、远程代码与数据使用零遥测的本地检测STORE_LISTING 的 Remote code 与 Data usage 两项声明的依据非常硬核Remote code: No。规则引擎WebAssembly与全部脚本都打包在扩展包内。由 scripts/build-extension.js 可见检测器五个产物core.js、core_bg.wasm、snapshot.js、overlay.js、antipatterns.json全部由本地cargo xtask bundle构建后放入extension/detector/扩展运行时不从网络拉取或求值任何内容。Data usage: 零收集。扫描全部本地完成页面内容、发现结果、标识符均不离开浏览器。打包脚本甚至为 Firefox 变体显式声明了data_collection_permissions: { required: [none] }AMO 在 Firefox 140 的新要求。因此商店表单中的三项认证——不向第三方出售、不用于单一目的之外的用途、不用于信用评估或借贷——在该架构下是技术上必然成立而非流程上的承诺。八、构建流程与规则数量的一致性保障STORE_LISTING 反复强调与规则注册表保持同步这背后是 scripts/build-extension.js 提供的一整套自动化保障运行cargo xtask bundle编译 Rust 规则核为 WebAssembly并与 browser-bundle 中的页面 JS 拼接产出五个检测器片段核心入口见 crates/xtask/src/main.rs。读取生成的antipatterns.json并打印规则数量——这就是 61 这个数字的事实来源。校验 manifest 与 service worker 引用的每个路径都真实存在于extension/manifestReferencesserviceWorkerReferences双通道杜绝上架包缺文件。打包extension.zipChrome与extension-firefox.zipFirefox 变体。CI 场景可通过IMPECCABLE_EXTENSION_SKIP_BUNDLE1跳过已完成的 bundle 步骤仅当五个产物齐全时生效。对贡献者而言这意味着修改任何一条规则的判别逻辑后必须重新执行构建店面文案中的规则数量才会与实际一致。九、总结Impeccable 扩展的工程形态可以浓缩为三个关键词同一套 61 条 Rust 规则引擎驱动扩展 / CLI / live 模式三端、快照 离屏 WASM 的 CSP 穿透架构让严格 CSP 站点也能检测、零遥测的权限最小化设计activeTab 按需注入 无网络请求。而 extension/STORE_LISTING.md 则是一份将上述工程能力翻译成商店审核语言的契约文档——它与 manifest、规则注册表、打包脚本构成了一个可验证的整体。阅读源码时建议从 extension/background/service-worker.js 的消息路由与离屏文档管理入手再对照 extension/manifest.json 的权限声明即可完整还原这条从页面快照到金色徽章计数的调用链。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表