크롬 바로가기 10개 보다 더 많이 추가하는 방법?(More Than 10 Shortcuts 개발기)

서문

새로 만든 크롬 익스텐션 'More Than 10 Shortcuts'에 관한 개발기다.

---

개발 동기

• 링커리어에 좋은 공모전이 많이 올라온다는 동기의 말을 듣고, 크롬 바로가기에 링크를 추가하려고 했다. 그런데 크롬 바로가기 10개 갯수 제한에 걸려, 새로운 바로가기 링크를 추가하려면 기존의 것을 지워야 했다. 
• 이 부분이 불편하여 바로가기를 10개보다 더 많이 저장할 수 있는 익스텐션을 만들었다.

최대 10개 바로가기로 그 이상 추가할 수 없다.

---

아이디어를 참고할 수 있는 것

• 사실 기존의 비슷한 익스텐션으로 honey라는 익스텐션이 있었다. 하지만, 이 익스텐션은 아예 크롬의 newtab 자체를 자신만의 스타일로 싹 다 바꿔버려서 쓰고 싶지 않았다.
• 나는 그냥 기존의 UI style을 유지하되 바로가기만 추가하고 싶었다.

---

사전 지식수준

• 이전에 gptbottomcopybutton이라는, gpt의 code copy 버튼을 하단에도 추가시켜 주는 익스텐션을 만든 적이 있었다. 기능이 크고 많은 확장프로그램은 아니었지만 만들었던 경험이 있어서 이번에는 더 가벼운 마음가짐으로 도전하였다.

크롬 익스텐션 개발일지: GPTBottomCopyButton

 

---

예상 MVP 모델 및 아키텍처 구성

• chrome의 newtab url을 인식한다.
• 해당 url이 인식되면 웹을 읽어서 현재 바로가기 버튼이 몇 개인지 판단한다. 
• 10개 이상이면 원래는 바로가기 추가버튼이 숨겨지나,  새로운 바로가기 html 요소를 추가하여 추가할 수 있게 한다.

 

---

개발일정

• 원래 기간이 길어지면 날짜와 구현한 내용들을 표로 정리해서 개발기를 올린다.
• 그런데 그냥 하루, 약 5시간 만에 완성했다. 이전에 만들었던 경험이 있어서 빠르게 구현하였다.

---

시도 1: 기획 자체의 문제 발견

• 우선 익스텐션으로 만들기 전에 구글 콘솔창에서 자바스크립트를 이용해서 디버깅으로 시도해 보았다.
• queryselector로 html 구조를 읽고 그에 맞게 추가하는 코드를 콘솔창에 넣었는데 잘 되지 않았다. 알고 보니 html 요소를 숨겨주는 #shadow-root라는 shadow dom을 사용해서, queryselector가 제대로 작동하지 않았던 것이다. shadow dom의 존재 자체를 잘 몰라서 헤맸다.
• shadow dom 구조에 맞게 적용하여, 10개 이상일 때도 바로가기 버튼이 나오도록 하였다.
• 하지만, overflow를 막기 위함인지 10개 이상일때도 추가하려 하니 오류가 뜨면서 추가가 되지 않았다. 어찌 보면 당연한 결과였다. 그래서 다른 방법을 찾아야만 했다.

---

시도 2: chrome://newtab의 보안문제 발생

• 그래서 chrome 새로운 창 url이 인식될 때, 기존 크롬 바로가기에서 적용되는 함수가 아닌, 아예 새로운 함수를 만들어서, 사용하려고 하였다.
• 버튼 UI와 dialogue UI를 똑같이 만들어서 적용한다면, 사용자들은 그냥 11개 이상 되는구나 생각하게 하는 일종의 눈속임으로 만드려고 했다.
• 하지만 chrome://newtab은 보안문제로 크롬 익스텐션이 적용되는 것 자체가 막혀있었다. 
• 다시 새로운 방법을 찾아야 했다.

---

시도 3: 새로운 사이트로 override 하자!

• chrome://newtab에 익스텐션을 적용하는 것은 불가하였지만, newtab 자체를 override 하여, 아예 다른 html 창으로 이동하고, 거기에 새로운 테마를 적용하는 것은 가능했다.
• honey 같이 기존의 크롬 익스텐션들이 이 방법을 사용하고 있었다.
• 최대한 기존의 UI를 지키고 싶었기 때문에, override 하는 방법을 사용하면서도 기존의 간단한 화면처럼 구성했다.

---

완성된 화면

• 다음과 같이 검색창과 바로가기 버튼만 남긴 extension을 만들었다.

완성화면

 

• 본래 목적대로, 바로가기를 10개보다 많이 추가할 수 있고, 그랬을 때 화면은 다음과 같다.

많은 바로가기가 추가된 화면

 

아무런 바로가기도 추가하지 않았을 때의 화면은 다음과 같다.

아무런 바로가기도 추가하지 않았을 때의 화면

 

UI가 간단하여 개발자들이 좋아할 것 같다.

---

개발 중 신경 썼던 부분

• 아이콘에 커서를 올리면 edit 버튼과 delete 버튼이 나오는데 이 버튼들이 자꾸 묘하게 정렬이 안 맞아서 고치는데 2시간은 걸리는 것 같았다. 
• 굵직한 기능들은 구현하는데 오래 걸리지 않았지만 오히려 이렇게 사소한 부분들이 더 오래 걸리는 것 같다.
• 반응형으로 아이콘이 정렬되게 처리도 하였다.
• 캡쳐된 이미지를 스토어에 올릴 때 정해진 규격을 지켜야 했던 부분이 귀찮았다. 

---

관련 링크

 

스토어 링크

More Than 10 Shortcuts - Chrome 웹 스토어

 

 

깃허브 링크

GitHub - SKKUKang/chrome-shortcut-10-

 

---

결론

이전의 경험을 살려서 크롬 확장프로그램을 다시 만들었다. 예전에는 만드는데 일주일 가량 걸렸는데, 지금은 훨씬 더 빠르게 5시간 만에 만들었다. 고작 바로가기 링크하나 추가하려고 했던 게 나비효과처럼 크게 번졌다. 이렇게 만든 익스텐션은 다른 사람은 안 쓸 수도 있다. 하지만 내가 쓸 것이다. 내가 최초이자 마지막 유저가 될 것이기에 후회는 없다. 언제나 남에게 프로그램을 쓰게 하기 위해서는 일단은 나부터 쓸 가치가 있는 프로그램인가? 를 생각하며 만들어야 하는 것 같다.