Setting Up Vite and React for Chrome Extension Development
Summary
TLDRIn this tutorial, the creator guides viewers through the process of developing a Chrome extension using React and TypeScript. Starting from setting up a new project with npm, they explore selecting React and TypeScript as the framework and language. The video explains creating a 'manifest.json' file, which is crucial for defining the extension's properties and behavior. It also delves into the intricacies of setting up the extension to open in a sidebar panel upon clicking the extension icon, including handling permissions and integrating background scripts. The creator concludes with a successful test of the extension, encouraging viewers to leave feedback.
Takeaways
- π§ The video is a tutorial on creating a Chrome extension using React and TypeScript.
- π» The process starts by initiating a new project using the `npm create vite@latest` command.
- π The tutorial guides viewers to choose React and TypeScript as the framework and language for the extension.
- ποΈ A new file named `manifest.json` is required to configure the Chrome extension settings.
- π οΈ The tutorial suggests using the latest manifest version, which is version 3 at the time of the video.
- π The `public` folder's contents should be included in the build folder for the extension to work correctly.
- π The manifest file needs to specify the correct file paths for the extension's features, like the sidebar script.
- π« The video mentions that a background script is not necessary for the extension's basic functionality.
- π The tutorial includes building the application and loading the unpacked extension in Chrome to test it.
- π The extension can be opened as a side panel by setting the appropriate permissions and manifest configurations.
- π‘ The video concludes with a working Chrome extension that opens and closes a side panel upon clicking the extension icon.
Q & A
What is the purpose of the video?
-The purpose of the video is to demonstrate how to create a Chrome extension using React and TypeScript.
What is the first step to create a new Chrome extension project?
-The first step is to visit the webextension.dev website, click the 'Get Started' button, and follow the instructions provided.
Which command is used to create a new project with a specific framework?
-The command used to create a new project is 'npm create webext latest', and you can choose the framework or library you want to use.
What does the video suggest for the project name when creating a new Chrome extension?
-The video suggests using 'Chrome extension test' as the project name.
What additional features can be chosen during the project creation process?
-During the project creation process, you can choose to use React, TypeScript, and optionally SWC as a transpiler.
What is the significance of the 'manifest.json' file in a Chrome extension?
-The 'manifest.json' file is crucial as it defines the extension's settings, including its version, permissions, and the files that make up the extension.
Why might the video creator choose not to include a popup in their Chrome extension?
-The video creator might choose not to include a popup because their extension is designed to be opened as a sidebar, not as a popup.
What is the role of the 'background' script in a Chrome extension?
-The 'background' script runs in the background and can perform actions such as listening for browser events or interacting with the extension's UI.
How can the video creator ensure their extension opens in a side panel?
-The video creator can ensure their extension opens in a side panel by setting the 'panel' property in the 'manifest.json' file and using the 'chrome.action.onClicked' event in the background script.
What is the final step to test the Chrome extension before it's published?
-The final step is to build the extension, load it as an unpacked extension in Chrome, and test its functionality.
What does the video creator do if the extension doesn't work as expected?
-If the extension doesn't work as expected, the video creator suggests checking the documentation, reviewing the code, and ensuring all necessary files are correctly linked and included.
Outlines
π οΈ Setting Up a Chrome Extension with React
The speaker begins by introducing a tutorial on creating a Chrome extension using React and Webpack. They navigate to the Webpack documentation website to get started, and demonstrate how to initiate a new project using the 'npm create web' command. The audience is guided through the process of naming the project 'Chrome extension test' and choosing React as the framework. The speaker opts for TypeScript as the transpiler and proceeds to install the necessary packages. They then open the project in a code editor and discuss the next steps, which include running 'npm install' and 'npm start' to set up the development server. The focus is on adapting a React application to function as a Chrome extension, with a plan to implement it as a sidebar within the browser.
π Creating the Manifest File for the Extension
In this segment, the speaker explains the need to create a 'manifest.json' file, which is essential for any Chrome extension. They consider asking Chat GPT for a basic template but decide to create one manually. The manifest file includes the version number, specifies that the extension uses React, and outlines the necessary permissions. The speaker decides not to include a popup and instead focuses on setting up a sidebar. They discuss the inclusion of a background script, which is not necessary for their project, and proceed to build the application. The process involves ensuring that the 'manifest.json' file is correctly linked to the sidebar script and that the public folder's contents are correctly reflected in the build folder.
π§ Debugging and Testing the Chrome Extension
The speaker explores the possibility of creating a Chrome extension without a background script, confirming that it is feasible. They build the extension again and attempt to load it as an unpacked extension in Chrome. After successfully loading the extension, they verify that it appears in the list of installed extensions. The speaker then delves into adding an action to the extension, such as opening a side panel when the extension icon is clicked. They encounter issues with outdated documentation and incorrect file paths but eventually find a solution involving the 'action' property in the 'manifest.json' and the use of a background script to handle the click event. Despite some initial failures, they manage to get the side panel to open and close as intended.
π Finalizing and Interacting with the Side Panel
In the final part, the speaker revisits the documentation to recall how to open a side panel through user interactions. They discover that the 'chrome.action.onClicked' event is used to open the side panel and set the panel's behavior to open on action click. The speaker incorporates this into their project, adding the necessary background JavaScript file to handle the event. After rebuilding the extension and refreshing it in Chrome, they successfully demonstrate the opening and closing of the side panel upon clicking the extension icon. The tutorial concludes with a call for feedback from viewers and a farewell note.
Mindmap
Keywords
π‘Chrome Extension
π‘React
π‘Webpack
π‘npm
π‘TypeScript
π‘manifest.json
π‘Service Worker
π‘Background Script
π‘Side Panel
π‘Action
Highlights
Introduction to creating a Chrome extension using React and TypeScript.
Accessing the official website for creating Chrome extensions.
Instructions on initiating a new Chrome extension project with npm.
Choosing React as the framework for the Chrome extension.
Deciding between TypeScript and SWC as the transpiler.
Installation of project dependencies using npm install.
Running the development server with npm start.
Explanation of the need for a manifest.json file for Chrome extensions.
Creating a manifest.json file with version 3 specifications.
Decision on not using a popup for the Chrome extension.
Setting up the action that occurs when the extension icon is clicked.
Discussion on whether a background script is necessary for the extension.
Building the application and preparing it for the Chrome extension.
Adding permissions to the manifest.json for the extension's functionality.
Setting the correct file to be opened as a side panel in the extension.
Loading the unpacked extension in Chrome for testing.
Troubleshooting and resolving issues with the extension's side panel.
Adding a background script to handle the side panel's opening on icon click.
Final testing and confirmation of the Chrome extension's functionality.
Conclusion and call to action for feedback on the tutorial.
Transcripts
hi guys hi guys today I'm going to show
you how to create Chrome extension using
re and whe so uh I'll just go ahead and
get
started so here is the withjs dod
website where we can find how to get
started so we click button get started
and let's
see so here is here are the instructions
how to do that npm create we latest we
use we use just
npm um so I think that's many people use
that so we just copy that and we go
to and go and create a new
project how do we do that we just go to
the folder we want to have the project
to be
created and let's let's paste this
command in
here and let's see what
happens so it asks for the project name
let's um
Chrome extension
test now we want to choose from
here which framework or Library we want
to use and we choose
react
now we can use typescript typescript
plus s swc I'm not sure what is
that look like a already I
already Googled it but
actually so um it's kind of a new
transpiler or transpiler
for okay never mind I'll just use
typescript regular trans
spiler and the project is installed
let's go and open that
Library
umm
okay let's open it let's terminate
terminate all the the current processes
which I
have and now we have the react
we installed
let's let's actually install the
packages because it should actually say
what should we do next
after we create latest okay here it is
go to your
project and now we should run npm
install
and then npm npm run there it just to
run the
regular the regular
um
server but for Chrome extension we are
going to use something else so here it
is npm
packages have been successfully
installed and now we can run this
command this command is actually uh
located in
here so you can run it
from package Json itself if you have a
uh jet brains webstorm I think it should
be similar with W
code so now if you open that it should
it should show you here the
default page which is functional as you
can
see but how to make it work as a Chrome
extension that's the
question um so I plan to make this as a
Chrome extension to be opened on the
left sa side panel like
here inside of here it's possible to
open extensions if they support
that uh so let's do
that at least we are running this and
um actually to make the Chrome extension
we just need to add one file I believe
at least one file called manifest
Json so um let's let's do that but I'll
go ahead and ask chat GPT to provide
Prov me a
u basic
manifest manifest Json
example so I don't search
for for that
provide a
manifest Json to create a Chrome
extension
y okay so as you can
see that is Manifest version number
three that's the latest one I
believe and uh let's use it we can
actually C copy the code here and we can
go and create it inside of
our I
believe
inside not
SRC but in the end result we would need
that manifest to be
included into the dist
folder so let's
see um popup we don't need popup at
least I don't need a
popup uh but that's an action the action
which is a what is going to happen when
you click uh the the extension button
default icon we don't have that and we
will change that to the sidebar uh HTML
file now background
do we really have a
background uh we don't have a background
JavaScript because we don't have
anything to run at least for my
needs permission storage
okay uh what should we do
next we actually should make a
build of
the
application the whole
application let's
see okay uh and I believe that
everything we put in here into public
folder it should also be inside of build
folder let's try to build it
again and let's
see okay manifest exist now and the only
thing we we need to do right now is to
connect our manifest with
the sidebar script in here we don't run
content scripts too I just need a
sidebar icons we don't have any icons
for
now
okay so default popup index no it's not
a
popup um let's Google Google for um
Google Chrome side panel
API let's
see okay so permissions we need to add
permissions uh
permissions not storage but side panel
we delete it in
here
permissions we are okay and to okay so
we need to set the correct file to be
opened as a side panel so that's how we
do that we write side panel default path
and in our case it's not side panel HTML
it should be index HTML
right okay now it's
done and we need to to
[Music]
trigger okay we'll do that
later background can we do without
background can I have manifest Json
without background
script question mark certainly you can
create manifest
without okay that's great I like it
and now let's build it again and let's
try to run this extension and
see is Miracle happens is it going to
run from the first
time so let's go in here
and uh extensions manage
extensions load unpacked so let's see
where did
we
where do we locate it uh I will copy
path
reference like
here and let's load unpacked let's paste
it to go directly there let's use this
folder and we are ready to choose the
folder it doesn't give any errors that's
good and once we uploaded the extension
we you should actually see
it in in the list and if we hit that
okay you can see
that it's up and running it's working
functional so uh we are ready to
continue how do we continue I would add
action I would add
action I mean I want that extension to
be
opened when I hit this icon so how do we
do that there
is um there is something called action
default popup I'm not
sure is default
popup let's see
action default
title
uh on action click okay let's
see
so let's try this default popup
HTML
H um I actually forgot how to do that
how
to
open side panel on icon
click
okay so we have size panel in
here okay the the
the information is a bit outdated
because let's see so the default pop up
I actually have that in another
extension let me try to remember so sta
spin I have
that that's another project I worked on
it's built on top of
angular but let's find manifest
Json
[Music]
and okay default title click to open
Panel
but this is not going to open it by
itself anyways let's let's see I think
what can open the default panel panel
is background
page so background let's see where where
do we have background okay background Js
[Music]
and H that's weird okay let me try to
build it again and let's see whether
this uh
works we'll need to refresh let's see no
it doesn't
work
H
um okay let's see the docks because I I
totally forgot how
to open the side
panel
okay you can open the side panel through
user interactions using side panel open
and set panel Behavior suest action
click okay so I think we need to use
this one and see in my old
project okay yeah we can see
that we set this
setting and I believe we should
also have our um
[Music]
background JS oh not Json
JS and
let's add
that worker service
worker right something like that we will
need to build it
again let's try to refresh
it
and let's try to
open now there are
errors unrecognized service worker okay
let's
see um how it looks is
it
background all right that's
funny
let's refresh it again and let's try to
click okay it works and when we hit
again it closes
that's what I I
need and it's working great great great
great that's actually it
guys I hope that you find
this I don't know instruction or video
useful leave me a comments to this video
so I know your opinion thank you
bye
5.0 / 5 (0 votes)