크롬 확장앱은 순수 자바스크립트(Vanilla JS)로 개발할 수 있지만, 구조가 복잡한 앱의 경우
프론트엔드 라이브러리를 사용하는 것이 좋은 방안이 될 수 있습니다.
그래서 크롬 확장앱을 개발할 때 리액트 환경을 구축하는 방법을 알아보도록 하겠습니다.
아래와 같은 코드들을 입력해줍니다.
yarn create react-app "project-name" // 리액트 프로젝트 생성하기
cd "project-name" // 해당 디랙토리로 이동하기
yarn start // 프로젝트 시작
yarn start 명령어를 입력하면 자동으로 테스트용 웹 서버가 시작되고, 브라우저에서 해당 화면이 출력됩니다.
위 화면을 크롬 확장앱에서 보여줄 수 있도록 작업하겠습니다.
yarn build // 배포할 수 있도록 빌드하기
cd build
먼저 개발한 환경을 위 코드로 빌드합니다. 최종적으로 크롬에서 확장앱을 설치할 때에는
"build" 폴더를 선택하게 됩니다. 그리고 build 폴더 안에 "manifest.json" 파일을 수정해야 합니다.
먼저 입력되어 있는 내용들은 리액트를 위한 정보로서 크롬 확장앱에 맞게 바꿔줍니다.
https://developer.chrome.com/extensions/manifest
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
// Recommended
"description": "A plain text description",
"browser_action": {
"default_icon": {
"32": "logo192.png"
},
"default_title": "React Test",
"default_popup": "index.html"
}
}manifest.json 내용
다음으로 크롬 브라우저에 해당 URL을 입력해줍니다.
chrome://extensions/
1. 먼저 개발자 모드를 활성화 하고,
2. 압축해제된 확장 프로그램을 로드하면 됩니다. ( 위에서 만든 build 폴더를 선택하면 됩니다. )
오른쪽 상단에 확장앱이 만들어졌지만, 아직은 실행 가능한 상태가 아닙니다.
"오류" 버튼을 클릭해서 해당 내용을 살펴봅니다.
리액트의 경우 인라인 스크립트를 사용하기 때문에, manifest.json 에서 자바스크립트 실행 권한을
설정해야 합니다.
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
// Recommended
"description": "A plain text description",
"browser_action": {
"default_icon": {
"32": "logo192.png"
},
"default_title": "React Test",
"default_popup": "index.html"
},
// 'sha256' 값은 오류 코드 보고 맞게 수정할것.
"content_security_policy": "script-src 'self' 'sha256-YNIS...생략'; object-src 'self'"
}
manifest.json 맨 아래에 아래 내용을 추가해줍니다.
중간에 'self' 키워드 다음 해쉬 값은 사용자마다 다르기 때문에 오류 코드를 보시고 맞게 수정하시면 됩니다.
그 다음 확장 프로그램 설정창에 가서 새로고침을 누르고, 확장앱을 클릭해봅니다.
정상적으로 확장앱을 리액트로 빌드한 것을 볼 수 있습니다.