Wxt
mengxi-ream/read-frog
Build browser extensions with WXT - a next-gen framework with file-based entrypoints, Vite builds, auto-imports, typed storage with migrations, content script UIs, and multi-browser MV2/MV3 support.
Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified.
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .claude/skills/browser-extension-dev && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .claude/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-devType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .agents/skills/browser-extension-dev && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .agents/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .cursor/skills/browser-extension-dev && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .cursor/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/mobazha/mobazha-unified.git --path .cursor/skills/browser-extension-dev--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .gemini/skills/browser-extension-dev && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .gemini/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install mobazha/mobazha-unified browser-extension-devInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .github/skills/browser-extension-dev && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .github/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/browser-extension-dev .opencode/skills/browser-extension-dev && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "browser-extension-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/browser-extension-dev into .opencode/skills/browser-extension-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-extension-dev", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
browser-extension-devChrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified.
Browser Extension Dev is an agent skill from mobazha/mobazha-unified. Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期。 Manifest V3 + Vite 多入口构建 + 四壳一码(Vite alias 复用 apps/web/src/)。 触发词:"浏览器扩展", "browser extension", "Chrome 扩展", "Ext-0", "Ext-1", "扩展原型", "继续扩展开发", "extension dev", "Popup 开发", "Side Panel"。
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Browser extensions. It works with Chrome Extensions and Vite. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.
9 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 156c699. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
bashpnpmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
test-new.mobazha.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Browser Extension Dev loads about 2k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 349 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 349 words, ~2,039 tokens.
.claude/skills/browser-extension-dev/SKILL.md (or your agent's skills folder).阅读以下文件获取完整上下文:
mobazha_hosting/docs/extension/BROWSER_EXTENSION_DESIGN.md # 深度设计文档(§8 四壳一码架构)
mobazha_hosting/docs/product/PRODUCT_ARCHITECTURE_DESIGN.md §4.7 # 产品战略定位
mobazha_hosting/docs/product/IMPLEMENTATION_ROADMAP.md §6.3 # 实施计划
mobazha_hosting/docs/FRONTEND_ARCHITECTURE_DESIGN.md # ADR-FE-005 组件复用决策关键原则:扩展通过 Vite alias 直接复用 apps/web/src/ 的全部 UI 组件,不新建轻量组件。
apps/extension/ # Shell 4:浏览器扩展
├── manifest.json # MV3 声明(permissions, service_worker, popup, side_panel)
├── vite.config.ts # 多入口构建 + Vite alias 指向 apps/web/src/
├── src/
│ ├── popup/ # 快捷入口(搜索 + 快捷操作,400×600 上限)
│ ├── sidepanel/ # 主购物界面(复用移动端组件,Chrome 114+)
│ ├── background/ # Service Worker(无 DOM,事件驱动)
│ ├── content/ # Content Script(Ext-3+,isolated world)
│ └── shared/ # 初始化 + design tokens(Ext-0 轻量组件,Ext-1 后可淘汰)
└── public/icons/ # 扩展图标 16/48/128
apps/web/src/ # UI 组件源(通过 Vite alias 复用)
├── components/ # ProductDetailMobile, CheckoutMobile 等
├── compat/ # Next.js 兼容层: link.tsx, navigation.tsx, image.tsx
└── routes.tsx # React Router 路由表
packages/core/ # 100% 复用:API、stores、hooks、utils
packages/ui/ # usePlatform() → 'extension' 类型自动移动视图Vite alias 配置(Ext-1 核心):扩展的 vite.config.ts 镜像 apps/web/vite.config.ts 的 alias,使 @/ → apps/web/src/,next/* → apps/web/src/compat/*。这让 ProductDetailMobile、CheckoutMobile 等组件在扩展中直接可用。
当用户说"继续扩展开发"、"Ext-0"、"扩展下一步"时:
bash -c 'ls -la ~/dev/openbazaar/mobazha-unified/apps/extension/ 2>/dev/null || echo "未创建"'| 阶段 | 判断条件 | 目标 |
|---|---|---|
| Ext-0 未开始 | apps/extension/ 不存在 | 创建脚手架 |
| Ext-0 进行中 | 有 manifest.json 但 OAuth 未实施 | 完成 OAuth |
| Ext-0 大部分完成 | Popup 搜索 + Side Panel 浏览 + Badge ✅,OAuth 待实施 | ← 当前 |
| Ext-1 准备 | OAuth 完成 | 配置 Vite alias 复用 apps/web 组件 |
| Ext-1+ | Side Panel 完整购物流程 | 见设计文档 |
cd ~/dev/openbazaar/mobazha-unified
mkdir -p apps/extension/src/{popup,sidepanel,background,shared} apps/extension/public/icons关键文件:
apps/extension/package.json — 依赖 @mobazha/core, @mobazha/ui, react, viteapps/extension/manifest.json — MV3 声明apps/extension/vite.config.ts — 多入口构建apps/extension/tsconfig.json — TypeScript 配置Token 存储:Popup/Side Panel 有自己的 localStorage,@mobazha/core 的 getStoredToken()/saveToken() 直接可用。Ext-1+ 再迁移到 chrome.storage.session。
API URL:扩展不经过 Vite proxy,需要配置完整 URL:
// apps/extension/src/shared/init.ts
import { setApiConfig } from '@mobazha/core/services/api/config';
import { switchToTestEnv } from '@mobazha/core/config/env';
export function initExtension() {
switchToTestEnv();
setApiConfig({
gatewayUrl: 'https://test-new.mobazha.org/v1',
searchUrl: 'https://test-new.mobazha.org/info',
mbzGatewayUrl: 'https://test-new.mobazha.org/info/v1',
});
}CORS:manifest.json 中声明 host_permissions 允许跨域请求:
"host_permissions": ["https://test-new.mobazha.org/*"]// chrome.identity.launchWebAuthFlow
const redirectUrl = chrome.identity.getRedirectURL();
// → https://<extension-id>.chromiumapp.org/
// 前置条件:Casdoor 中注册此 redirect URI注意:Ext-0 可先跳过 OAuth,使用 Basic Auth 或手动输入 token 验证 API 调用。OAuth 集成是高优先但非阻塞。
# 启动开发服务器
cd apps/extension && pnpm dev
# Chrome 加载:
# 1. chrome://extensions → 开发者模式
# 2. "加载已解压的扩展" → 选择 apps/extension/dist
# 3. 工具栏出现 Mobazha 图标
# 调试入口:
# - Popup: 右键 Popup → "检查"
# - Side Panel: 右键 Side Panel → "检查"
# - Service Worker: chrome://extensions → 扩展卡片 → "Service Worker" 链接HMR:vite-plugin-web-extension 支持 Popup/Side Panel 热更新。Service Worker 变更自动重载。manifest.json 变更需手动刷新扩展。
| 约束 | 影响 | 应对 |
|---|---|---|
禁止 eval() | CSP 阻止动态代码执行 | 确保 packages/core 无 eval/new Function |
| Service Worker 无 DOM | 不能引用 window/document | background 代码中条件判断 |
| 30s 空闲挂起 | Service Worker 不持久 | 事件驱动 + chrome.alarms |
| Popup 400×600 | 固定最大尺寸 | 紧凑 UI 设计 |
| Side Panel 宽度可变 | 用户可拖动调整 | 响应式布局 |
localStorage 隔离 | 扩展有独立存储空间 | Ext-0 直接使用,Ext-1+ 迁移 |
| 文件 | 职责 |
|---|---|
src/popup/App.tsx | Popup 根组件(搜索 + 快捷操作) |
src/popup/main.tsx | Popup React 入口 |
src/sidepanel/App.tsx | Side Panel 根组件(完整购物) |
src/sidepanel/main.tsx | Side Panel React 入口 |
src/background/service-worker.ts | Service Worker(OAuth token 交换、badge 更新) |
src/shared/init.ts | 扩展初始化(API URL 配置) |
src/shared/chrome-storage.ts | Chrome Storage 封装(Ext-1+) |
| Phase | 范围 | 依赖 | 状态 |
|---|---|---|---|
| Ext-0 | 脚手架 + Popup 搜索 + Side Panel 浏览 + Badge 示例 | 无 | 大部分 ✅(OAuth 待实施) |
| Ext-1 | Vite alias 复用 apps/web 组件 + OAuth + Side Panel 完整购物 | Ext-0 OAuth ✅ | 待启动 |
| Ext-2 | 桌面通知 + 订单状态追踪 + Badge 未读计数 | Ext-1 | 待启动 |
| Ext-3 | Content Script 跨站增强 | Ext-2 | 待启动 |
| Ext-4 | 生态增强(推荐、同步) | Ext-3 | 待启动 |
Ext-2 变更:从"钱包概览"改为"订单状态追踪"(Mobazha 使用外部钱包)。
| 问题 | 原因 | 解决 |
|---|---|---|
| Popup 白屏 | CSP 阻止内联脚本 | 检查 Vite 构建无内联 <script> |
| Service Worker 报错 | 引用了 window/document | 拆分浏览器代码和 SW 代码 |
| API 返回 CORS 错误 | 缺少 host_permissions | manifest 添加 API 域名 |
| HMR 不生效 | 插件版本不匹配 | 检查 vite-plugin-web-extension 兼容 Vite 版本 |
| OAuth redirect 失败 | Casdoor 未注册 URI | 添加 https://<id>.chromiumapp.org/ |
© mobazha, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .cursor/skills/browser-extension-dev of mobazha/mobazha-unified.
Open the folder on GitHubat commit 156c699
Browser Extension Dev next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Browser Extension Dev this skillmobazha/mobazha-unified | 165 | — | ~2k | Automated safety check: Pass | MPL-2.0 | |
| Wxtmengxi-ream/read-frog | 10k | — | ~500 | Automated safety check: Pass | GPL-3.0 | |
| Crxjssamber/cc-skills | 228 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Chrome Extensionericrisco/rsc-harness | 167 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Wxt Browser Extensionsvantezzen/skip-silence | 468 | 2 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Kimi WebbridgeMoonshotAI/kimi-code | 7.8k | — | ~3.6k | Automated safety check: Pass | MIT |
mengxi-ream/read-frog
Build browser extensions with WXT - a next-gen framework with file-based entrypoints, Vite builds, auto-imports, typed storage with migrations, content script UIs, and multi-browser MV2/MV3 support.
samber/cc-skills
CRXJS Chrome extension development — true HMR for popup, options, content scripts, side panels, manifest-driven builds, dynamic content script imports (?script, ?script&module), and defineManifest…
ericrisco/rsc-harness
A skill your agent uses when building or shipping a Manifest V3 browser extension and hitting its quirks — service worker dying and losing state, permission warnings, a Chrome Web Store rejection…
vantezzen/skip-silence
WXT browser extension performance optimization guidelines. An agent skill from vantezzen/skip-silence.
MoonshotAI/kimi-code
Kimi Browser Extension(Kimi 浏览器扩展,原 Kimi WebBridge)lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login…
yamadashy/repomix
Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content…
mobazha/mobazha-unified
Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.
mobazha/mobazha-unified
Look up Mobazha backend API endpoints, request/response formats, and field mappings.
mobazha/mobazha-unified
Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.
mobazha/mobazha-unified
Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.
mobazha/mobazha-unified
Generate commit messages and run pre-commit validation following Mobazha conventions.
mobazha/mobazha-unified
Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.
Works with
Categories
Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified. Browser Extension Dev is an agent skill from mobazha/mobazha-unified.
Browser Extension Dev fits situations like: tasks that involve Browser extensions.
Run `npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a claude-code`. Or copy the skill folder (.cursor/skills/browser-extension-dev in mobazha/mobazha-unified) into .claude/skills/browser-extension-dev in your project. Claude Code loads it when a task matches its description.
Run `npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a codex`. Or copy the skill folder (.cursor/skills/browser-extension-dev in mobazha/mobazha-unified) into .agents/skills/browser-extension-dev in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-extension-dev, .gemini/skills/browser-extension-dev, .github/skills/browser-extension-dev and .opencode/skills/browser-extension-dev in your project.
Going by SKILL.md and its folder, Browser Extension Dev needs the command-line tools its instructions call (bash and pnpm).
SKILL.md names 1 domain. In commands or code: test-new.mobazha.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Browser Extension Dev is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Browser Extension Dev: Wxt (mengxi-ream/read-frog, 10k stars), Crxjs (samber/cc-skills, 228 stars), Chrome Extension (ericrisco/rsc-harness, 167 stars) and Wxt Browser Extensions (vantezzen/skip-silence, 468 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.
Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.