Chrome 확장 프로그램 개발 - TypeScript, React, Tailwind CSS 및 Webpack을 사용하여 최소한의 앱 개발

소개

이 블로그에서는 TypeScript, React, Tailwind CSS 및 Webpack을 사용하여 Chrome 확장 프로그램을 설정하고 개발하는 방법을 살펴보겠습니다. 우리의 이해도를 테스트하기 위해 "NoteMe"✍️라는 최소한의 확장 프로그램을 만들겠습니다. 우리의 확장에는 다음 기능이 포함됩니다:

• 사용자가 특정 웹사이트에 여러 메모를 추가하도록 허용
• 사용자가 특정 웹사이트에 대해 저장된 노트를 볼 수 있도록 설정
• 특정 웹사이트에 대한 메모 삭제 옵션 제공
• 브라우저 저장소에 로컬로 메모를 저장하세요
• 선택적으로 클라우드 저장소용 백엔드와 메모 동기화

보충 교육

이 블로그에서는 최신 기술을 사용하여 Chrome 확장 프로그램을 구축하는 방법을 알아봅니다. 이 가이드에서는 사용자가 로컬 개발 중에 Chrome 확장 프로그램을 빌드하고 업로드하는 데 이미 어느 정도 익숙하다고 가정합니다. 이 내용이 처음이거나 기본 사항에 대한 자세한 설명이 필요한 경우 이전 블로그를 확인하는 것이 좋습니다. 링크

확장 프로그램 미리보기

확장에는 다음 구성 요소가 포함됩니다.

• 토글 버튼: 사이드바를 열고 닫는 버튼입니다.
• 사이드바: 사용자가 다음을 수행할 수 있는 다목적 패널입니다. 새로운 메모를 작성하세요. 저장된 메모를 봅니다. 저장된 메모를 삭제하세요. 백엔드와 노트를 동기화합니다(현재 백엔드가 연결되어 있지 않지만 코드에서 제공 가능).
• 팝업: 사용자가 토글 버튼(사이드바를 열고 닫는 데 사용)의 위치를 ​​화면의 미리 지정된 위치로 변경할 수 있는 작은 창입니다. 참고: 이 구현에는 백엔드 통합이 없지만 코드에는 향후 백엔드를 연결하기 위한 조항이 포함되어 있습니다.

다음은 확장 프로그램이 완료되면 어떻게 보일지 보여주는 스크린샷입니다.

전제 조건

이 튜토리얼을 시작하기 전에 시스템에 다음 도구가 설치되어 있는지 확인하세요.

• Node.js(v18.16 LTS 이상)
• NPM(Node Package Manager, Node.js와 함께 번들로 제공)
• 타입스크립트
• 웹팩
• VS 코드 편집기(또는 원하는 코드 편집기)

40,000피트에서 확장

위 그림은 이 확장 프로그램의 내부 작동에 대한 높은 수준의 개요를 제공합니다. 다음은 다이어그램에서 파생할 수 있는 몇 가지 핵심 사항입니다.

• 콘텐츠 스크립트는 상위 웹페이지의 DOM과 직접 상호작용하여 페이지 콘텐츠를 수정할 수 있습니다.
• 팝업, 배경, 콘텐츠 스크립트는 Chrome의 런타임 메시징 시스템을 통해 서로 통신합니다.
• Chrome 스토리지 또는 백엔드 API 호출과 관련된 작업의 경우 콘텐츠 또는 팝업 스크립트는 런타임 메시징 시스템을 사용하여 백엔드 작업자에게 책임을 위임합니다.
• 백그라운드 스크립트는 앱 백엔드와 Chrome 저장소의 유일한 중재자 역할을 합니다. 또한 런타임 메시징을 사용하여 알림이 있는 경우 다른 스크립트에 이를 전달합니다.
• 팝업 및 콘텐츠 스크립트는 Chrome의 런타임 메시징 시스템을 통해 직접 정보를 교환합니다.

확장 프로그램 설정

Chrome 확장 프로젝트는 특정 프로젝트 구조를 요구하지 않지만, 빌드 디렉터리의 루트에 있는 매니페스트.json 파일이 필요합니다. 이러한 유연성을 활용하여 다양한 스크립트를 효과적으로 구성하는 데 도움이 되는 사용자 정의 프로젝트 구조를 정의하겠습니다. 이 구조를 통해 스크립트 전체에서 코드를 더 효과적으로 재사용하고 중복을 최소화하여 개발 프로세스를 간소화할 수 있습니다.

1단계: 프로젝트의 기본 디렉터리 구조 만들기

시작하려면 프로젝트의 기본 디렉터리 구조를 설정해야 합니다. 다음 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

디렉토리 구조가 아래 스크린샷에 표시된 것과 유사한지 확인하세요.

2단계: 공용 디렉터리에 있는 매니페스트.json 파일은 아래와 같이 구성되어야 합니다.

{
    "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>"]
      }
    ]
  }

주의사항:

• 파일 확장자는 .js입니다. .ts 파일은 Chrome 환경에서 런타임 시 필요한 .js 파일로 컴파일되기 때문입니다.
• 일치 필드는 그 값으로 확장 프로그램이 Chrome에 로드된 모든 웹페이지에서 작동할 수 있도록 합니다.
• app-icon.png, sidebar-open.png 및 sidebar-close.png의 세 가지 이미지 파일이 참조됩니다. 이 블로그 끝에 링크된 저장소에서 이러한 파일을 찾을 수 있습니다.
• manifest.json 파일은 프로젝트가 빌드된 후 dist 디렉터리의 루트 수준에 배치되어야 합니다. 이를 보장하려면 빌드 프로세스 중에 웹팩 설정을 적절하게 이동하도록 구성해야 합니다.

3단계: npm 초기화 및 종속성 설치

• 다음 명령을 사용하여 프로젝트에서 npm을 초기화하는 것부터 시작하세요: npm init -y
• 필요한 개발 종속성을 프로젝트의 devDependency 섹션에 추가하세요. 다음 명령을 실행하십시오. npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack 웹팩-cli 웹팩-개발-서버
• 프로젝트 실행에 필요한 런타임 종속성을 추가합니다. npm i --save 반응 반응 돔

4단계: Manifest.json에서 참조되는 파일 만들기

manifest.json에서 참조되는 backgroun.ts, content.ts 및 popup.html 파일을 생성합니다.

• background.ts: src/scripts/Background 디렉터리에 이 파일을 생성하세요
• content.ts: src/scripts/content 디렉터리에 이 파일을 생성합니다
• popup.html 공개 디렉토리에 이 파일을 생성하세요

5단계: 팝업 및 배경 코드 업데이트

공개 디렉토리의 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

참고:

위의 코드는 두 개의 리스너를 설치합니다.

1. chrome.runtime.onInstalled.addListener에 등록된 함수는 브라우저에 확장 프로그램이 설치될 때마다 실행됩니다. 이는 사전 정의된 상태로 Chrome 저장소 또는 백엔드(해당하는 경우)를 초기화하는 데 사용할 수 있습니다.
2. chrome.runtime.onMessage.addListener에 등록된 함수는 백그라운드 스크립트가 콘텐츠나 팝업 스크립트로부터 메시지를 받을 때마다 실행됩니다.

또한 import 문은 src/lib 디렉터리에서 리스너를 가져옵니다. 핵심 앱 로직은 src/lib에 내장되어 있어 다양한 컨텍스트(예: 콘텐츠 및 배경 스크립트)에서 재사용이 가능합니다.

6단계: src/lib 디렉토리 둘러보기

src/lib 디렉토리에는 확장 프로그램의 핵심 로직이 들어 있습니다. 다음은 구조와 주요 구성 요소에 대한 개요입니다.

• 구성 요소 디렉토리: 확장에 사용되는 모든 React 구성 요소가 포함되어 있습니다.
• lib/comComponents/ContentApp.tsx: 콘텐츠 스크립트의 컨테이너 구성 요소 역할을 합니다.
• lib/comComponents/NoteMePosition.tsx: 팝업 스크립트를 담당하는 구성 요소가 포함되어 있습니다.
• helpers.ts: 확장 프로그램 전반에 걸쳐 사용되는 도우미 기능이 포함되어 있습니다.
• storage-model.ts: Chrome의 로컬 저장소와의 상호작용을 관리합니다. 저장되는 데이터의 구조에 대한 자세한 내용은 type.ts와 함께 이 파일을 참고하세요.
• types.ts: 확장에 사용되는 사용자 정의 유형을 정의합니다.
• worker.ts: 백그라운드 이벤트 리스너에 대한 콜백이 포함되어 있습니다.

자세한 구현은 저장소에 있는 실제 코드를 참고하세요.

7단계: React 컴포넌트 마운트

이 단계에서는 렌더링을 위해 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>"]
      }
    ]
  }

핵심 포인트:

• 별도의 마운트 스크립트:   팝업 스크립트와 콘텐츠 스크립트는 서로 다른 컨텍스트에서 작동합니다.  
• 팝업 스크립트: 로드된 popup.html 웹페이지의 컨텍스트 내에서 실행됩니다.  
• 콘텐츠 스크립트: 브라우저에 로드된 기본 웹페이지의 컨텍스트 내에서 실행됩니다.
• 콘텐츠 스크립트용 Shadow DOM:  
  • 콘텐츠 스크립트에 의해 삽입된 스타일은 잠재적으로 상위 웹페이지의 모양에 영향을 미칠 수 있습니다.  
  • 이를 방지하기 위해 Shadow DOM을 사용하여 스타일을 캡슐화하여 확장 프로그램 내에서 격리된 상태를 유지하도록 합니다.  
  • 팝업 스크립트는 자체 격리된 환경(popup.html)에서 작동하므로 이는 필요하지 않습니다.

8단계: 컴파일 및 빌드를 위한 구성

확장 프로그램 컴파일 및 빌드에 필요한 구성 추가

확장을 성공적으로 컴파일하고 빌드하려면 다음 파일을 구성해야 합니다.

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

핵심 포인트:

• 기본 설정:  가능한 경우 프로세스를 단순화하고 기본 목표인 완전한 기능을 갖춘 확장 프로그램 구축에 계속 집중할 수 있도록 기본 설정이 제공됩니다.
• 저장소 세부 정보: 이러한 파일의 전체 구성 및 세부 설정은 코드 저장소를 참조하세요.

이러한 구성은 TypeScript 컴파일, Tailwind CSS 통합 및 확장 프로그램의 전체 Webpack 빌드 프로세스를 처리합니다.

확장 테스트

1. dist 디렉터리 생성: 다음 명령을 실행하여 dist 디렉터리를 만듭니다.  npm run build
2. Chrome에 업로드:    
   • Chrome을 열고 chrome://extensions/로 이동합니다.    
   • 오른쪽 상단에서 개발자 모드를 활성화하세요.    
   • Load Unpacked를 클릭하고 dist 디렉토리를 선택하세요.
3. 설치 확인:
   • 로드되면 기본적으로 확장 프로그램 아이콘이 각 페이지 오른쪽 하단에 표시됩니다.
4. 기능 확인:
   • 위치 제어: 팝업의 컨트롤을 사용하여 아이콘 위치를 변경하세요.
   • 메모 기능: 노트는 각 웹사이트마다 독립적으로 저장되며 다른 사이트에 영향을 주지 않고 특정 사이트에 대해 삭제할 수 있습니다.
5. 백엔드 시뮬레이션:
   • 현재 연결된 백엔드가 없지만 코드에는 백엔드와 통합할 수 있는 조항이 포함되어 있습니다.
   • 현재 구현은 setTimeout을 사용하여 백엔드 연결을 모방하고 비동기 상호 작용을 시뮬레이션합니다.

다음은 확장 프로그램 테스트 중 캡처된 일부 스크린샷입니다.

주요 시사점

다음은 이 블로그에서 얻을 수 있는 몇 가지 주요 내용입니다.

• 콘텐츠 스크립트, 팝업 스크립트, 백그라운드 작업자 등 Chrome 환경의 다양한 구성요소가 Chrome의 런타임 메시징 시스템을 사용하여 어떻게 서로 통신하는지 살펴보았습니다.
• 프로젝트 구조 설정, 종속성 설치, 핵심 기능 작성 등 Chrome 확장 프로그램을 처음부터 구성하고 빌드하는 방법을 배웠습니다.
• 우리는 다음과 같은 몇 가지 모범 사례를 발견했습니다.
  • 유지 관리 및 확장성을 위해 스크립트 전체에서 코드 재사용성을 향상합니다.
  • 콘텐츠 스크립트에서 Shadow DOM을 활용하여 상위 웹페이지와의 스타일 충돌을 방지합니다.

미리 살펴보기

향후에는 Chrome 웹 스토어에 완전한 기능을 갖춘 Chrome 확장 프로그램을 게시하는 과정을 살펴보는 다른 블로그를 작성할 계획입니다. 해당 블로그의 목표는 다음과 같습니다.

• 실제 문제를 해결할 수 있을 만큼 복잡한 확장 기능을 개발하세요.
• Chrome 웹 스토어에 확장 프로그램을 게시하는 단계별 프로세스를 보여줍니다.

시간을 내어 이 블로그를 읽어주셔서 감사합니다! 여러분의 관심과 지지는 저에게 큰 의미가 있습니다. 이 여정을 계속하면서 더 많은 통찰력을 공유하게 되어 기쁩니다.

즐거운 코딩하세요!

github 링크: https://github.com/gauravnadkarni/chrome-extension-starter-app

이 기사는 원래 Medium에 게시되었습니다.

위 내용은 Chrome 확장 프로그램 개발 - TypeScript, React, Tailwind CSS 및 Webpack을 사용하여 최소한의 앱 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!