Crates.io | dioxus-browser-extension-builder |
lib.rs | dioxus-browser-extension-builder |
version | 0.1.9 |
created_at | 2025-04-08 09:07:54.582923+00 |
updated_at | 2025-07-02 20:23:29.914836+00 |
description | A browser extension builder for dioxus |
homepage | |
repository | https://github.com/Summit-Sailors/dioxus-browser-extension-builder |
max_upload_size | |
id | 1625211 |
size | 154,379 |
A CLI tool for building Dioxus browser extensions.
The Dioxus Browser Extension Builder (dx-ext
) is a utility that simplifies the development and building of browser extensions using Dioxus
This tool handles:
git clone https://github.com/Summit-Sailors/dioxus-browser-extension-builder.git
cd dioxus-browser-extension-builder
cargo install --path ./dx-ext
cargo install dioxus-browser-extension-builder
# Generate a default configuration file
dx-ext init
# Build the extension (one-time build)
dx-ext build
# Start the development server with hot reload
dx-ext watch
Note: Use the --help
or -h
flag on each command for more information
dx-ext init
Sets up a workspace and creates a default dx-ext.toml
configuration file in the current directory.
# Create with default values
dx-ext init
# Create with custom values
dx-ext init --extension-dir my-extension --popup-name my-popup --background-script bg.js --content-script cs.js --assets-dir assets
# Create interactively
dx-ext init --interactive / dx-ext init -i
# Overwrite the existing config file
dx-ext init --force / dx-ext init -f
Options:
--extension-dir
: Name of your extension directory (default: "extension")--popup-name
: Name of your popup crate (default: "popup")--background-script
: Name of your background script entry point (default: "background_index.js")--content-script
: Name of your content script entry point (default: "content_index.js")--assets-dir
: Your assets directory relative to the extension directory (default: "popup/assets")--force, -f
: Force overwrite of existing config file--interactive, -i
: Interactive mode to collect configuration--mode, -m
: Build mode: development or release (default: "development")--clean, -c
: Clean build (remove dist directory first)dx-ext build
Builds all crates in the specified mode (dev
or prod
-> default-> dev
) and copies necessary files to the distribution directory without watching for changes.
dx-ext build
# For clean builds
dx-ext build --clean # to remove previous build artifacts
# For release builds
dx-ext build --mode release
This command:
wasm-pack
dx-ext watch
Starts the file watcher and automatically rebuilds components when files change.
dx-ext watch
# For clean re-builds
dx-ext watch --clean # to remove previous build artifacts
# For release re-builds
dx-ext watxh --mode release
This command:
q
to stop the watcherr
to restart the watcherThe tool is configured using a dx-ext.toml
file in the project root(Workspace):
[extension-config]
assets-directory = "popup/assets" # your assets directory relative to the extension directory
background-script-index-name = "background_index.js" # name of your background script entry point
content-script-index-name = "content_index.js" # name of your content script entry point
enable-incremental-builds = false # enable incremental builds for watch command
extension-directory-name = "extension" # name of your extension directory
popup-name = "popup" # name of your popup crate
Option | Description | Default |
---|---|---|
assets-directory |
Path to your assets directory relative to the extension directory | "popup/assets" |
background-script-index-name |
Name of your background script entry point | "background_index.js" |
content-script-index-name |
Name of your content script entry point | "content_index.js" |
extension-directory-name |
Name of your extension directory | "extension" |
enable-incremental-builds |
Enable incremental builds for watch command | false |
popup-name |
Name of your popup crate | "popup" |
A typical project structure for a Dioxus browser extension:
your-project/
├── dx-ext.toml # Extension configuration
├── extension/ # Defined by extension-directory-name in config
│ ├── background/ # Background script crate
│ │ ├── Cargo.toml
│ │ └── src/
│ │ └── lib.rs
│ ├── background_index.js # Background script entry point
│ ├── content/ # Content script crate
│ │ ├── Cargo.toml
│ │ └── src/
│ │ └── lib.rs
│ ├── content_index.js # Content script entry point
│ ├── dist/ # Build output directory
│ ├── index.html # Extension popup HTML
│ ├── index.js # Extension popup entry point
│ ├── manifest.json # Chrome extension manifest
│ ├── popup/ # Popup UI crate
│ │ ├── Cargo.toml
│ │ ├── assets/ # Static assets
│ │ └── src/
│ │ └── lib.rs
dx-ext init
to create the default configuration, or customize with options (use -i
flag)dx-ext.toml
if neededdx-ext watch
to start the development serverdist
directory in your browserdx-ext build -m prod
or dx-ext build -m release
to create a release buildThe watcher monitors:
Changes trigger specific rebuilds:
This project is licensed under the MIT License - see the LICENSE file for details.