[크롬 익스텐션: 02] Manifest V3

Chrome Extension을 개발하기 위한 Manifest V3는 다양한 UI를 제공한다.

 

그리고 그 UI를 핸들링하기 위해서는 manifest.json을 잘 파악하고 시작해야 한다.

manifest.json

혼자서 처음부터 해야 잘 알지 하며....

이것 저것 만져보다가... 결국 boilerTemplate을 찾았고... 현실과 타협했다... 솔직히 귀찮은건 질색이긴하다....

(boiler template - https://github.com/lxieyang/chrome-extension-boilerplate-react)

TypeScript 지원, Manifest V3 기반, 깔끔하게 놓은 폴더 구조, 코드 변경에 따른 자동 리로드 등 꽤나 잘 만든 보일러템플릿이라고 생각한다!

 

다시 돌아와서

우선, 가장 공통적이고, 다수의 익스텐션이 갖는 자체만의 어플리케이션 UI는 `popup.html`이다.

 

간단하게 제작한 popup.html with toggle

익스텐션을 끄거나 킬 때, 보통 popup.html을 활용한다. 유의할 점은 해당 창에서 포커스가 빠지면, 닫힌다는 것이다.

독립적인 작업, 동시적인 작업 등 어플리케이션의 주요 로직은 이곳에 위치하면 안될 것 이다!!

 

다음으로는 background script 가 있다. 명명 그대로, 어플리케이션이 설치/동작 하는 동안 작동하는 코드이다. 때문에 주로 리스너를 이곳에 정의한다. 크롬에서의 특정 동작을 감지하고, 이를 바탕으로 어느 메소드를 invoke 시킨다면, 이 곳의 리스너가 그 동작을 인식 시킬 것 이다. 공식문서의 예제에서는 background script에서 `chrome.storage.sync.set` 메소드를 통해 storage에 저장을 시키는 것을 보여준다. (localStorage와 chrome.storage를 보통 사용한다고 한다)

 

해당 프로젝트에서는 사용하지 않을 Devtools.html 도 존재한다. React, Redux를 사용해보았고, 디버깅을 윤택하게 하고 싶어했던 개발자라면, React, Redux Devtools를 사용해보았을 것 이다.

 이외에도 다양한 기능들이 있다...(tab을 추가했을 때 default로 나오게 되는 창이라던지...) 하지만 중요한 부분 중 하나인 content script는 짚고 넘어가야한다.

 

content script 는 웹페이지의 context에서 실행되는 파일들이다. standard DOM을 사용하는 페이지라면 사용자가 접근한 web page의 내용을 읽을 수 있고, 바꿀 수 있고, 전달 할 수 있다.

 

결국 현재 페이지의 DOM을 핸들링하게 되는 content script는 해당 프로젝트의 기초 설계가 되는 기술이 되었다...! 왜냐, devtools로 채팅창을 만드는건, 말도 안되도록 접근성이 떨어지고, popup은 포커스가 아웃 될 때 마다 사라지기 때문에 매우 불편하다.

 

DOM을 핸들링 할 수 있다는 것은, 스크립트 주입이 가능하다는 것 일 것이고, 직접적으로 DOM 엘리먼트를 만들어주어 페이지에 주입, z-index를 css로 주어 채팅창이 독립적으로 움직이는 것 처럼 구현 할 수 있다는 뜻을 의미한다 생각했다.

 

그렇게 첫 발걸음을 땐 크롬 익스텐션...!

 

가볍게 제작한 UI

현재 우측에 보이는 Chrome Extension Chatting Application은 토글이 켜져있는 동안 켜져있다. 아직 특정 로직은 주입하지 않아 특별한 기능은 존재하지 않는다...

 

코드는 다음 포스트에 공개하고자 한다... 아직 민망할 정도로 정돈 되지 않았을 뿐더러, 각 페이지에 주입 코드가 어떤 방식으로 채팅 서버와 통신하게 될지 (현재는 각 페이지 마다 주입 된 채팅 UI는 각기 다른 통신을 연결하게 될 것 같다 - 전역적인 세팅을 이룰 지, 주입되는 사이트의 소켓 통신 Api 여부를 확인하고, 가능하다면 자동 연결로 이루어 줄지) 모르기 때문이다.

 

https://github.com/Free4Developers 에 개발을 진행하고 있고, public으로 이루어져있다!