dioxus-browser-extensions

Scaffold Dioxus browser extension crates and build WASM with wasm-pack.

1|Updated Mar 15, 2026

Search Tags:#wasm-pack #wasm #browser-extension #dioxus #chrome-mv3 #firefox-mv3 #web-extensions

Ready to run

npx skills add https://github.com/hafley66/claude-research --skill dioxus-browser-extensions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dioxus-browser-extensions
Source: https://github.com/hafley66/claude-research/tree/main/skills/dioxus-browser-extensions
Command: npx skills add https://github.com/hafley66/claude-research --skill dioxus-browser-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dioxus-based browser extensions require a cohesive guide to structure multiple extension contexts (popup, background, content script, options, sidepanel) and to wire WASM builds per context using wasm-pack, while ensuring cross-browser compatibility and CSP considerations.

Core Features & Use Cases

Per-context WASM binaries built with wasm-pack for each extension context (popup, background, content, options, etc.)
Workspace structure that groups shared code and defines per-context crates with a common manifest strategy
Guidance on Chrome MV3 and Firefox MV3 compatibility, CSP, and web_accessible_resources setup
Dioxus entry points for popup and options UIs, with lighter handling for content scripts that may render in-page

Quick Start

Use this skill to scaffold and build Dioxus-based browser extensions by installing wasm-pack, configuring the workspace, and building each context with wasm-pack.

Frequently Asked Questions about dioxus-browser-extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a Dioxus browser extension with WASM?▼

Build a Dioxus browser extension by creating per-context crates for popup, background, and content scripts, then compiling each context separately with wasm-pack to load WASM in extension environments.

Can I use the same Dioxus extension code for Chrome MV3 and Firefox MV3?▼

Cross-browser Dioxus extensions support both Chrome MV3 and Firefox MV3 by applying a common manifest strategy and configuring browser-specific CSP and web_accessible_resources settings for compatibility.

What's the best way to structure a Dioxus WASM extension workspace?▼

Structure a Dioxus WASM extension workspace by grouping shared code and defining per-context crates for popup, background, content, and options, enabling cohesive builds using a common manifest strategy across extension contexts.

How do I handle content security policy for WASM extensions?▼

Handle content security policy for WASM extensions by configuring specific CSP settings required to bootstrap and load WASM in extension contexts, ensuring web_accessible_resources are correctly declared for both Chrome and Firefox.

Do I need wasm-pack to develop Dioxus browser extensions?▼

wasm-pack is required to develop Dioxus browser extensions as it provides the necessary tooling to compile per-context WASM binaries and configure the workspace to load WASM within extension contexts.