다음으로 시작하는 유용한 팁. JS Chrome 확장

이 기사는 팝업에 대한 React를 활용하고 효율적인 코드 조직을 달성하는 데 중점을 둔 Next.js를 사용하여 크롬 확장을 만드는 과정에 대해 자세히 설명합니다. 저자는 Twitter 테마 프로젝트를 Next.js Extension으로 재 작성하는 경험을 공유하여 React App 만들기와 같은 대안보다 Next.js의 구조의 장점을 강조합니다.

인용 된 주요 이점은 보일러 플레이트를 최소화하여 개선 된 코드 조직입니다. STATIC HTML EXPORT, JavaScript Preloading 및 Routing과 같은 Next.JS 기능은 유리하지만 주요 동기는 더 깨끗한 코드였습니다.

저자는 실제 폴더 구조를 간략하게 설명합니다.

 <code>? extension ? manifest.json ? next-app ? pages ? public ? styles ? package.json README.md</code>

중요한 측면은 맞춤형 빌드 스크립트입니다. 표준 next export 크롬 확장 세부 사항을 처리하기 위해 수정이 필요합니다. 스크립트는 다음.js 앱을 Extension Directory로 내보내고 파일을 바꾸고 (선행 밑줄 제거) public 폴더의 자산을 관리합니다. 자산 취급을 포함한 최종적이고 포괄적 인 빌드 스크립트가 제공됩니다.

manifest.json 파일은 action Keyword (Manifest v3)를 사용하여 Next.js에 의해 생성 된 팝업 HTML 파일을 지정하도록 구성되어 있습니다.

 {
  "이름": "다음 크롬",
  "설명": "Next.js Chrome Extension Starter",
  "버전": "0.0.1",
  "Manifest_version": 3,
  "행동": {
    "default_title": "next.js 앱",
    "default_popup": "index.html"
  }
}

중요한 제한 사항이 언급됩니다. Server-Side Next.js 기능 (예 : next/image )은 Chrome 확장과 호환되지 않습니다.

최종 단계에는 npm run build (또는 yarn build )를 사용하여 확장을 구축하고, 크롬에서 포장되지 않은 확장을로드하고 ( chrome://extensions ) 개발자 모드를 활성화하는 것입니다.

결론적으로,이 기사는 Chrome Extensions를 구축하기위한 Next.js의 강점을 활용하려는 개발자에게 실용적인 가이드를 제공하여 간소화 된 개발 프로세스와 개선 된 코드 조직을 제공합니다. 맞춤형 빌드 프로세스의 중요성을 강조하고 피할 잠재적 인 함정을 강조합니다.

위 내용은 다음으로 시작하는 유용한 팁. JS Chrome 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!