Chrome Extension 프로젝트 생성, 개발환경 세팅방법

설치

npm install -g chrome-extension-cli

 

프로젝트 생성

chrome-extension-cli <프로젝트명>

👇 프로젝트 생성 완료시 나오는 안내문구

npm run watch
    Listens for files changes and rebuilds automatically.

npm run build
    Bundles the app into static files for Chrome store.

We suggest that you begin by typing:

  1. cd sellha
  2. Run npm run watch
  3. Open chrome://extensions
  4. Check the Developer mode checkbox
  5. Click on the Load unpacked extension button
  6. Select the folder 프로젝트명/build

💡 npm run watch 명령어는 개발 모드에서 앱을 실행합니다. 터미널에서 계속 실행되면서 모든 관련된 파일의 변경사항을 감시합니다. Webpack은 변경사항이 감지되면 자동으로 이를 다시 컴파일 합니다.

💡 npm run build 명령어는 프로덕션용 앱을 빌드 폴더에 빌드합니다. 빌드 폴더를 압축하면 앱이 Chrome 웹 스토어에 게시될 준비가 됩니다.

 

개발환경 세팅

 

1. npm run watch
   
   
   
2. 크롬 확장프로그램 페이지로 진입
   
   
    
3. 우측 상단 개발자 모드 ON
   
   
   
   
   
   
4. '압축해제된 확장 프로그램을 로드합니다.' 클릭
   
   
   
   
   
   
5. 'build' 폴더 클릭
   
   
   
   
6. 짠 하고 생김