[TIL] Velog 익스텐션 만들기(1)
[TIL] Velog 익스텐션 만들기(2)
template popup 만들기
popup은 기본적으로 메인 페이지와 독립적으로 생성되는 페이지이다보니 chrome extension을 개발시 content.js와 통신하는 장치가 필요하다.
보통 message(데이터)를 보내는 쪽에서 sendMessage를 하고 받는 쪽에서는 onMessage로 데이터를 주고 받는다 content와 popup상관없이 이런 식으로 데이터를 주고 받게된다.
데이터 통신 설계
popup에서 데이터를 통신이 필요한 부분은 템플릿 버튼을 클릭 시 벨로그 text editor에 text를 붙여넣는 부분이 있다.
위 부분을 처리하기위해서는 content.js와 통신을 해야한다.
통신 하는 방법은 메인 페이지의 tab id를 찾아서
chrome.tabs.query(CHROME_OPTIONS, function (activeTabs) {
chrome.tabs.sendMessage(activeTabs[0].id, sendData);
});로 데이터를 보내고
content.js에서는
chrome.runtime.onMessage.addListener((obj) => {
const {
isMatched,
message: { index, type },
} = obj;
});위와 같은 방법으로 받는다.
obj에는 각종 js에서 보낸 데이터 객체가 담겨져 있다.
이 방법으로 extension 안에서 js끼리 통신이 가능하게되었다.
popup
팝업에는 저장된 template 만큼 card를 생성하고 card를 클릭 하면 앞서 설명한 데이터 통신을 통해 content에서 저장된 데이터를 찾아 text editor에 붙여넣기를 진행한다. 그리고 삭제 버튼을 추가해 불필요한 template을 삭제 할 수 있다.
앞으로 추가할 기능
template 수정 버튼, 제목 추가, 텍스트 색상 추가 템플릿
- template 수정 버튼: 수정은 불러 오거나 새로 입력한 text editor에 입력된 데이터로 수정 버튼을 누른 데이터에 덮어쓰기를 할 수 있게 구현할 예정
- 제목: 제목은 velog 제목란의 데이터를 제목으로 사용할 예정이다.
- 텍스트 색상 추가 템플릿: popup 혹은 드롭다운을 사용하여 벨로그에
<span style='color: red'>text</span>와 같은 색상별 테그를 제공하여 좀 더 쾌적하게 색상을 사용할 수 있게 추가할 예정
이번에 popup을 사용하면서 chrome extension에서 js파일끼리 통신하는 방법을 배웠는데
새로운 페이지를 만드는게 아닌 기존페이지에 추가 기능을 만드는 것이다보니 새로 개발할떄 당연히 쓰던 방법이 아닌 chrome extension의 기능을 사용해야 하는부분이 굉장히 어색하면서도 재미가 있었다. 앞으로 chrome extension을 개발 하더라도 더욱 수월하게 진행을 할 수 있을거같다.
