agentskills.codes
BR

browser-extension-developer

by yamadashyCodingSource

A framework-specific skill for developing cross-browser extensions using WXT and Manifest V3.

FrontendInternationalizationTypeScriptJavaScript

Install

mkdir -p .claude/skills/browser-extension-developer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/981" && unzip -o skill.zip -d .claude/skills/browser-extension-developer && rm skill.zip

Installs to .claude/skills/browser-extension-developer

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.
196 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • →Develop cross-browser extensions
  • →Manage content and background scripts
  • →Update i18n files
  • →Configure WXT framework
  • →Build for Chrome and Firefox

How it works

It uses the WXT framework to manage extension development, providing commands for building, linting, and testing across multiple browsers.

Inputs & outputs

You give it
Extension source code in browser/ directory
You get back
Built extension files for target browsers

When to use browser-extension-developer

  • →Develop chrome extension
  • →Update extension i18n files
  • →Build for firefox
  • →Add content script to extension

About this skill

Browser Extension Developer

Cross-browser extension (Chrome/Firefox/Edge) using WXT framework with Manifest V3. Injects "Repomix" button into GitHub repository pages.

Structure

browser/
├── entrypoints/       # background.ts, content.ts
├── public/_locales/   # i18n (12 languages)
├── wxt.config.ts      # WXT configuration
└── .output/           # Built files (chrome-mv3, firefox-mv2)

Commands

  • npm run dev - Development mode (Chrome default)
  • npm run dev:firefox - Firefox dev mode
  • npm run build-all - Build all browsers
  • npm run lint / npm run test

i18n

12 languages: en, ja, de, fr, es, pt_BR, id, vi, ko, zh_CN, zh_TW, hi

New language: Create public/_locales/[code]/messages.json with keys: appDescription, openWithRepomix

Notes

  • Chrome/Edge use chrome.* APIs, Firefox may need polyfills
  • Run lint and tests before completion

When not to use it

  • →Non-browser extension projects
  • →Manifest V2 legacy projects

Prerequisites

WXT frameworkManifest V3

Limitations

  • →Requires WXT framework
  • →Limited to Manifest V3

How it compares

It provides a structured environment for cross-browser compatibility and i18n management within a specific directory structure.

Compared to similar skills

browser-extension-developer side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
browser-extension-developer (this skill)46moNo flagsIntermediate
add-i18n-locale02moNo flagsBeginner
vue-i18n-skilld03moNo flagsIntermediate
i18n01moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by yamadashy

View all by yamadashy →

agent-memory

yamadashy

Use this skill when the user asks to save, remember, recall, or organize memories. Triggers on: 'remember this', 'save this', 'note this', 'what did we discuss about...', 'check your notes', 'clean up memories'. Also use proactively when discovering valuable findings worth preserving.

943

website-maintainer

yamadashy

Use this skill when working on the Repomix documentation website in `website/` directory, including VitePress configuration, multi-language content, or translation workflows.

12

You might also like

add-i18n-locale

GXFG

NaiveTab 浏览器扩展的 i18n 国际化开发指南。当用户要新增/修改翻译文本、添加多语言 key 时使用。涵盖中英文同步更新规则、变量替换模式等，防止遗漏或格式错误。

00

vue-i18n-skilld

skilld-dev

Internationalization plugin for Vue.js. ALWAYS use when writing code importing \"vue-i18n\". Consult for debugging, best practices, or modifying vue-i18n, vue i18n.

00

i18n

Project-N-E-K-O

i18n (internationalization) toolkit for projects using i18next. Provides three main functions: (1) i18n-check - Detect hardcoded Chinese text in HTML/JS files, (2) i18n-fix - Replace hardcoded text with i18n markers, (3) i18n-sync - Align translation keys across multiple languages (zh-CN, zh-TW, en,

00

harden

Aixbox

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.

00

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

threejs-skills

sickn33

Three.js skills for creating 3D elements and interactive experiences

61152

Search skills

Search the agent skills registry