Chrome Extension - 1

크롬 익스텐션?

평소 React Developer Tools과 같은 확장프로그램을 사용하면서, 해당 웹사이트가 React로 개발되었는지 아닌지 알 수 있고, 웹 요소를 React 컴포넌트로 표현되는 등, 확장프로그램의 효과를 경험한바가 있었습니다. 또한, 유튜브 애드블락과 같은 확장프로그램을 보면서, 크롬안에서 확장프로그램이 하는 역할이 굉장히 매력적이라고 느꼈었습니다. 그래서, 평소에 이런 확장프로그램을 언젠간 개발해야지 라고 생각했어요. 그러던 와중에, ASIA IMPACT라는 해커톤에 참여하게 되었고, 그 결과 1차 선정되어서 '유튜브 악플 신고를 돕는-SafeComment라는 확장프로그램을 개발하게 되었어요.

크롬 익스텐션 개발의 구성

크롬익스텐션의 개발은 공식문서에 따라 아래와 같이 나눌 수 있어요. (공식문서 링크)

• 1.사용자 인터페이스 디자인
• 2.브라우저 제어 (Chrome의 확장 프로그램 API를 사용하면 브라우저의 작동 방식을 변경할 수 있습니다.)
• 3.웹 제어하기 (웹페이지의 콘텐츠와 동작을 동적으로 변경합니다. 스크립트를 삽입하고 네트워크 요청을 가로채고 웹 API를 사용하여 웹페이지와 상호작용하여 웹을 제어하고 수정할 수 있습니다.)

내가 필요한 기능?

일단 초기 기획에서 필요한 기능은 크게 다음과 같고,
각각 기능을 필요한 개념에 매칭하면 아래와 같습니다.

• 1.전체 확장프로그램 UI -> 사용자 인터페이스 디자인
• 2.서비스 인증 관련 -> 브라우저 제어/사용자 인증
• 3.악성 댓글 자동 탐지 및 블러 처리 -> 웹 제어하기/자바스크립트 및 CSS 삽입
• 4.한 번의 클릭으로 신고 과정을 더 수월하게 진행 가능 -> 웹 제어하기/활성 탭에 액세스
• 5.대신 신고된 악플은 캡처본 전달로 대신 신고 과정 진행 -> 웹 제어하기/웹 요청 제어,오디오 녹음 및 화면 캡처
• 6.사용자 댓글 입력시, 영상에 맞게 더 긍정적인 댓글(선플)로 변환 및 추천 -> 웹 제어하기/자바스크립트 및 CSS 삽입

학습 방향

우선 필요한 기능에 맞게 개발과 학습을 병행할 예정이에요, 우선 CSS를 통해서 모든 UX 흐름의 화면을 구성할 계획입니다