chrome-extension-cli 소개

chrome extension을 개발할 때 npm 모듈을 가져다가 쓸 일이 있다. 직접 webpack을 세팅해서 사용하면 되지만 쉽지만은 않다. 그래서 npm 모듈을 좀 더 쉽게 사용할 수 있는 chrome-extension-cli가 있어서 정리한다.

설치

우선 chrome-extension-cli를 설치한다.

npm install -g chrome-extension-cli

프로젝트 생성

아래 방법대로 샘플 프로젝트를 생성한다.

예) chrome extension-cli

chrome-extension-cli sample-project

생성이 완료되면 아래와 같은 메시지가 표시된다.

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

  npm run format
    Formats all the files.

We suggest that you begin by typing:

  1. cd sample-project
  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 sample-project/build

명령어

• npm run watch
  • 개발모드로 앱을 실행한다.
• npm run build
  • build 폴더로 앱을 빌드한다.
• npm run pack
  • build 폴더를 zip 파일로 묶는다.
• npm run repack
  • zip 파일로 다시 묶는다.
  • npm run build && npm run pack과 동일
• npm run format
  • html, css, javascript, typescript, json 파일을 포맷팅한다.

실행

my-project를 확장 프로그램에 등록하고 실행해보자.

1. chrome://extensions를 실행하고 my-project/build 폴더를 추가
2. npm run watch 실행

extension 아이콘을 클릭하면 아래 화면이 나온다.

background에 npm 모듈 추가

간단한 npm 모듈을 하나 추가해보고 잘 동작하는지 확인해보자.

추가할 npm 모듈은Is-thirteen이며 숫자가 13인지 여부를 리턴하는 모듈이다.

일단 설치해보자.

npm install is-thirteen

그리고 background.js에서 is-thirteen을 import해서 사용해보자.

import isThirteen from 'is-thirteen';

const response = isThirteen(13);
console.log(response.thirteen());

이렇게 하고 extension을 새로고침하면 결과가 true로 표시(서비스 워크 로그에 표시)되는 것을 확인할 수 있다.

이런 방식으로 chrome-extension-cli를 사용하면 npm 모듈을 import하여 사용할 수 있다.

참고

https://github.com/dutiyesh/chrome-extension-cli