[TIL] Velog 익스텐션 만들기(2)

[TIL] Velog 익스텐션 만들기(3)

시작 및 접근

벨로그에는 템플릿 저장 기능이 없다. 벨로그를 자주 쓰는 입장에서 조금 불편하기에 한번 도전해보기로 했다.

velog의 textEditor의 text div부분이 있는 CodeMirror class의 자식 node를 싹 긁어와서 localStorage에 배열로 저장 후 저장된 배열 인덱스 만큼 템플릿 버튼을 생성하고 생성된 템플릿 버튼을 클릭하면 CodeMirror의 자식 node를 지운 후 저장되어있던 node들을 붙이는 식으로 진행 해보았다.

(임시 디자인..)

문제의 시작..

문제는 velog의 textEditor는 javascript로 작성되어지는 텍스트를 변환해서 tag로 감싸서 보내주는 형태인거 같다. 그래서 text로 변경되었던 node를 class가 CodeMirror인 div에 innerHTML로 붙여도 html object가 아니라서 연결되어있던 event가 전부 끊겨 텍스트는 뜨지만 더 이상 입력을 할 수 없었다..

문제해결을 위한 시도

text를 innerHTML로 넣었을때는 javascript가 끊겨 더 이상 textEditor에 입력을 못했기에 입력한 text만 긁어와서 localStorage에 저장하고 템플릿 버튼 클릭시 class가 CodeMirror에 cursor를 옮겨 붙여 넣기를 시도를 하고있다.

어떻게 하면 cursor위치에 바로 붙여 넣기를 할 수 있을지 찾고 있지만 아직 명확한 답을 못 찾은 상태이다.

이 익스텐션은 꼭 만들고 싶기에 완성해서 배포를 해보고싶다.
처음 만드는 chrome의 익스텐션이기에 아직 많은 부분이 부족하지만 꾸준히 익혀나가 웹을 이용중에 불편한 부분이 있으면 익스텐션을 만들어 채워 갈 수 있게 노력해야겠다!