WXT - Browser Extension Framework

When to Use

Apply this skill when:

• Project has wxt.config.ts in root
• Code uses defineBackground, defineContentScript, defineUnlistedScript
• package.json has wxt as a dependency
• Entrypoints directory contains extension entry files
• Code imports from #imports or wxt/*

Quick Reference

Most Common Pattern

ts
1// entrypoints/background.ts
2export default defineBackground({
3  main() {
4    // ALL runtime code must be inside main() - cannot be async
5    browser.runtime.onInstalled.addListener(() => {
6      console.log('Extension installed');
7    });
8  },
9});

Critical: main() cannot be async. Code outside main() runs at build time in Node.js.