이 블로그에서는 TypeScript, React, Tailwind CSS 및 Webpack을 사용하여 Chrome 확장 프로그램을 설정하고 개발하는 방법을 살펴보겠습니다. 우리의 이해도를 테스트하기 위해 "NoteMe"✍️라는 최소한의 확장 프로그램을 만들겠습니다. 우리의 확장에는 다음 기능이 포함됩니다:
이 블로그에서는 최신 기술을 사용하여 Chrome 확장 프로그램을 구축하는 방법을 알아봅니다. 이 가이드에서는 사용자가 로컬 개발 중에 Chrome 확장 프로그램을 빌드하고 업로드하는 데 이미 어느 정도 익숙하다고 가정합니다. 이 내용이 처음이거나 기본 사항에 대한 자세한 설명이 필요한 경우 이전 블로그를 확인하는 것이 좋습니다. 링크
확장에는 다음 구성 요소가 포함됩니다.
다음은 확장 프로그램이 완료되면 어떻게 보일지 보여주는 스크린샷입니다.
이 튜토리얼을 시작하기 전에 시스템에 다음 도구가 설치되어 있는지 확인하세요.
위 그림은 이 확장 프로그램의 내부 작동에 대한 높은 수준의 개요를 제공합니다. 다음은 다이어그램에서 파생할 수 있는 몇 가지 핵심 사항입니다.
Chrome 확장 프로젝트는 특정 프로젝트 구조를 요구하지 않지만, 빌드 디렉터리의 루트에 있는 매니페스트.json 파일이 필요합니다. 이러한 유연성을 활용하여 다양한 스크립트를 효과적으로 구성하는 데 도움이 되는 사용자 정의 프로젝트 구조를 정의하겠습니다. 이 구조를 통해 스크립트 전체에서 코드를 더 효과적으로 재사용하고 중복을 최소화하여 개발 프로세스를 간소화할 수 있습니다.
시작하려면 프로젝트의 기본 디렉터리 구조를 설정해야 합니다. 다음 bash 스크립트를 사용하여 매니페스트.json 파일과 함께 기본 구조를 생성할 수 있습니다.
#!/bin/bash
bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"
create_directory () {
if [ ! -d "" ]; then
mkdir
fi
}
create_file () {
if [ ! -e "/" ]; then
touch /
fi
}
create_public_directories () {
for public_path in "${public_paths[@]}";
do
create_directory $public_path
done
}
create_source_directories () {
for source_path in "${source_paths[@]}";
do
create_directory $source_path
done
}
execute () {
echo "creating project struture at "${bash_script_absolute_path}
create_directory $project_name
cd $bash_script_absolute_path"/"$project_name
create_public_directories
create_source_directories
create_file $manifest_file $public_directory_path
echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}
execute
디렉토리 구조가 아래 스크린샷에 표시된 것과 유사한지 확인하세요.
{
"manifest_version": 3,
"name": "NoteMe",
"version": "1.0",
"description": "A Chrome extension built with React and TypeScript using Webpack.",
"action": {
"default_popup": "popup.html",
"default_icon": "app-icon.png"
},
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"permissions": [
"storage",
"activeTab",
"scripting",
"webNavigation"
],
"host_permissions": ["<all_urls>"],
"web_accessible_resources": [
{
"resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
"matches": ["<all_urls>"]
}
]
}
주의사항:
manifest.json에서 참조되는 backgroun.ts, content.ts 및 popup.html 파일을 생성합니다.
공개 디렉토리의 popup.html 파일에 다음 코드를 추가하세요.
#!/bin/bash
bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"
create_directory () {
if [ ! -d "" ]; then
mkdir
fi
}
create_file () {
if [ ! -e "/" ]; then
touch /
fi
}
create_public_directories () {
for public_path in "${public_paths[@]}";
do
create_directory $public_path
done
}
create_source_directories () {
for source_path in "${source_paths[@]}";
do
create_directory $source_path
done
}
execute () {
echo "creating project struture at "${bash_script_absolute_path}
create_directory $project_name
cd $bash_script_absolute_path"/"$project_name
create_public_directories
create_source_directories
create_file $manifest_file $public_directory_path
echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}
execute
참고:
위의 코드는 두 개의 리스너를 설치합니다.
또한 import 문은 src/lib 디렉터리에서 리스너를 가져옵니다. 핵심 앱 로직은 src/lib에 내장되어 있어 다양한 컨텍스트(예: 콘텐츠 및 배경 스크립트)에서 재사용이 가능합니다.
src/lib 디렉토리에는 확장 프로그램의 핵심 로직이 들어 있습니다. 다음은 구조와 주요 구성 요소에 대한 개요입니다.
자세한 구현은 저장소에 있는 실제 코드를 참고하세요.
이 단계에서는 렌더링을 위해 React 구성요소를 마운트합니다. 이러한 구성 요소는 src/scripts/content/content.ts 및 src/scripts/popup/popup.ts라는 두 가지 다른 스크립트에 마운트됩니다.
팝업 스크립트: src/scripts/popup/popup.ts에 있습니다.
#!/bin/bash
bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"
create_directory () {
if [ ! -d "" ]; then
mkdir
fi
}
create_file () {
if [ ! -e "/" ]; then
touch /
fi
}
create_public_directories () {
for public_path in "${public_paths[@]}";
do
create_directory $public_path
done
}
create_source_directories () {
for source_path in "${source_paths[@]}";
do
create_directory $source_path
done
}
execute () {
echo "creating project struture at "${bash_script_absolute_path}
create_directory $project_name
cd $bash_script_absolute_path"/"$project_name
create_public_directories
create_source_directories
create_file $manifest_file $public_directory_path
echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}
execute
콘텐츠 스크립트: src/scripts/content/content.ts에 있습니다.
{
"manifest_version": 3,
"name": "NoteMe",
"version": "1.0",
"description": "A Chrome extension built with React and TypeScript using Webpack.",
"action": {
"default_popup": "popup.html",
"default_icon": "app-icon.png"
},
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"permissions": [
"storage",
"activeTab",
"scripting",
"webNavigation"
],
"host_permissions": ["<all_urls>"],
"web_accessible_resources": [
{
"resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
"matches": ["<all_urls>"]
}
]
}
확장 프로그램 컴파일 및 빌드에 필요한 구성 추가
확장을 성공적으로 컴파일하고 빌드하려면 다음 파일을 구성해야 합니다.
이러한 구성은 TypeScript 컴파일, Tailwind CSS 통합 및 확장 프로그램의 전체 Webpack 빌드 프로세스를 처리합니다.
다음은 확장 프로그램 테스트 중 캡처된 일부 스크린샷입니다.
다음은 이 블로그에서 얻을 수 있는 몇 가지 주요 내용입니다.
향후에는 Chrome 웹 스토어에 완전한 기능을 갖춘 Chrome 확장 프로그램을 게시하는 과정을 살펴보는 다른 블로그를 작성할 계획입니다. 해당 블로그의 목표는 다음과 같습니다.
시간을 내어 이 블로그를 읽어주셔서 감사합니다! 여러분의 관심과 지지는 저에게 큰 의미가 있습니다. 이 여정을 계속하면서 더 많은 통찰력을 공유하게 되어 기쁩니다.
즐거운 코딩하세요!
github 링크: https://github.com/gauravnadkarni/chrome-extension-starter-app
이 기사는 원래 Medium에 게시되었습니다.
위 내용은 Chrome 확장 프로그램 개발 - TypeScript, React, Tailwind CSS 및 Webpack을 사용하여 최소한의 앱 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
