Up next in 10
Build a React.js WXT Framework FFMPEG WASM Project to Build Chrome & Firefox Video Editor Extension
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-wxt-framework-ffmpeg-wasm-project-to-build-chrome-firefox-video-editor-extension/
Show More Show Less View Video Transcript
0:00
Uh hello guys, in this video I'll show
0:02
you I built out a uh Chrome and Firefox
0:06
video editor extension using the newly
0:10
framework in the market which is WXT.
0:14
So WXT basically it's a web framework
0:17
for building Chrome extensions or
0:20
Firefox extensions, your browser
0:21
extensions directly using ReactJS. So
0:25
this is their official website wxt.dev.
0:28
So this is actually the full ReactJS
0:31
project here. As you can see if I show
0:33
you package.json file. We are using the
0:36
latest version of React. We are also
0:38
using ffmpg web assembly library to
0:40
build out a video editor or video
0:43
trimmer chrome extension or firefall
0:45
extension. [gasps]
0:47
So if you need the source code
0:50
everything is customizable. I written
0:52
this code from scratch. So the link is
0:55
given you can directly purchase it. So
0:57
you will see this is the full directory
0:59
structure
1:00
and now to run this it's very easy you
1:03
come to the command line and there is
1:05
first of all you open the project in VS
1:08
code and uh after that
1:12
if you see in the package dojson file
1:14
it's easy for you to compile the chrome
1:16
extension. So by running this dev script
1:19
here
1:23
so just write npm rundev. So this will
1:26
actually compile everything into a
1:29
Chrome extension. So you can see the
1:32
total size. It will also open the
1:34
browser automatically for you. So
1:37
basically the total size will compile
1:39
everything the inside
1:44
the React application into a Chrome
1:45
extension.
1:48
So you can even do this same for Firefox
1:51
as well. So now if you open the
1:54
this browser go to the settings option
1:57
and it's there also just go to the
2:00
extensions tab and just toggle on this
2:04
developer mode and uh now you click this
2:08
button load unpacked.
2:11
So right here you need to select
2:13
wherever you actually created this
2:17
project. And
2:22
so right here on once you execute this
2:24
command in the output folder it will
2:26
automatically create and you will see
2:28
this this is a development folder or
2:31
this is a main extension. So just select
2:34
any of these folder and as soon as you
2:37
do this the chrome extension will be
2:39
there.
2:41
And now if you open the browser and go
2:45
to a website and you can see this
2:47
extension right here. If you see just
2:50
click this extension.
2:59
So now the video trimmer application
3:02
will open directly as a chrome
3:03
extension. So this UI I coded directly
3:06
in ReactJS. As you can see if I show you
3:09
the package dojson file we using react
3:11
here for building out this chrome
3:13
extension. So it's easy for you using
3:16
this framework wxt. And after that now
3:19
you select whatever video you want to.
3:32
So just select the video whatever video
3:34
you're working with and from here you
3:36
can provide starting time ending time.
3:38
So the main thing is that we are
3:41
actually using ffmppg
3:44
inside this chrome extension. So using
3:46
that you can you can see automatically
3:49
the compilation will happen the
3:50
processing will directly happen in the
3:52
browser and now you can click the
3:54
download button to actually trim out
3:57
[snorts] the video. So it's a full
4:00
project. how to actually run fmpp
4:03
directly in Chrome extension. So where
4:06
you can build out any sort of Chrome
4:07
extension. So I just built out a video
4:10
trimmer. You can build out any sort of
4:12
extension just using the same concept.
4:14
So if you're interested in purchasing
4:16
that uh full source code, it will save
4:20
you a lot of time because it's a full
4:22
project of React with the full fmpg web
4:25
assembly libraries installed. So it's a
4:29
full stack project.
4:31
Everything is customizable. So each and
4:34
every component is divided into its
4:36
appropriate TypeScript file. So it's
4:38
easy for you to customize this as well.
4:40
So the link is given in the description
4:44
and if you show you can even compile it
4:47
for Firefox as well. So this is the
4:49
actual command here. This will compile
4:51
it to a Firefox Chrome ext uh browser
4:54
extension.
4:56
And this is this build commands as well.
4:58
You can build it to a zip file as well.
5:01
So all these commands are there. The
5:04
main thing is that we using this
5:05
framework which is wxt which is newly
5:09
released in the market for allowing the
5:12
developers to create chrome extensions
5:15
directly using the react view spelt all
5:20
these popular frameworks. So it does
5:23
allow you to actually
5:26
concentrate on whatever extension you
5:28
are building and not worry about the
5:31
syntax. So you can directly build it in
5:33
react
5:34
in react components this chrome
5:36
extension. So specifically I build out
5:38
this chrome extension for trimming out
5:42
your video and we are using FMPG web
5:46
assembly library. You can pick out any
5:49
video. Just select the video and provide
5:51
the starting and the ending duration.
5:53
And then as soon as you click trim
5:55
video, all the processing will directly
5:57
happen using ffmpg web assembly library.
6:00
And once you click the download button,
6:03
the video will actually download as
6:06
well. So
6:09
[snorts]
6:12
if you don't know ffmpg web assembly,
6:14
it's a very popular browser library for
6:17
directly using ffmpg directly in the
6:20
browser. So we are using this alongside
6:23
with this wxt framework. You can read
6:26
more about it in the documentation. So
6:28
if you don't know about this framework,
6:30
it's actually
6:32
creating Chrome extensions or Firefox
6:35
extension, browser extensions
6:39
and it's easy. Once you purchase it,
6:41
simply run the command npm runtime and
6:43
this will compile it to a full extension
6:46
of the browser
6:48
and you can compile it for Firefox or
6:51
Google Chrome. All these commands are
6:53
given.
6:55
So
6:58
apart from that it's entirely in
7:01
Typescript so it's compatible. We are
7:04
also using wheat and we are also using
7:07
Tailwind CSS for the user interface.
7:10
Uh you can see we are using wxt.
7:18
So these are all the files here. Each
7:20
and every file is customizable. So you
7:24
can customize the source code. So
7:29
so it basically compiles your React
7:31
project into a Chrome extension which it
7:33
automatically creates this manifest.json
7:36
file, this pop-up file that you see. So
7:39
it basically converts compiles your
7:41
React project into a Chrome extension.
7:43
So this is essentially this framework
7:46
which is doing which is WXT.
7:49
So
7:52
if you're interested in this the link is
7:53
given in the description.