-
[Chrome Extension 개발] 선대 개발자들이 이룩한 React를 도입해보자(Parcel과 함께!)Web Dev/5. Projects 2021. 2. 18. 23:40728x90
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를 통해서 element를 생성했더니 훨씬 편하고 UI 잡기도 좋았다. 원래 만들었던것보다 많이 후퇴했지만, 이제 개발할때 속도는 더 빨라질 것 같다.
- 내 리포: github.com/hayoung0Lee/toy-chrome-extension/tree/bookmark-extension
- 참고자료: [Creating a Chrome Extension with React]
'Web Dev > 5. Projects' 카테고리의 다른 글