[크롬 익스텐션] React로 크롬 익스텐션 만들기

최근에 회사에서 React를 사용하고 있는데, 여러모로 매력적이어서 개인적으로 더 공부하고 싶은 마음이 있었음. ㅎㅎ 

팀을 옮기면서 웹은 처음 해봤는데... 그동안 프론트엔드 프로그래밍에 대해 갖고있던 편견이 많이 깨졌다.

마침 쇼핑몰을 운영하는 친구가 필요로 할 것 같은 프로그램 아이디어가 하나 생겨서 개인 프로젝트로 진행하려고 한다.

 

브라우저 내의 특정 이미지 태그를 찾아서 소스를 잠시 바꿔치기 해보는 프로그램이라 크롬 익스텐션으로 구현하기로 정했고, 학습욕(?) 충족을 위해 일반 자바스크립트 말고 React를 사용해보기로 결정했다.

 

크롬 익스텐션에서 React를 사용할 수 있도록 기본 틀을 제공하는 깃이 몇 개 있었는데, create-react-app으로만 리액트 환경을 구축해봐서 한번쯤 처음부터 삽질할만도 할것 같아서 ㅎㅎ 기존의 깃을 참고해서 스스로 뼈대를 만들어보게 되었다~~

 

1. 크롬익스텐션 만들기

https://developer.chrome.com/extensions/getstarted

Getting Started Tutorial - Google Chrome

크롬 익스텐션의 기본 구조는 다음과 같다.
-manifest.json : 확장프로그램에서 사용하는 스크립트, 리소스(아이콘, 이미지) 및 권한에 대한 모든 참조에 대한 명세 

-background.js :  확장프로그램이 올라가고 내려갈때 호출할 non-persistent 한 스크립트 ( check about the persistency of a backgrount script in here : https://developer.chrome.com/extensions/background_pages )

-popup.js / html : 우측 상단의 확장프로그램 아이콘을 누르면 보이는 팝업창 소스

-options.js / html : 확장프로그램 관리 페이지에서 설정을 누르면 보이는 페이지 소스

 

위에 링크해둔 튜토리얼을 천천히 따라 만들면 됨 ㅎㅎ

2. 크롬익스텐션에 리액트 심기

위의 기본구조에서 UI소스는 popup.js/html과 options.js/html 두 개라서, 모든 소스를 말아 index.js/html 한개로 떨궈주는 기본 creat-react-app 웹팩 설정을 수정할 필요가 있었다 ㅎㅎ

https://dev.to/vish448/create-react-project-without-create-react-app-3goh

Create React Project without create-react-app

create-react-app 명령어가 무슨일을 하는지 정리해둔 포스트를 보고 내가 원하는대로 커스터마이징 해보기로 했다.

mkdir image-switcher
cd image-switcher
npm init -y //create package.json
npm install react react-dom typescript node-sass // add fundamental dependency to package.json
vim .gitignore // git에 올리지 않을 파일 목록을 명세(node_modules, dist 등)
mkdir popup // popup용 리액트 리소스가 들어갈 폴더 생성
mkdir options // option 페이지용 리액트 리소스가 들어갈 폴더 생성
npm install @babel/core @babel/preset-env @babel/preset-react 
npm install webpack webpack-cli webpack-dev-server 
npm install babel-loader sass-loader html-webpack-plugin 
npm install ts-loader

 

//package.json
...
"babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
"scripts": {
    "start": "webpack-dev-server --open"
  },
...

 

tsconfig.json 생성 및 수정

https://webpack.js.org/guides/typescript/

TypeScript | webpack

webpack.config.js 생성 및 수정

 

 

** webpack.config.js에서 multiple entry를 명세하는 방법은 아래의 게시글을 참고했다.

https://stackoverflow.com/questions/44156492/multiple-modules-for-multiple-entry-points-in-webpack-config-for-reactjs-app

Multiple modules for multiple entry points in webpack config for reactjs app