[크롬 익스텐션] 다담다 확장 프로그램 개발 회고
PART 1. 프로잭트 개요
다담다 크롬 확장 프로그램
크롬 확장 프로그램은 크롬 웹 브라우저에서 사용 가능한 소프트웨어입니다.
해당 확장 프로그램 개발은 일반적인 앱 개발과 유사하게 크롬(구글)의 승인이 되면 배포 된 프로그램을 크롬 웹 스토어을 통해서 다운로드가 가능합니다.
따라서 확장 프로그램 개발은 HTML, JavaScript, CSS와 같은 간단한 웹 기반의 언어를 사용하여 개발이 가능하고, React와 같은 라이브러리를 사용한 개발도 가능합니다.
여러 웹 브라우저의 확장 프로그램에서 국내 웹 브라우저에서 가장 높은 점유율 63.51%를 가진 크롬 익스텐션을 선택하였습니다.
아래의 표는 2022년 4월부터 2023년 4월 기준 웹 브라우저 순위(출처 : statcounter.com)입니다.
| 순위 | 웹 브라우저 | 점유율 |
|---|---|---|
| 1 | 크롬(구글) | 63.51% |
| 2 | Safri | 20.43% |
| 3 | Edge | 4.95% |
PART 2. 다담다 크롬 확장 프로그램 결과물 소개
자세한 코드는 다담다 크롬 익스텐션 GitHub Repository에서 확인하실 수 있습니다.
2023년 8월 5일을 기준으로 다담다 서비스는 베타 서비스 신청서 작성 후에 회원가입 및 서비스 사용이 가능합니다.
기능 1. 다담다 서비스의 구글 로그인
- 맨 처음 크롬 익스텐션 설치시, 다담다 서비스를 사용하기 위한 구글 로그인 창을 보여줍니다.
구글 로그인을 통해서, 개인화된 맞춤 서비스를 제공받을 수 있습니다.
기능 2. 북마크 기능
- 저장하고 싶은 웹 페이지에서 ‘다담다 크롬 익스텐션’을 클릭하면, 다담다 웹 페이지에서 확인할 수 있습니다.
- 성공적으로 저장되면, ‘성공적으로 저장되었습니다’라는 문구와 함께 성공여부를 파악할 수 있습니다.
- 이미 저장한 웹 페이지의 경우, ‘이미 저장된 URL입니다.’라는 문구와 함께 저장된 페이지임을 확인할 수 있습니다.
기능 3. 텍스트 및 이미지 하이라이트 기능
- 특정한 텍스트나 이미지를 저장하고 싶은 웹 페이지에서 우클릭하면,’DaDamDa에 저장하기’라는 문구를 확인할 수 있습니다.
- 해당 문구를 클릭하여, 원하는 텍스트와 이미지를 저장하세요.
- 아래의 사진과 같이 ‘다담다 서비스‘에서 크롬 익스텐션을 사용하여 저장한 웹 페이지들과 하이라이트된 이미지 및 글을 확인할 수 있습니다.
PART 3. 시퀀스 다이어그램
먼저 가장 중요한 다담다 확장 프로그램의 시퀀스 다이어그램에 대해서 설명해 드리겠습니다.
이번에는 전반적인 프로그램 개발 흐름에 대해서 설명하기 때문에, 크롬 익스텐션 요소에 대해서는 자세하게 다루지 않습니다.
- 크롬 익스텐션 요소인 background.js, contentscript.js 등에 대해서는 다음 글에서 자세하게 다룰 예정입니다!
User, Chrome Extension, DaDamDa API Server를 기준으로 큰 흐름으로 살펴보겠습니다.
sequenceDiagram
actor User
User->>DaDamDa Chrome Extension: 크롬 익스텐션 설치
alt 로컬 스토리지에 저장된 token이 없다면
DaDamDa Chrome Extension-->>User: 구글 로그인 창 띄우기
User->>DaDamDa API Server: 구글 로그인
DaDamDa API Server-->>DaDamDa Chrome Extension: JWT Token 제공
DaDamDa Chrome Extension->>DaDamDa Chrome Extension: 로컬 스토리지에 token 저장
end
User->>DaDamDa Chrome Extension: 크롬 익스텐션 클릭
DaDamDa Chrome Extension->>DaDamDa Chrome Extension: 해당 페이지의 Url 추출
DaDamDa Chrome Extension->>DaDamDa API Server: 해당 페이지 Url 저장 API 호출
DaDamDa API Server->>DaDamDa API Server: 페이지 저장
alt 성공한 경우
DaDamDa API Server-->>DaDamDa Chrome Extension: 성공 메시지(Success)
DaDamDa Chrome Extension-->>User: 해당 화면에 성공 화면 삽입
else 해당 페이지가 이미 저장한 페이지인 경우
DaDamDa API Server-->>DaDamDa Chrome Extension: 이미 저장된 페이지 관련 에러(BR002)
DaDamDa Chrome Extension-->>User: 해당 화면에 관련 에러 화면 삽입
else 만료된 토큰이거나 존재하지 않는 회원인 경우
DaDamDa API Server-->>DaDamDa Chrome Extension: 권한 관련 에러(NF002, BR001)
DaDamDa Chrome Extension-->>User: 구글 로그인 창 띄우기
end
User->>DaDamDa Chrome Extension: contextMenus 클릭(하이라이트)
DaDamDa Chrome Extension->>DaDamDa Chrome Extension: 해당 페이지 Url 및 선택한 텍스트, 이미지 Url 추출
DaDamDa Chrome Extension->>DaDamDa API Server: 해당 페이지 Url 하이라이트 저장 API 호출
DaDamDa API Server->>DaDamDa API Server: 하이라이트 저장
현재 다담다 서비스는 API 서버에서 Spring Security를 이용한 서버 기반의 구글 OAuth 로그인/회원가입 기능을 제공하고 있으며, JWT를 이용한 토큰 기반의 인증을 사용하고 있습니다.
따라서, 클라이언트(크롬 익스텐션) 쪽에서는 구글 로그인 창을 띄우기만 하면 DaDamDa Api Server에서 구글 OAuth 로그인 회원가입을 모두 처리해줍니다.(이때, 서버 기반의 OAuth가 아닌 클라이언트 기반의 OAuth를 구현하려면 chrome.identity API를 사용하여 OAuth 제공 서비스와 연결할 수 있습니다.)
- 사용자가 크롬 익스텐션을 클릭하면, 크롬 익스텐션에서는 해당 페이지의 Url을 추출하여 ‘해당 페이지의 Url과 로컬 스토리지에 저장된 token’을 함께 fetch 함수를 사용하여 저장 API를 호출합니다.
이때, API 서버의 응답 경우는 크게 3가지로 성공한 경우, 이미 저장한 페이지인 경우, 만료된 토큰이거나 존재하지 않는 회원인 경우입니다. (해당 응답값은 하이라이트 기능의 응답 경우와도 동일합니다.)
사용자가 성공여부를 파악할 수 있도록 에러가 발생하면 에러 발생한 화면을 클릭한 화면 페이지에 삽입하였습니다. (이때, 화면에 삽입할 수 있는 크롬 익스텐션의 contentscript.js를 사용하였습니다.)
- PART 2에서 설명드린 텍스트 및 이미지 하이라이트 기능에서 본 ‘DaDamDa에 저장하기”라는 버튼은 contextMenus 관련 기능입니다.
이처럼 전반적인 다담다 확장 프로그램에 대해서 살펴보았습니다.
다음 게시글에서는 본격적으로 다담다 확장 프로그램의 요소와 관련 코드를 자세하게 살펴보겠습니다!!