Vite TS로 브라우저 확장 프로그램 만들기

매니페스트 파일과 서비스 워커만 포함하는 가장 기본적인 확장 구조 설정에 중점을 두고 이 연습을 시작하겠습니다. 매니페스트는 확장이 수행할 수 있는 작업을 지정하는 구성 파일 역할을 하며, 서비스 작업자는 주로 브라우저 이벤트에 응답하는 백그라운드 작업을 처리합니다. 이 경우 확장이 설치되면 기록됩니다.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

Background.js

서비스 워커는 필요에 따라 복잡할 수 있지만 이 작업의 목표는 이 간단한 두 파일 확장자를 Vite 프로젝트로 변환하는 것이므로 지금은 간단하게 유지하겠습니다.

그럼 Vite를 사용하는 이유는 무엇인가요? 주로 코드 품질, 유지 관리성 및 생산성을 크게 향상시킬 TypeScript를 사용하기로 결정했기 때문입니다. 자체 문서 제공 외에도 TypeScript를 사용하면 런타임이 아닌 컴파일 타임에 유형 관련 오류를 포착할 수 있어 전반적인 개발 경험이 향상됩니다.

비테

TypeScript를 사용하는 Node 프로젝트는 내 TS 코드를 내 확장 프로그램에 필요한 바닐라 JavaScript로 컴파일하는 데 충분하지만 Vite를 선택했습니다. Vite는 특히 Rollup Bundler를 사용하여 트리 쉐이킹 및 번들 축소와 같은 광범위한 기능을 제공합니다. 또한 Vite의 강력한 플러그인 생태계를 통해 향후 확장을 위한 UI 구성 요소를 만들기로 결정한 경우 React를 쉽게 통합할 수 있습니다.

이를 염두에 두고 Vanilla-ts 템플릿을 사용하여 Vite 프로젝트를 생성하는 것부터 시작해 보겠습니다.

npm create vite@latest simple-extension -- --template vanilla-ts

명령을 실행하고 종속성을 설치하면 TypeScript를 사용하여 작은 웹 프로젝트가 설정됩니다. 그러나 이 설정은 우리에게 필요한 설정이 아니므로 정리부터 시작하겠습니다. 더 이상 필요하지 않으므로 먼저 루트 폴더에서 index.html 파일을 삭제하세요. 그런 다음 Vite 관련 기능에 대한 유형 정의를 제공하는 vite-env.d.ts를 제외하고 src 폴더에서 모든 파일을 제거합니다. 마지막으로 공용 폴더의 모든 내용을 삭제하세요.

⚠️ tsconfig 파일에서 알 수 없는 컴파일러 옵션에 대한 오류가 발생하는 경우 편집기가 프로젝트에 설치된 것과 동일한 TypeScript 버전을 사용하고 있는지 확인하세요.

다음으로, src 폴더에 background.ts라는 새 파일을 만들고 원본 background.js 파일의 코드를 복사하세요.

TypeScript는 적절한 유형이 없으면 크롬 개체를 인식하지 못하기 때문에 제대로 작동하려면 추가 컨텍스트가 필요하다는 것을 곧 알게 될 것입니다. 이 문제를 해결하려면 @types/chrome을 설치하여 Chrome에 필요한 유형 정의를 제공하세요.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

설치하고 나면 TypeScript 오류가 사라집니다. 그러나 onInstalled 콜백에서 경고 메시지가 나타날 수 있습니다. 이는 Vite가 TypeScript 설정에서 구성한 Linting 속성 때문입니다.

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

사용되지 않는 개체를 정의하고 있으므로 계속해서 제거해 보겠습니다. 이것이 우리에게 필요한 전부이므로 이제 프로젝트를 컴파일할 수 있습니다.

npm create vite@latest simple-extension -- --template vanilla-ts

문제가 있는 것 같습니다. 기본 Vite 구성이 여전히 방금 제거한 일부 파일을 코드 진입점으로 사용하려고 시도하고 있습니다.

npm i -D @types/chrome

라이브러리 모드에서 실행하려면 Vite 구성을 사용자 정의해야 합니다. 이 프로젝트에 필요한 최소한의 구성은 다음과 같습니다.

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

위 구성에서는 프로젝트의 입력을 ./src/Background.ts로 설정하고 출력 파일 이름을 [name].js로 조정했습니다. 기본적으로 Vite는 프로덕션 빌드의 파일 이름에 해시를 추가하지만(예: background-[hash].js), 매니페스트.json이 올바르게 작동하려면 정확한 파일 이름 일치가 필요합니다.

manifest.json 하면 어디에 위치해야 할까요? 이 부분은 간단합니다. 변환 없이 출력 폴더에 있는 그대로 복사해야 하는 모든 파일은 공용 폴더에 배치되어야 합니다. 이제 프로젝트를 다시 빌드하면 dist 폴더에 컴파일된 두 파일 브라우저 확장을 찾을 수 있습니다.

npm run build

설치

이제 모든 것이 예상대로 작동하는지 확인해 보겠습니다. 이전에 브라우저 확장 프로그램을 로컬에서 테스트해 본 적이 없다면 다음의 간단한 단계를 따르십시오.

1. 새 탭에 chrome://extensions를 입력하여 확장 프로그램 페이지를 엽니다.
2. 개발자 모드 스위치를 전환하여 개발자 모드를 활성화하세요.
3. 압축해제된 항목 로드를 클릭하고 Vite에서 생성한 dist 폴더인 확장 디렉터리를 선택합니다. 그리고 그게 다야! 이제 확장이 설치되었습니다. 서비스 워커 링크를 클릭하면 이 서비스 워커에 대한 DevTools가 열리며 여기서 우리 워커가 생성한 로그를 볼 수 있습니다.

간단한 vite 확장

위 내용은 Vite TS로 브라우저 확장 프로그램 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!