바로가기 추가 크롬 확장프로그램 하루 만에 update하다

크롬의 바로가기 익스텐션을 어제 만들고 스토어에 제출하였다. 하루동안 내가 직접 써보고 update 한 내용들이다. 

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

 

 

---

서문

하루만에 스토어 승인이 났다

 

익스텐션을 만든 지 하루 만에 바로 승인이 났다. 그런데 내가 내 익스텐션을 쓰면서 불편한 부분들이 있어, 몇 가지 요소를 하루 만에 업데이트하였다. 치명적인 오류가 있던 것은 아니고 UI를 개선하였다.

---

favicon 가져오기

• favicon을 가져오지 못하면 아이콘 이미지가 아니라 첫 글자의 대문자로 표시된다. 가능하면 미관상 아이콘으로 보는게 좋다. 그런데 favicon을 가져올 수 있을 것 같은데 가져오지 못하는 경우가 있어, favicon을 가져오는 경우를 하나 더 늘려 가능하면 텍스트 대문자가 아닌, favicon으로 뜰 확률이 높게 하였다.
• favicon을 가져오는 방식을 favicon.io 만 찾는게 아니라 google.com/s2의 path에서 찾는 다른 방법도 넣어 아래와 같이 수정하였다.

  function getFaviconUrl(url) {
    try {
      const urlObj = new URL(url);
      const googleFaviconUrl = `http://www.google.com/s2/favicons?sz=32&domain=${urlObj.origin}`;
      const originFaviconUrl = `${urlObj.origin}/favicon.ico`;
      if(googleFaviconUrl){
        return googleFaviconUrl;
      }else{
        return originFaviconUrl;

      }
    } catch (e) {
      return 'default-icon.png'; // 기본 아이콘 URL
    }
  }

이미지를 가져오지 못하던 업데이트 전 사진

아이콘 이미지를 잘 가져온다

---

favicon 화질 개선

구린 화질의 바로가기

 

화질이 선명하게 개선된 모습

그리고 위의 새로운 과정에서 16*16 사이즈가 아닌 32 사이즈를 가져오게 해서, 화질도 전체적으로 개선하였다.

---

새 탭 이름

• 새 탭 이름을 원래는 product 이름인 'More Than 10 Shortcuts'로 하였으나, 이렇게 하니 기본페이지가 아니라 다른 특수한 url에 접속한 것 같았다. 그래서 Tab title이름을 New Tab으로 바꾸어 주었다.

탭 이름이 특정 사이트에 접속한 것 같다

누가봐도 새로운 빈 탭이다

---

수정, 삭제버튼 hover 판정

• 바로가기 버튼 위에 마우스 커서를 올리면 해당 바로가기를 수정하거나 삭제할 수 있는 버튼이 2개 나온다.
• 그런데 이 마우스 올리는 판정의 범위가 너무 좁아서 더 큰 container에 hover 하는 걸 기준으로 바꾸었다.

커서를 올려서 수정, 삭제 버튼이 뜬 모습. 판정이 개선되었다

---

글자 밑에 링크처리되서 줄 생기던 거 수정, 글자수에 따른 높이 조절

글자 밑에 파란 밑줄도 쳐져있고, 이름도 길게 쭉 나와있다.

밑줄이 사라지고, 글자수를 잘라 보여준다

• 아이콘을 가져올 수 없는 URL의 경우 첫 글자를 크게 띄운다. 그런데 그렇게 생긴 첫 글자는 a tag 때문에 하이퍼링크로 간주되어 글자밑부분에 파란 줄이 쳐졌다. 보기 불편하여 파란 줄을 없앴다.
• 바로가기 이름이 한줄에 표시되지 못할 정도로 길 경우 아래로 쭉 늘이는 것이 아니라...으로 글자를 잘라 아이콘들 높이 조절에 신경 썼다.

 

---

결론

UI는 처음에는 잘 몰랐다가 쓰면서 개선점을 발견하는 것 같다. 간단한 부분들이었지만, 세심하게 고치려니 여러 부분이라 아예 한 번에 여러 부분을 수정하였다. 링크는 아래와 같다.

 

스토어 링크

More Than 10 Shortcuts - Chrome 웹 스토어

 

깃허브 링크

https://github.com/SKKUKang/chrome-shortcut-10-

GitHub - SKKUKang/chrome-shortcut-10-