WXT

Opensource web extension framework

• HMR

• Easier bootstrapping/setup of frontend frameworks like React

• Automated publishing

• Strict project structure

• Instead of a manifest.json, define options in entry point files themselves and wxt.config.ts

• Browser api unifying chrome/firefox, import { browser } from 'wxt/browser';

  • wxt/storage

📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 assets/
   📁 components/
   📁 composables/
   📁 entrypoints/
   📁 hooks/
   📁 modules/
   📁 public/
   📁 utils/
   📄 .env
   📄 .env.publish
   📄 app.config.ts
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

Usage

• Entrypoints must be one to zero levels deep and is auto discovered and bundled

• Many folders are autoimported

Entrypoints

entrypoints/content.ts

export default defineContentScript({
  matches: ['*://*.wxt.dev/*'],
  main() {
    // ...
  },
});

entrypoints/popup.html or entrypoints/popup/index.html

Manifest

wxt.config.ts

export default defineConfig({ 
  manifest: {    // Put manual changes here  
  }, 
});