크롬 확장(chrome extension)을 만든 후기

만든확장

chrome extension

나무위키 편집 미리보기 링크

#결론

사실은 window.open() 함수 호출 한방이다.

일주일 넘게 매일 4시간씩 매달린 나는 X신이었다.

끝.

이러면 너무 슬프니 더 써보자

#왜 했지?

공부한다고 하는데 하루에 4시간 이상 집중하기 어렵고, 

수개월간 알고리즘 학습으로 이해력은 생겼다고 생각했는데 건방지게도

숙련도가 부족한지 카카오 1차 코딩테스트 광탈

적절한 학습의욕이 생기지 않은 상황에서 

하고 싶은걸 만들어보자는 생각으로 시작하게 되었다.

평소에 나무위키를 재밌게 본다. 그런 중에 어떤 영상에서 위키들은 누구나 편집이 가능하다고 했다.

그래서 편집을 한번 해보기로 했다.

편집버튼을 누르자 마자 편집이 가능했다. 로그인도 필요없이 신기해하며 편집을 몇번하는데

문법은 마크다운과 유사한 형태라서 금방 익히고 따라하는데,

나무위키의 편집내용을 보는게 탭방식으로 넘기는 거라서 매번 클릭하는게 귀찮더라

그래서 다른 마크다운 에디터 처럼 옆에 프리뷰가 떠있으면 좋겠다는 생각으로 시작했다.

#행동하자

사실 원하는 것은 너무 간단했다. 

나무위키 편집에 이미있는 preview탭 내용을 새 창으로 보여주고 변경시에 다시 바로 뿌려줄 수 있는 단축키를 지원하는 것.

생각은 preview를 통해서 가져온 정보를 크롬 확장에게 넘겨서 다시 표시하게 하자는 거였다.

적절하지 못한 생각으로 생기는 비극은 항상 가까이에 있더라. 

#1차 도전

바로 생각한 건 크롬 확장이다. 크롬을 쓸데 사전 검색이나, 추가 기능시에 잘 사용하고 있었으니까.

그래서 개발문서를 바로 뒤졌다.

다 영어다 구조도 눈에 들어오지 않고, 용어도 생소하다. 

다른 길을 찾아봤다. 생활코딩에 튜토리얼 강의가 있었다. 바로 따라했다.

따라하는 것은 어렵지 않았지만, 내가 원하는 기능과 직접적인 관련성이 없었다.

따라만 했을 뿐 응용도 안된다. 1차 멘붕이 왔다.

#2차 도전

다시 어떻게 접근할 것인가

검색을 통해서 다른 블로그들의 글이 있는지 찾아봤다.

다른 글들을 보니 크롬 확장을 누르면 특정 자바스크립트 파일을 목표 탭(여기서는 나무위키 편집)에서 작동하게 하고, 그 페이지의 정보를 가공하는 방법이 있었다.

그걸 통해서 preview의 html를 데이터 상태로 얻는데 성공했다.

크롬 확장에서 내가 임의로만든 html파일을 새창에 호출하고

거기에 html을 쓰고 싶었다. 계속 검색하고 삽질해서 html을 넘겨서 텍스트를 띄우는데까지 성공했다.

그러나 css/ script / img등이 표시 되지 않는다.

아마 기본주소가 namu.wiki로 되어 있을 테니까로 추측하고, 

주소를 동적으로 변경하려했다 css는 되는데 js는 안되더라. 브라우저의 기본 보안 정책에 걸린다는데.

해결할 방법을 모르겠다.

그걸 오래 학습하기엔 다 영언데 어떻게 해야하나

2차 멘붕이 왔다.

#3차 도전

2차 멘붕전 과정에서도 새창을 띄우고,

다른 탭으로 메시지를 넘기는 과정에서 명확하게 작동하게 만들지 못했다.

거기서 내부적으로 스크립트의 주소를 변경하는데 문제가 발생했다. 정확히는 모르겠다.

동일 출처 정책에 걸린다고 추측할 뿐이다. 이미지와 스크립트에 문제가 발생했다.

메시지를 넘기는 과정에서 "크롬 확장"의 API가 아니라 브라우저에서 제공하는 API에 대해서

알게됐다. 여기서 내가 얼마나 배경지식 없이 뛰어들었는지 깨달았다.

원래의 preview도 target _blank로 form을 전송하면 새창으로 뜨는데 이걸살리는 방법을 찾기 시작했다.

이렇게 하면 주소변경하는 방법 필요 없이.

그냥 깔끔하게 뜬다.

여기에 누를때 마다 새창이 아니라 그 페이지가 계속 유지되도록 하게만 하면 되었다.

찾다보니 window.open()API를 post방식으로 요청하는 자세한 방법이 있더라.

그래서 edit form의 내용을 window.open()으로 요청했더니 대부분이 해결.

이렇게 하는데 일주일이 넘게 걸렸다.

#결과

그래서 결론은 

그냥 window.open()함수에 데이터만 잘 넘겨서 실행하면 되고,

크롬 확장은 content_scripts라는 타겟 페이지에서 스크립트가 실행되게 하는 기능만 알면 된다.

자괴감이 터졌지만 깨달은게 몇가지 있다.

1) 브라우저는 생각보다 매우 방대한 기능을 제공한다

2) 브라우저에서 html를 처리하는 과정을 모르면 가공을 의도대로 절대 할 수 없다.

3) 브라우저의 보안 정책을 모르면 막히는 부분이 많다.

4) 브라우저의 작동원리나 관련된 지식은 생각보다 진입장벽이 높다. 영어문제도 있고

5) 많은 기능은 대부분 구현되어 있다 내 생각에 맞는 기술을 찾는 능력이 요구된다.

#6 뭔가 있어 보이게 프로그래밍 기술을 사용하는 것 보다, 단순하고 명쾌한 방법을 찾자. 존재할 확률이 높다.

#7 공부해야할 건 넘친다. 자신감을 가져야 하지만 늘 겸손하자.

#8 적절하게 구조적으로 학습해야 한다. 부분부분 겉 핥기는 위험하다.

이 작은 프로그램 작성에도 내 부족함을 많이 느꼈다.