Setting Up Vite and React for Chrome Extension Development

Summary

В этом видео пользователь демонстрирует, как создать расширение для браузера Chrome с использованием React и TypeScript. Он начинает с создания нового проекта, выбирает React и TypeScript, устанавливает необходимые пакеты и создает файл manifest.json. В процессе он обсуждает размещение файлов, настройку разрешений и создание фонового скрипта для управления панелью расширения. Наконец, он проверяет работу расширения, открывая и закрывая панель с помощью иконки расширения.

Takeaways

• 🌐 Создание расширения для Chrome с использованием React и TypeScript.
• 🔨 Использование команды 'npm create vite@latest' для начала работы с проектом.
• 📝 Выбор React и TypeScript как фреймворка и языка для проекта.
• 🛠️ Установка зависимостей проекта с помощью 'npm install'.
• 📁 Создание файла manifest.json для настройки расширения Chrome.
• 🔧 Настройка manifest.json с использованием последней версии (3) и добавлением необходимых разрешений.
• 🖼️ Использование иконок для кнопки расширения в Chrome.
• 🔄 Необходимость создания сборки приложения для его корректной работы в Chrome.
• 🔗 Подключение manifest.json к скрипту панели боковой панели.
• 🔄 Необходимость обновления и проверки работы расширения после внесения изменений.
• 🛠️ Исправление ошибок и доработка функциональности расширения с помощью background scripts.

Q & A

Какой инструмент используется для создания расширения Chrome?

Для создания расширения Chrome используется npm и выбирается React как фреймворк.

Какой файл необходимо добавить для создания Chrome-расширения?

Для создания Chrome-расширения необходимо добавить файл manifest.json.

Какой версии манифеста рекомендуется использовать?

Рекомендуется использовать версию 3 манифеста, так как это последняя версия на момент записи видео.

Какой тип файла должен быть открыт как панель по умолчанию в расширении?

Панель по умолчанию должна быть открыта с помощью index.html.

Какой элемент манифеста отвечает за отображение иконки расширения?

Элемент 'action' в манифесте отвечает за отображение иконки расширения.

Как можно открыть панель расширения при нажатии на иконку?

Для открытия панели при нажатии на иконку необходимо настроить 'action' в манифесте и использовать скрипт background.js.

Что такое 'service worker' и зачем он нужен в расширении?

'Service worker' - это скрипт, который работает в фоновом режиме и отвечает за функциональность расширения, например, открытие панели при нажатии на иконку.

Какой командой можно собрать проект для расширения Chrome?

Для сборки проекта можно использовать команду 'npm run build'.

Как проверить, работает ли расширение после сборки?

Для проверки работы расширения после сборки, его можно загрузить в Chrome через раздел 'расширения', выбрав опцию 'Загрузить распакованное расширение'.

Какие разрешения необходимы для работы расширения с панелью?

Для работы расширения с панелью необходимы разрешения 'storage' и 'side_panel'.

Outlines

00:00

😀 Создание расширения для Chrome с использованием React

В этом параграфе описывается процесс создания расширения для браузера Chrome с использованием React. Автор начинает с посещения сайта, где предлагается начать работу с npm и выбирает React в качестве фреймворка. Он создает новый проект, выбирает TypeScript и устанавливает все необходимые пакеты. Затем он открывает проект и запускает сервер для разработки. Автор планирует создать расширение, которое будет отображаться в виде боковой панели в Chrome.

05:02

📄 Добавление файла manifest.json для Chrome-расширения

Второй параграф фокусируется на добавлении файла manifest.json, который является необходимым для создания расширения Chrome. Автор обращается к Chat GPT за примером manifest.json и копирует предоставленный код. Он обсуждает, что файл должен быть включен в папку dist после сборки проекта. Автор также решает, что не нужно создавать всплывающее окно, а вместо этого будет использовать боковую панель. Он изменяет разрешения и устанавливает путь к файлу, который будет открыт при нажатии на иконку расширения.

10:03

🔄 Построение и тестирование расширения без background-скripta

В этом параграфе автор пытается построить и протестировать расширение без background-скripta. Он обсуждает, что можно создать manifest.json без background-скripta и стремится проверить, будет ли это работать. После неудачного попытки открыть боковую панель при нажатии на иконку, автор решает добавить background-скрипт, чтобы исправить проблему. Он также обнаруживает, что для открытия боковой панели при нажатии на иконку необходимо использовать background-скрипт.

15:03

🛠️ Исправление и завершение работы расширения

В заключительном параграфе автор ищет документацию, чтобы вспомнить, как открыть боковую панель при нажатии на иконку. Он обнаруживает, что для этого необходимо настроить action click в manifest.json и использовать background-скрипт. Автор добавляет необходимые настройки и снова строит проект. После этого он успешно открывает и закрывает боковую панель, используя иконку расширения. Автор завершает видео, надеясь, что зрители нашли его инструкцию полезной, и просит оставить комментарии.

Keywords

💡Chrome расширение

Chrome расширение - это дополнительное программное обеспечение, которое расширяет функциональность браузера Google Chrome, предоставляя новые возможности и улучшая опыт пользователя. В видео рассказывается о создании такого расширения, используя React и TypeScript, что является основной темой и целью инструкций.

💡React

React - это популярный JavaScript-фреймворк, разработанный Facebook для создания пользовательских интерфейсов. В контексте видео, React выбран как основной фреймворк для разработки Chrome расширения, что показывает, что расширение будет иметь графический интерфейс, разработанный с использованием React.

💡TypeScript

TypeScript - это супермножество языка программирования JavaScript, добавляющее в него типы. В видео упоминается выбор TypeScript в качестве одного из вариантов для создания проекта, что указывает на стремление к более безопасному и масштабируемому коду для расширения.

💡npm

npm (Node Package Manager) - это менеджер пакетов для JavaScript, позволяющий устанавливать, обновлять и удалять пакеты. В видео используется команда 'npm create' для инициализации нового проекта и 'npm install' для установки зависимостей, что является стандартным процессом в разработке с использованием Node.js.

💡Manifest v3

Manifest v3 - это версия спецификации manifest-файла для Chrome расширений, которая внедряет новые возможности и улучшения. В видео упоминается использование этой версии, что указывает на современные методы разработки и соответствие последним требованиям Chrome.

💡background script

Background script - это скрипт, который работает в фоновом режиме и выполняет задачи, не связанные с пользовательским интерфейсом. В видео рассматривается вопрос о необходимости background script для работы расширения, что является важным аспектом его архитектуры.

💡popup

Popup - это всплывающее окно, которое может быть использовано в Chrome расширениях для отображения информации или интерактивных элементов. В видео упоминается, что popup не требуется для данного расширения, что определяет тип графического интерфейса расширения.

💡action

Action - это объект в манифесте Chrome расширения, который определяет, что произойдет при клике на иконку расширения. В видео рассматривается использование action для открытия side panel при клике на иконку расширения, что является ключевым моментом в реализации функциональности расширения.

💡side panel

Side panel - это панель, которая открывается в боковой части окна браузера. В видео описывается процесс создания side panel с использованием Chrome расширения, что является основной функцией расширения, о которой рассказывается в видео.

💡service worker

Service worker - это фоновый скрипт в веб-приложениях, который позволяет обрабатывать запросы и управлять функциями, такими как push notifications и background sync, даже когда веб-страница закрыта. В видео упоминается ошибка с нераспознаваемым service worker, что указывает на важность их правильной настройки для работы расширения.

Highlights

Introduction to creating a Chrome extension using React and Webpack.

Accessing the official website to get started with Chrome extension development.

Using npm to create a new React project.

Choosing React as the framework for the Chrome extension.

Deciding whether to use TypeScript and SWC as the transpiler.

Installing the necessary packages for the project.

Running the project to see the default functional page.

Exploring how to make the React app work as a Chrome extension.

Adding a manifest.json file to the project.

Discussing the purpose of the manifest version number.

Deciding whether to include a popup or a sidebar in the extension.

Setting up permissions in the manifest.json file.

Building the application and preparing it for the Chrome extension.

Linking the manifest with the sidebar script.

Creating a default icon for the extension.

Exploring the use of background scripts in Chrome extensions.

Building the extension and testing it without a background script.

Loading the unpacked extension in Chrome to test its functionality.

Discussing the need for a background page to open the side panel.

Implementing the action to open the side panel on icon click.

Debugging the extension to ensure the side panel opens and closes correctly.

Final thoughts and call to action for feedback from viewers.

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