크롬 확장 프로그램을 만들어보았다 (Decode URL by Click)

Roeniss Moon·2020년 12월 13일

소스코드 : https://github.com/roeniss/decodeURLbyClick-extension
구글 앱 스토어 : https://chrome.google.com/webstore/detail/decode-url-by-click/mahkjonofhhakemoelnblidpijhjhabk
웨일 앱 스토어 : https://store.whale.naver.com/developers/edit/hkcficghoakbcnmefcloaelnancdmlli
파이어폭스 애드온 : https://addons.mozilla.org/ko/firefox/addon/decode-url-by-click/

코드 보면 알겠지만 기능 자체는 그렇게 대단하지 않다. 그래서 본문에서는 코드 해설을 따로 하지 않으니 유의할 것 (문의는 깃헙 이슈로...) 그와 별개로, 작동할 때마다 아이콘 색깔을 바꿔서 표현한건 나름 참신한 발상이 아니었나 하고 생각해본다.

서 🤔

"왜 복사한대로 안 붙여넣니?"

이 페이지의 상단 주소창을 pc에서 보면, URL이 이렇게 보일 것이다.

-> https://velog.io/@roeniss/chrome-extention-개발기

하지만 이 URL을 복사해서 다른 곳에 붙여넣으면 이렇게 변한다.

-> https://velog.io/@roeniss/chrome-extention-%EA%B0%9C%EB%B0%9C%EA%B8%B0

이것은 퍼센트 인코딩 때문이다.

percent encoding wiki 비 알파벳권의 서러움

"귀찮은 루틴.."

사실 이를 해결해주는 크롬 익스텐션이 이미 존재한다.

https://chrome.google.com/webstore/detail/url-decode-encode/dgoepmkoiphgabefpbapldnjmbbiaoag

decode URL | Encode screenshot 우측 상단 모퉁이의 아이콘 (브라우저 상에서도 우측 상단)을 누르면 이런 팝업이 뜬다.

그런데 이 익스텐션을 제대로 쓰려면 4단계를 거쳐야 한다.

URL 복사
익스텐션 아이콘 (browser_action icon) 클릭
좌측 하얀 창에 붙여넣기
우측 상단 Copy 버튼 누르기해서 클립보드에 저장

그리하여 2 ~ 3 단계를 생략한 새로운 익스텐션을 생각하게 되었다.

참고로 개발자 도구를 잠시 열어서 decodeURIComponent("YOUR_URL")를 입력하는 방법도 있다

"새로 하나 만들어볼까?"

네 개의 motivation이 있었다.

위의 4단계 프로세스가 너무 귀찮았음
같은 컨셉 (just one click)의 디코더 익스텐션이 앱 스토어에 없었다. 대충 찾아보긴 했지만... 만들 '가치'가 있다고 판단했다. (나에겐 꽤 중요한 기준이다)
브라우저 익스텐션 하나 만들어보고 싶다는 생각은 예전부터 하고 있었다. 다른 아이디어도 어디 적혀있을 듯?
기말고사 기간이다

본 😵

어... 뻘짓과 유튜브와 멍때리기 합쳐서 익스텐션 심사 요청까지 도합 10시간 정도 걸린 것 같다. 몇 가지 고비가 있었는데, 전체적인 작동 방식을 먼저 설명하겠다.

"극도로 단순해야 한다"

유저는 URL을 복사한다 (ctrl+c)
우측 상단에 위치할 익스텐션 아이콘을 누르면 그 즉시 디코딩이 완료되고 클립보드에 저장된다 (-> 바로 ctrl+v 하면 됨)

시작은 이정도 기획이었고, 추가적으로 몇 가지 편의성이 더 가미되었다.

여러 번 눌러도 잘 작동해야 한다.
현재 작동된건지 안된건지 시각적으로 정보를 제공해야 한다.

"이거 어떻게 신호를 받는거지?"

background_script와 content_script 중 어떤 걸 써야 하는지 자꾸 헷갈려서 이리갔다 저리갔다 몇 번 헤맸다. 특히 공식 documentation에서 "곧 V3 나와요~" 라고 써있는 점과 일부 문서가 누락된 (=분명 링큰데 누르면 404가 뜨는) 상황을 겪으며 머리가 지끈지끈했다.

혹시 이 글을 보고 익스텐션을 만들어보려고 하는 분이 있을까봐 코멘트 : Chrome API 쓰려면 background_script 쓰는게 일반적인 것 같습니다. 그런데 트리거가 content_script를 통해 들어오는 경우, content_script에서 background_script로 시그널(message)를 보낼 수 있습니다. 웹소켓 느낌이예요. 그렇게 전달해서 API 돌리면 됩니다

암튼 구글링 열심히 해서 해결함. 전에 웨일 브라우저 확장 프로그램 만드는 해커톤 나갔는데 그 때의 경험이 흐릿하게나마 남아있어서 꽤 도움이 되었다.

"클립보드를 어떻게 쓰는거지?"

아주 신기한 방법으로 사용/갱신하더군...

궁금하면 아래 두 개 링크를 참고하길.

// ref: https://stackoverflow.com/a/43375402/8556340
function readFromClipboard() {
  // ...
  
// ref: https://stackoverflow.com/a/18455088/8556340
function copyToClipboard(text) {
  // ...