Agent skill

Browser Extension Dev

by mobazha in mobazha/mobazha-unified

Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified.

MPL-2.0Auto-check passedDevelopment

Install Browser Extension Dev

skills CLI
$ npx skills add mobazha/mobazha-unified --skill browser-extension-dev -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mobazha/mobazha-unified browser-extension-dev --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
browser-extension-dev
GitHub stars
165
Token cost
~2k tokens
SKILL.md length
349 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MPL-2.0

At a glance

Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified.

  • Works in 9 steps: 快速上下文 → 架构要点(四壳一码) → 执行协议 → …
  • Tasks that involve Browser extensions
  • SKILL.md covers 1. 快速上下文, 2. 架构要点(四壳一码), 3. 执行协议 and 4. Ext-0 原型验证(~2 天), plus 5 more sections
  • Calls bash and pnpm; reaches test-new.mobazha.org

What it does

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.

When your agent uses it

  • Tasks that involve Browser extensions

Example prompts

  • “browser extension”
  • “Chrome 扩展”
  • “继续扩展开发”
  • “/browser-extension-dev”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. 快速上下文
  2. 架构要点(四壳一码)
  3. 执行协议
  4. Ext-0 原型验证(~2 天)
  5. 本地开发工作流
  6. 关键约束速查
  7. 目录约定
  8. 阶段路线图
  9. 常见问题

What it can do on your machine

Read from SKILL.md and the folder at commit 156c699. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Shell commands in SKILL.md call:

    • bash
    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • test-new.mobazha.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~67
When it runs · the whole SKILL.md, loaded when a task matches
~2k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 349 words, ~2,039 tokens.

Download SKILL.mdSave it as .claude/skills/browser-extension-dev/SKILL.md (or your agent's skills folder).
name
browser-extension-dev
description
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"。

浏览器扩展开发执行器

1. 快速上下文

阅读以下文件获取完整上下文:

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 组件复用决策

2. 架构要点(四壳一码)

关键原则:扩展通过 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 等组件在扩展中直接可用。

3. 执行协议

当用户说"继续扩展开发"、"Ext-0"、"扩展下一步"时:

Step 1: 定位当前进度
bash
bash -c 'ls -la ~/dev/openbazaar/mobazha-unified/apps/extension/ 2>/dev/null || echo "未创建"'
Step 2: 确认所在阶段
阶段判断条件目标
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 完整购物流程见设计文档
Step 3: 按阶段执行

4. Ext-0 原型验证(~2 天)

4.1 脚手架搭建
bash
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, vite
  • apps/extension/manifest.json — MV3 声明
  • apps/extension/vite.config.ts — 多入口构建
  • apps/extension/tsconfig.json — TypeScript 配置
4.2 核心适配(Ext-0 最小方案)

Token 存储:Popup/Side Panel 有自己的 localStorage,@mobazha/core 的 getStoredToken()/saveToken() 直接可用。Ext-1+ 再迁移到 chrome.storage.session。

API URL:扩展不经过 Vite proxy,需要配置完整 URL:

typescript
// 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 允许跨域请求:

json
"host_permissions": ["https://test-new.mobazha.org/*"]
4.3 OAuth 登录
typescript
// chrome.identity.launchWebAuthFlow
const redirectUrl = chrome.identity.getRedirectURL();
// → https://<extension-id>.chromiumapp.org/

// 前置条件:Casdoor 中注册此 redirect URI

注意:Ext-0 可先跳过 OAuth,使用 Basic Auth 或手动输入 token 验证 API 调用。OAuth 集成是高优先但非阻塞。

4.4 成功标准
  • Chrome 开发者模式加载扩展,图标显示在工具栏
  • 点击图标弹出 Popup,渲染 React 组件
  • OAuth 登录流程完成(或 Basic Auth 替代)
  • 登录后搜索商品,展示结果列表
  • Side Panel 可打开并显示占位页面
  • 构建产物无 CSP 违规

5. 本地开发工作流

bash
# 启动开发服务器
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 变更需手动刷新扩展。

6. 关键约束速查

约束影响应对
禁止 eval()CSP 阻止动态代码执行确保 packages/core 无 eval/new Function
Service Worker 无 DOM不能引用 window/documentbackground 代码中条件判断
30s 空闲挂起Service Worker 不持久事件驱动 + chrome.alarms
Popup 400×600固定最大尺寸紧凑 UI 设计
Side Panel 宽度可变用户可拖动调整响应式布局
localStorage 隔离扩展有独立存储空间Ext-0 直接使用,Ext-1+ 迁移

7. 目录约定

文件职责
src/popup/App.tsxPopup 根组件(搜索 + 快捷操作)
src/popup/main.tsxPopup React 入口
src/sidepanel/App.tsxSide Panel 根组件(完整购物)
src/sidepanel/main.tsxSide Panel React 入口
src/background/service-worker.tsService Worker(OAuth token 交换、badge 更新)
src/shared/init.ts扩展初始化(API URL 配置)
src/shared/chrome-storage.tsChrome Storage 封装(Ext-1+)

8. 阶段路线图

Phase范围依赖状态
Ext-0脚手架 + Popup 搜索 + Side Panel 浏览 + Badge 示例无大部分 ✅(OAuth 待实施)
Ext-1Vite alias 复用 apps/web 组件 + OAuth + Side Panel 完整购物Ext-0 OAuth ✅待启动
Ext-2桌面通知 + 订单状态追踪 + Badge 未读计数Ext-1待启动
Ext-3Content Script 跨站增强Ext-2待启动
Ext-4生态增强(推荐、同步)Ext-3待启动

Ext-2 变更:从"钱包概览"改为"订单状态追踪"(Mobazha 使用外部钱包)。

9. 常见问题

问题原因解决
Popup 白屏CSP 阻止内联脚本检查 Vite 构建无内联 <script>
Service Worker 报错引用了 window/document拆分浏览器代码和 SW 代码
API 返回 CORS 错误缺少 host_permissionsmanifest 添加 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

Files

Just SKILL.md in .cursor/skills/browser-extension-dev of mobazha/mobazha-unified.

Open the folder on GitHubat commit 156c699

Compare with similar skills

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.

Browser Extension Dev compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Extension Dev this skillmobazha/mobazha-unified165—~2kAutomated safety check: PassMPL-2.0
Wxtmengxi-ream/read-frog10k—~500Automated safety check: PassGPL-3.0
Crxjssamber/cc-skills228—~2.6kAutomated safety check: PassMIT
Chrome Extensionericrisco/rsc-harness167—~2.7kAutomated safety check: PassMIT
Wxt Browser Extensionsvantezzen/skip-silence4682 repos~1.9kAutomated safety check: PassMIT
Kimi WebbridgeMoonshotAI/kimi-code7.8k—~3.6kAutomated safety check: PassMIT

Similar skills

  • 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.

    10k GitHub stars~500 tokensUpdated today
    DevelopmentAuto-check passed
  • Crxjs

    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…

    228 GitHub stars~2.6k tokensUpdated 7 days ago
    DevelopmentAuto-check passed
  • Chrome Extension

    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…

    167 GitHub stars~2.7k tokensUpdated today
    DevelopmentAuto-check passed
  • Wxt Browser Extensions

    vantezzen/skip-silence

    WXT browser extension performance optimization guidelines. An agent skill from vantezzen/skip-silence.

    468 GitHub starsUsed in 2 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Kimi Webbridge

    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…

    7.8k GitHub stars~3.6k tokensUpdated today
    DevelopmentAuto-check passed
  • Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content…

    29k GitHub starsUsed in 1 repo~288 tokens
    DevelopmentAuto-check passed

More from mobazha/mobazha-unified

All 29 skills in this repo
  • A11y Guide

    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.

    165 GitHub stars~1.4k tokensUpdated 4 days ago
    Auto-check passed
  • API Reference

    mobazha/mobazha-unified

    Look up Mobazha backend API endpoints, request/response formats, and field mappings.

    165 GitHub stars~1.7k tokensUpdated 4 days ago
    Auto-check passed
  • Code Review

    mobazha/mobazha-unified

    Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.

    165 GitHub stars~464 tokensUpdated 4 days ago
    Auto-check passed
  • Code Simplifier

    mobazha/mobazha-unified

    Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.

    165 GitHub stars~601 tokensUpdated 4 days ago
    Auto-check passed
  • Commit Helper

    mobazha/mobazha-unified

    Generate commit messages and run pre-commit validation following Mobazha conventions.

    165 GitHub stars~735 tokensUpdated 4 days ago
    Auto-check passed
  • Component Dev

    mobazha/mobazha-unified

    Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

    165 GitHub stars~638 tokensUpdated 4 days ago
    Auto-check passed

Categories

Questions about Browser Extension Dev

What does Browser Extension Dev do?

Chrome/Brave 浏览器扩展开发执行器。覆盖 Ext-0 原型验证到 Ext-4 生态增强的全生命周期. An agent skill from mobazha/mobazha-unified. Browser Extension Dev is an agent skill from mobazha/mobazha-unified.

When should I use Browser Extension Dev?

Browser Extension Dev fits situations like: tasks that involve Browser extensions.

How do I install Browser Extension Dev in Claude Code?

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.

How do I install Browser Extension Dev in Codex?

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.

Can I use Browser Extension Dev in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Browser Extension Dev need to run?

Going by SKILL.md and its folder, Browser Extension Dev needs the command-line tools its instructions call (bash and pnpm).

Does Browser Extension Dev access the network?

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.

Is Browser Extension Dev safe to install?

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.

What licence does Browser Extension Dev use?

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.

How many tokens does Browser Extension Dev use?

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.

What are the alternatives to Browser Extension Dev?

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.

Who maintains Browser Extension Dev?

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.