Vite, Vue 및 Manifest V3를 사용하여 브라우저 확장 개발을 시작하세요

Vite, Vue 3 및 Manifest V3를 사용하여 브라우저 확장 개발을 시작하세요

최신 웹 기술로 브라우저 확장 프로그램 구축을 시작하는 빠르고 효율적인 방법을 찾고 계십니까? Vite 기반 WebExtension 시작 템플릿을 소개합니다! 이 템플릿은 Vue 3, Vite 및 Manifest V3를 결합하여 개발 프로세스를 간소화하도록 설계되어 Chrome, Firefox용 강력하고 효율적인 확장 프로그램을 만들 수 있습니다. , 기타 브라우저.

이 템플릿을 사용하는 이유는 무엇입니까?

처음부터 브라우저 확장 프로그램을 구축하는 것은 어려운 작업이 될 수 있습니다. 특히 Vue 3 및 Vite와 같은 최신 기술을 활용하려는 경우 더욱 그렇습니다. 템플릿에는 필수 기능이 미리 포함되어 있어 환경 설정보다 확장 프로그램 개발에 더 쉽게 집중할 수 있습니다.

주요 특징

• Vue 3 Composition API: Composition API 및 <스크립트 설정>을 통해 Vue 3의 모든 기능을 활용하세요.
• HMR(핫 모듈 교체): 확장 페이지 및 콘텐츠 스크립트에 대한 HMR 지원으로 즉각적인 피드백을 받으세요.
• Tailwind CSS 및 데이지 UI: 데이지 UI 구성 요소로 향상된 Tailwind CSS를 사용하여 손쉽게 확장 프로그램의 스타일을 지정하세요.
• TypeScript: 완전한 TypeScript 지원으로 유형이 안전한 개발 환경을 즐겨보세요.
• 자동화된 빌드 프로세스: GitHub Actions를 사용하여 확장 프로그램을 쉽게 빌드하고 릴리스합니다.
• Webext-Bridge: Webext-Bridge를 사용하여 상황 간 통신을 단순화합니다.

전체 기능 목록

• Vue DevTools 지원: 확장 페이지 및 콘텐츠 스크립트에서 Vue 애플리케이션을 디버깅합니다.
• Vue Router: unplugin-vue-router를 통해 자동 경로 등록이 가능합니다.
• 자동 가져오기 구성 요소: unplugin-vue-comforts 및 unplugin-icons를 사용하여 구성 요소와 아이콘을 자동으로 가져옵니다.
• 사전 구성된 ESLint 및 Prettier: Vue, JavaScript, TypeScript용으로 사전 구성된 ESLint 및 Prettier로 코드 품질을 유지하세요.
• UI 프레임워크: 타이포그래피, 양식 등에 Tailwind CSS 플러그인을 활용하세요.
• 멀티 브라우저 지원: 특정 구성으로 Chrome, Firefox 및 기타 Chromium 기반 브라우저용으로 빌드합니다.

사용 지침

복제 및 시작하기

시작하려면 템플릿을 복제하세요.

pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm i

프로젝트 구조

템플릿은 쉽게 탐색할 수 있도록 구성되어 있습니다.

• src: 주요 소스 디렉터리
• content-script: 콘텐츠 스크립트를 위한 스크립트 및 구성 요소입니다.
• 배경: 배경 스크립트.
• 팝업: Popup Vue.js 애플리케이션
• 옵션: Vue.js 애플리케이션 옵션
• 설정: 설치 및 업데이트 이벤트 페이지입니다.
• 오프스크린: 오디오나 화면 녹화와 같은 고급 기능을 위한 오프스크린 페이지입니다.
• 구성 요소: 공유 Vue 구성 요소.

개발 및 구축

개발 서버를 시작하려면:

pnpm dev

프로덕션용 확장 프로그램을 구축하려면:

pnpm build

브라우저 구성

• manifest.config.ts: 기본 확장 매니페스트.
• vite.config.ts: 기본 Vite 구성.

기여 및 피드백 제공

우리는 이 템플릿을 개선하기 위해 지속적으로 노력하고 있으며 여러분의 피드백은 매우 소중합니다. 잠시 시간을 내어 피드백 양식을 작성하고 어떤 기능을 보고 싶은지 또는 템플릿이 준비되면 구매에 관심이 있는지 알려주세요. 귀하의 응답이 이 프로젝트의 미래를 결정합니다.

최종 생각

이 Vite Vue 3 WebExtension 템플릿은 개발 경험을 원활하고 효율적으로 만들도록 설계되었습니다. 간단한 유틸리티를 구축하든 복잡한 확장을 구축하든 이 템플릿이 모든 것을 다룹니다. 사용해 보시고 의견을 알려주세요!

즐거운 코딩하세요!

위 내용은 Vite, Vue 및 Manifest V3를 사용하여 브라우저 확장 개발을 시작하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!