Chrome 官方插件实测：让 Claude Code 写网页前先查最新规范，弹窗改用原生 ，11 月 7 日实测版

Google Chrome 团队给 Claude Code 做了一个官方插件 Modern Web Guidance：Claude 写网页代码之前，先去查一遍最新的前端规范，再动手写。11 月 7 日实测（Claude Code v2.1.318，插件 v0.0.194），插件装好后不用点名，Claude 自己会触发。插件仓库在 GoogleChrome/modern-web-guidance。

插件里有两个技能：modern-web-guidance 管 HTML、CSS 和浏览器 JavaScript，chrome-extensions 管 Manifest V3 扩展开发。实测让它给一个小任务板加删除确认弹窗，Claude 先跑 npx 搜了 dialog 和 declarative-dialog-popover-control 两篇指南，再写代码：原生 <dialog>、command / show-modal 属性、Cancel 默认聚焦，只在不支持的浏览器才加载 polyfill。作者随后在无头 Chrome 里把流程点了三遍，全通过。

两点要注意：搜索每次都要联网，包约 32 MB；匿名遥测默认开着，搜索的问题文本会发出去，在意的话先设 DISABLE_TELEMETRY=1。另外只给 npx -y modern-web-guidance@latest 开白名单，别放行整个 npx。适合经常让 Claude 写页面的人，只写后端就不用装。安装命令：/plugin install modern-web-guidance@claude-plugins-official，装完记得 /reload-plugins。自己试：新建空文件夹放个 index.html，让它加个带记忆的深色模式切换，再看文末的 Modern Web Guidance 一节，核对它用了哪几篇指南。

相关阅读：3 个 Claude Code 画图技能同题实测、一句话让 Claude Code 搭个 HackerTube。

来源：AI Parabellum，原文：https://aiparabellum.com/modern-web-guidance-claude-code-chrome-skills/