ChromeExtension

익스텐션을 개발하면서 새롭게 빌드하고 다시 로드하는 작업을 반복적으로 하다보니 HMR 도입이 필요하다는 생각을 하게 되었습니다. 하지만 콘텐츠 스크립트에서 HMR을 적용하는 과정에서 많은 문제들이 있었고 그 경험들을 공유하려고 합니다. 우선 익스텐션에서 HMR의 과정을 알아보기 전에 HMR의 등장 배경과 일반적인 HMR이 어떻게 동작을 하는 지 에 대해서 알아보려고 합니다. 1. HMR 등장 배경HMR은 맨 처음부터 있던 기술은 아니였습니다. HMR이전에 Live Reload라는 초기 기술이 있었습니다. 발전 과정을 보면서 간단하게 이전 개발자들이 어떤 불편함이 있었고 어떻게 해결을 했는 지 알아보도록 하죠!1.1. Live Reload란?Live Reload는 개발 중 코드 변경 사항을 빠르게 반영하기..

크롬 익스텐션을 개발하게 된 계기는 Nteracy 서비스의 핵심 기능을 유튜브에서 바로 사용할 수 있도록 하여 외부 사이트로 이동해야 하는 불편함을 없애고 사용자 경험을 개선시키기 위함이였습니다. 이를 위해 content_script를 활용했으며 개발과정에서 겪었던 경험을 공유을 공유하고자 합니다. content_script는 크롬 익스텐션이 웹 페이지의 DOM에 접근하여 콘텐츠를 수정하거나 추가적인 기능을 제공할 수 있도록 하는 스크립트입니다. 이를 통해 특정 사이트에서만 실행되도록 설정할 수도 있으며, 페이지의 컨텍스트에서 코드가 동작하도록 만들 수 있습니다.공식 문서에 따르면, content_script는 웹 페이지의 JavaScript 환경과 별도의 실행 환경에서 동작하지만, DOM을 직접 조작할..

저번 글에서는 익스텐션에서 필수적인 manifest에 대해서 설명을 하였는데 이제 익스텐션 개발을 위해서 웹팩을 설정해보고 팝업을 만드는 작업을 진행했던 과정에 대해서 설명하려고 합니다. 1. package.json 다운로드 필요한 모듈을 설치하기 위해서 package.json파일 생성을 해야됩니다. npm init -y 2. 초기 설정에 필요한 모듈 다운로드 일단 웹팩을 사용하기 위해서 핵심적인 역할을 하는 webpack와 webpack을 더 쉽게 사용할 수 있도록 다양한 명령을 제공 받기 위해서 webpack-cli까지 설치를 진행하였습니다. 이외에도 html-webpack-plugin, copy-webpack-plugin이 필요하긴 한데 아래부분에서 설명하구 넘어가도록하겠습니다. npm i --sa..

1. 크롬 익스텐션으로 개발을 진행한 이유는? 기획단계에서 어떻게 하면 사용자들이 서비스를 편리하게 사용할 수 있을 지 팀원들과 고민하다가 일반적인 SPA를 활용한 웹 어플리케이션 방식보단, 익스텐션이 더 적합하다고 생각하였기 때문에 선택하게 되었다. 또한 높은 접근성을 위해서 크롬 익스텐션 중에서 일반적으로 팝업창을 띄워서 하는 방식이 아닌 익스텐션 다운로드 후 ContentScript에서 유튜브의 실제 DOM에 리액트 컴포넌트를 삽입하여 사용자들이 익스텐션을 사용하고 있다는 것을 느끼지 못하도록 구현하기로 결정하였다. 2. 리액트는 버릴 수 없어 우리가 SPA 웹 어플리케이션 만들려고 할 땐 리액트 개발 환경을 편리하게 세팅하기 위해서 두개의 명령어를 입력하는편이다. npx create-react-a..