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

개발/Chrome Extension 개발기

걍판자 2024. 9. 27. 02:28

서문

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

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

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

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

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

완성된 모습!기획단계개발하려고 하는 것chat gpt가 코드를 짜줄 때 copy code 버튼이 아래에도 생기도록 하는 크롬 익스텐션개발하고자 하는 이유 코드를 생성할 때 위에서부터 아래로 코드를 읽

juneforpay.tistory.com

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

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

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

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

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

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