3분만에 브라우저 익스텐션 만들어보기

목차

· 프로젝트 준비하기

· 익스텐션 만들어보기

· 익스텐션 스토어 배포

---

저는 지금 리워크라는 업무에 필요한 멋진 서비스를 만들고 있어요, 처음으로 저한테 필요한 서비스를요 👋🏻 필요한 서비스를 만들면서 PWA 이외에 브라우저 익스텐션으로도 제공이 되었으면 좋겠다는 생각을 했어요. 그래서 관련 자료를 찾아보다가 브라우저 익스텐션 개발이 그리 어렵지는 않았고, PWA와 비슷한 과정을 거쳐 개발을 할 수 있더라구요. 다만 브라우저 익스텐션으로 제공되기 때문에 도화지의 크기가 작다는 단점을 가지고 있다는게 조금 흠이지만요.

프로젝트 준비하기

우선 익스텐션으로 만들기 위해 프로젝트를 준비해야해요. CRA로 빠른 프로젝트를 만들어도 되고, Vite를 이용하여 빠르게 프로젝트를 준비해도 좋아요. 필자는 기존 리워크 소스코드를 이용하여 익스텐션용 프로젝트를 만들기 위해 Vite를 이용한 프로젝트에 일부 소스코드를 임포트해왔어요.

익스텐션 만들어보기

익스텐션을 만들기 위한 조건은 매우 간단해요. PWA를 만들때처럼 manifest.json 설정 후 빌드 산출물을 통해 익스텐션 사용이 가능한데, manifest.json 파일이 없다면 public 폴더에 생성을 해주고 CRA를 통한 프로젝트 생성을 했다면 기존 manifest.json을 사용하면 돼요. 이때, manifest.json은 브라우저에 이 앱에 대한 정보를 알려주는 파일을 의미한다. 이 앱이 크롬 익스텐션이라고 브라우저에 명시를 해주어야 extension 프로젝트를 정상적으로 생성할 수 있어요.

 

크롬 익스텐션 어플리케이션 규격에 맞게 manifest.json을 수정해야하고, 필수적인 필드는 아래와 같아요.

• manifest_version : 설정 필드 스키마에 대한 버전을 의미하며 v3가 가장 최신 버전을 의미합니다, 현재 스토어 배포를 하기 위해서는 무조건 3버전으로 설정을 해야합니다.
• version : 어플리케이션의 버전을 의미합니다.
• name : 사용자에게 표시되는 크롬 익스텐션의 이름을 뜻합니다.
• action > default_popup : 진입점, 엔트리 포인트를 설정합니다.

{
  "manifest_version": 3,
  "version": "1.0.0",
  "short_name": "Rework",
  "name": "Rework",
  "action": {
    "default_popup": "index.html"
  },
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
}

 

위와 같이 manifest.json을 설정해주었다면, 패키지 매니저에 따라 빌드 명령어를 통해 빌드 산출물을 생성해주어야해요. 필자의 경우 pnpm을 사용하고 있기 때문에 아래와 같이 명령어를 입력해주었어요.

pnpm build

 

빌드된 산출물을 스토어에 배포하지 않고 바로 익스텐션으로 확인을 하고 싶다면, 확장 프로그램에서 개발자 모드를 활성화하고 압축해제 된 확장앱 설치를 클릭하여 타겟을 빌드 산출물을 선택하여 확인을 누르면 돼요.

빨간색 표시는,, 제가 파라미터를 잘못 썼나봐요,, 하하,,

위의 사진과 같이 임시로 확장 프로그램을 설치하여 사용을 할 수 있는데, 이때 주의사항은 업로드했던 빌드 파일이 사라지게 되면 해당 확장 프로그램도 사용을 하지 못한다는 단점을 가지고 있어요. 이 경우에는 모든 환경에서 사용할 수 있도록 확장 스토어에 등록을 해야하고, 등록하는 과정은 앱스토어의 어플리케이션 등록 과정보다는 간소화되어있으며, 하루 정도 심사 과정을 거치게 돼요.

익스텐션 스토어 배포

평소에 웨일 브라우저를 사용하지만 첫번째로 크롬 확장 스토어에 등록을 위해 크롬 확장 스토어 등록 절차를 진행했어요. 생각보다 심사 시간은 그리 길지 않았고, 무난하게 배포 완료를 할 수 있었답니다.

현재는 리워크 서비스가 스토어에 배포되어있는 상태예요, 한달도 걸리지 않는 서비스를 만들었고 현재 다양한 팀원들과 하나의 서비스를 열심히 만들고 있어요. 1차 MVP로 웹 서비스, 브라우저, 웹앱, 네이티브 앱까지 다양한 크로스 플랫폼에서 제공될 수 있도록 하는 것이 현재 목표예요. 거의 모든 환경에서의 배포가 마무리 되어가고 있으니, 서비스를 완만하게 만드는게 남았어요. 하루 업무를 체계적으로 진행하고 싶다면 리워크 서비스를 통해 업무의 효율성을 누려보세요. 익스텐션의 경우 현재 정말 가벼운 기능들만 존재하고, 웹 서비스가 정식 서비스를 시작한다면 플러그인도 이에 발맞춰 다양한 기능을 제공할 생각이에요. 

 

리워크 웹 서비스 : https://rework-eight.vercel.app/main

리워크 플러그인 : https://chromewebstore.google.com/detail/rework/mibhdihagebcbcmifindjenkaoikajim?hl=ko&authuser=0

Rework

 

 

---

레퍼런스

react를 사용해서 크롬(chrome) extension 만들기

[크롬 확장프로그램]React Developer Tools 설치