skills.rest
hafley66
hafley66COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/hafley66/claude-research --skill dioxus-browser-extensions
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
OpenZeppelinOpenZeppelin
203

setup-stellar-contracts

Set up Soroban/Stellar smart contract projects with OpenZeppelin Rust crate dependencies.

Official
Intermediate
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

Browser Extension Builder

Build Chrome and Firefox browser extensions with Manifest V3.

Official
Intermediate
telum-aitelum-ai
2

visual-testing-extension

Capture extension UI screenshots with Puppeteer and Playwright for visual regression testing.

Official
Intermediate
rfdiosuaorfdiosuao
30

wasm-expert

Compile Rust and C to WebAssembly with WASI and component model guidance.

Community
Advanced