[Chrome Extension 개발] 선대 개발자들이 이룩한 React를 도입해보자(Parcel과 함께!)

 

오늘 작업한양

Chrome Extension을 개발하려면 크게 

1. background 관련 파일

2. popup 관련 파일

3. content 관련 파일

4. option 관련 파일이 필요하다

 

background 관련 파일을 제외하고는 다 UI를 개발하는 일반 웹개발과 동일했다. 그런데 popup, option 은 popup.html, option.html 로 엔트리 포인트를 잡을 수 있는데, content관련의 경우  content.js 같이 js로 진입을 해야해가지고 document.createElement로 한땀한땀 태그를 생성했는데, 사람이 할짓이 아닌것 같아...(선대 개발자들을 존경한다...ㅜㅠ) 문명의 산실인 React를 적용하고, Bundling은 Parcel로 했다. 

 

 

내 파일 목록(아직 지울 것도 좀 있는...)

{
  "name": "1week-chrome-extension",
  "version": "1.0.0",
  "description": "- [Getting started](https://developer.chrome.com/docs/extensions/mv2/getstarted/) - [developer chrome](https://developer.chrome.com/) - [API reference](https://developer.chrome.com/docs/extensions/reference/#popups)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "copy": "cp -R public/ dist",
    "bg": "parcel src/background.js",
    "content": "parcel src/content.js",
    "popup": "parcel src/popup.html",
    "options": "parcel src/options.html",
    "develop": "npm-run-all --parallel copy bg content popup options",
    "build:bg": "parcel build src/background.js",
    "build:content": "parcel build src/content.js",
    "build:popup": "parcel build src/popup.html",
    "build:options": "parcel build src/options.html",
    "build": "npm-run-all --parallel copy build:bg build:content build:popup build:options"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hayoung0Lee/toy-chrome-extension.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/hayoung0Lee/toy-chrome-extension/issues"
  },
  "homepage": "https://github.com/hayoung0Lee/toy-chrome-extension#readme",
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

 

이건 package.json 파일인데, parcel과 여러 entry point를 동시에 build하기 위해 npm-run-all 을 사용했다. 

 

기존에 react를 적용안해서 생고생 했던 코드

React 적용 후

 

위처럼 React를 통해서 element를 생성했더니 훨씬 편하고 UI 잡기도 좋았다. 원래 만들었던것보다 많이 후퇴했지만, 이제 개발할때 속도는 더 빨라질 것 같다. 

 

 

- 내 리포: github.com/hayoung0Lee/toy-chrome-extension/tree/bookmark-extension

hayoung0Lee/toy-chrome-extension

- 참고자료: [Creating a Chrome Extension with React]