Setting Up Vite and React for Chrome Extension Development

Summary

In 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

00:00

🛠️ 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.

05:02

📄 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.

10:03

🔧 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.

15:03

🎉 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.

Keywords

💡Chrome Extension

A Chrome Extension is a software program that adds functionality to the Google Chrome web browser. In the video, the creator is demonstrating how to build a Chrome Extension using React and Webpack, showcasing the process from initialization to implementation. The theme revolves around web development and browser customization.

💡React

React is a popular JavaScript library for building user interfaces, particularly for single-page applications. It is used in the video to create the user interface of the Chrome Extension. The script mentions choosing React as the framework when setting up the project, indicating its importance in modern web development.

💡Webpack

Webpack is a module bundler that is mainly used for JavaScript applications. It is mentioned in the context of setting up the development environment for the Chrome Extension. Webpack is instrumental in optimizing and bundling the project's resources, which is a crucial step in the development process.

💡npm

npm stands for Node Package Manager, a package manager for JavaScript and the default package manager for the JavaScript runtime environment Node.js. The script refers to npm commands such as 'npm create' and 'npm install', which are used to set up the project and install dependencies, highlighting npm's role in managing project packages.

💡TypeScript

TypeScript is a superset of JavaScript that adds static types to the language. It is mentioned in the script as an option when setting up the project. The use of TypeScript in the video indicates a preference for a more structured approach to JavaScript development, offering better tooling and error checking.

💡manifest.json

The manifest.json file is a configuration file that tells the browser about the extension and how it should behave. In the video, the creation of this file is a key step in turning the React app into a Chrome Extension. The script details the necessary properties like 'manifest_version' and 'action', which are crucial for the extension's functionality.

💡Service Worker

A Service Worker is a script that the browser runs in the background, separate from a web page, and is used to enable features like offline functionality or push notifications. The video discusses the need for a service worker in the context of the Chrome Extension, indicating its role in handling background tasks.

💡Background Script

A background script is a JavaScript file that runs in the background of a Chrome Extension, performing tasks independently of web pages. The script mentions the possibility of not needing a background script for the extension, but later it is included to handle opening the side panel, demonstrating its utility in extension development.

💡Side Panel

A side panel in the context of Chrome Extensions refers to a UI element that appears on the side of the browser window. The video's main goal is to create a Chrome Extension with a side panel that can be opened and closed by clicking the extension icon. This feature is central to the extension's functionality and user interaction.

💡Action

In Chrome Extensions, an 'action' is a UI element that the user can interact with, such as a button in the toolbar. The script discusses setting up an action in the manifest.json file, which is tied to the behavior of clicking the extension icon, such as opening a side panel. This concept is integral to the user's interaction with the extension.

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