AI로 크롬 익스텐션을 개발하기 위한 개발 환경 설정

소개

15기 크롬 익스텐션 스터디를 시작하면서
처음 코딩을 시작하는 분들도 쉽게 크롬 익스텐션 개발 환경을 설정할 수 있도록 하기 위해서 작성하였습니다.

진행 방법

1. 필수 준비 사항

   1. Chrome 브라우저 다운로드 및 설치

      firefox, arc 등 크로미움 브라우저들과 호환 가능하지만 가급적 크롬 브라우저 사용 권장합니다.
      아래 링크 또는 구글에서 "크롬 브라우저"를 검색하여 윈도우 또는 맥 OS 환경에 맞는 크롬 브라우저를 설치해주세요.
      https://www.google.co.kr/chrome/?brand=CHBD&ds_kid=43700076706468176&gad_source=1&gclid=Cj0KCQjwkN--BhDkARIsAD_mnIpJ0L_4FcziDumhVHP93fKZWDIYheE1DTiZV6ouDEEBTyudfePsbH4aAl8oEALw_wcB&gclsrc=aw.ds

   2. Cursor IDE 다운로드 및 설치
      Cursor는 VSC 라는 통합개발환경(쉽게 말하면 개발자 도구)를 fork(쉽게 말하면 Benchmarking)해서 만든 AI 기능을 가진 개발자 도구입니다.
      아래 링크 또는 구글에서 "cursor"를 검색하여 윈도우 또는 맥 OS 환경에 맞는 크롬 브라우저를 설치해주세요.
      https://www.cursor.com/downloads

      https://www.cursor.com/downloads

   3. 크롬 익스텐션 개발자 모드 활성화

      크롬 브라우저 우상단에 크롬 익스텐션 관리 버튼을 누르거나 주소 표시창에 "chrome://extensions/"를 입력하여 익스텐션 관리 페이지로 들어갑니다.
      그리고 우측 상단에 Developer 모드를 활성화합니다.

      
      
      

      

      ALT

      웹 사이트에 북마크 추가라는 제목의 이미지는 5 단계입니다

      
      

      

      ALT

      강조 표시된 웹 브라우저의 스크린 샷

   

   ALT

   크롬에서 개발자 모드를 변경하는 방법

결과와 배운 점

크롬 브라우저를 이미 사용하고 계시던 분이라면, Cursor IDE만 다운로드 받고 크롬 익스텐션 관리 페이지에서 간단하게 개발자 모드만 활성화하면 크롬 익스텐션 개발 환경 설정이 대부분 끝나게 됩니다. 그래서 처음 vibe coding을 시작하는 분께는 환경설정이 쉬운 크롬 익스텐션 개발로 처음 시작해보는걸 적극 권장하고 있습니다 .

스터디에서 본격적으로 크롬 익스텐션을 개발하기 전에
해당 글을 바탕으로 개발환경 설정을 미리 완료해두면 빠르게 익스텐션 개발로 넘어갈수 있습니다 🙂

앞으로 커서 세팅, 실제 개발 진행 과정도 공유해볼게요!