태인의 Blog/
브라우저 확장앱 개발하기(aka. 회고록)
Forest
브라우저 확장앱 개발하기(aka. 회고록)

브라우저 확장앱 개발하기(aka. 회고록)

작성자
태인태인
카테고리
⚗️ 프로젝트
작성일
2021년 11월 19일
태그
Web

브라우저 확장앱?

브라우저 확장앱은 사용자의 웹 브라우징 경험을 향상시키기 위한 소프트웨어 모듈이다. 이는 사용자가 웹 브라우저의 기능을 확장하거나 수정할 수 있게 해준다.
브라우저 사용 도중 느꼈던 불편함을 개선하기 위해 ‘사이드바’기능을 제공하는 네이버 웨일 브라우저를 위한 확장앱들을 만들어 배포해보기로 했다.
 
시작에 앞서 아래에서 다루지 않은 자세한 내용은 웨일 브라우저의 개발자 문서를 참고하면 좋다.
웨일 개발자센터
Move the web, forward.
웨일 개발자센터
https://developers.whale.naver.com/
웨일 개발자센터
 

개발자 등록하기

웨일은 네이버 아이디만 있으면 개발자 등록을 할 수 있다. 하지만 크롬은 개발자 등록을 하려면 돈을 내야하므로 웨일 스토어에만 배포하도록 하자. 어차피 사이드바 익스텐션을 구상했음
  • 계정 정보 > 개발자를 클릭하여 개발자 등록을 진행
notion image
 

프로젝트 구조

확장앱의 프로젝트 구조는 꽤 간단하다. 가장 중요한 파일은 'manifest.json'이다. 이 파일은 확장앱의 정보, 사용 권한, 백그라운드 스크립트, 컨텐츠 스크립트 등을 정의한다. 그 외에도 팝업에 사용되는 HTML과 CSS, 확장앱에서 사용하는 이미지 등의 파일들이 포함된다.

Manifest.json

{
  "manifest_version": 2,	// 고정
  "name": "이름없는 확장앱",	// 확장앱 이름
  "version": "1.0.0",		// 확장앱 버전 (업데이트 시 수정하면 된다)
  "description": "설명설명", // 확장앱 설명
  "icons": {
    "16": "",
    "48": "",
    "128": ""	// 확장앱 사이트에 등록할 아이콘 경로
  },
  "browser_action": {
    "default_popup": "./index.html",	// 아이콘 클릭시 보여지는 화면
    "default_icon": {
      "16": ""	// 브라우저 툴팁에서 보여질 확장앱 아이콘 경로
    }
  },
  // 권한
  "permissions": [
    "<all_urls>"
  ]
}
 
아이콘
  • 16x16 icon: 익스텐션 페이지의 favicon으로 보여짐
  • 48x48 icon: 익스텐션 관리 페이지 (whale://extensions 혹은 chrome://extensions)에 보여질 아이콘
  • 128x128 icon: 확장앱 스토어, 설치할 때 사용되는 아이콘
 
broswer_action
웨일, 크롬 브라우저 툴팁 (주소창 바로 오른쪽)에 표시된다. 아이콘을 클릭했을 때, 보여지는 화면에 대한 정의를 할 수 있다.
다만 웨일 브라우저의 사이드바에서 동작하는 확장앱을 개발하는 경우 browser_action 대신 sidebar_action 속성을 정의해야 한다. 공식문서
"sidebar_action": {
    "default_page": "sidebar.html",  // 필수
    "default_icon": {                // 필수
        "16": "images/icon16.png"
    },
 
permissions
확장앱 페이지에서 브라우저 API를 사용하기 위해서는 각 API마다 필요한 권한을 정의해야 한다.
 
이렇게 개발한 확장앱을 테스트하기 위해서는 chrome://extensions 페이지에 접속해 확장앱 폴더를 설치하고 디버깅할 수 있다.
notion image
 
그럼 이제 지금까지 만들어 배포한 확장앱을 소개해보도록 하겠습니다.

Google Keep in Sidebar

notion image
처음으로 개발한 아주아주 간단한 확장앱입니다.
확장앱을 런칭할 네이버 웨일 브라우저에는 사이드바라는 기능이 있습니다. 브라우저 창 옆에서 다른 창을 모바일버전으로 띄워 동시에 작업할 수 있는 기능인데요. 이 사이드바에 확장앱을 넣을 수도 있습니다. 물론 사이트도 추가할 수 있었죠. 그래서 스마트폰에서 자주 사용하던 Google Keep(keep.google.com) 주소를 추가해 사용하려 했습니다. 그런데 앱을 설치하라는 팝업이 계속 뜨더군요. 모바일버전으로 열리기 때문에 이런 것이었습니다.(현재는 개선되어 최초1회만 표시되는 것 같아요) 이런 문제를 해결하기 위해 사이드바에 PC환경으로 페이지를 불러오는 확장앱을 만들었습니다. Google Keep 페이지는 반응형이었기 때문에 쉽게 구현이 가능했죠.
 

문제&해결

Google Keep 디자인 개편과 함께 사이드 툴바가 왼쪽에 표시되는데 사이드바 페이지 크기에 따라 메모의 오른쪽 부분이 일부 잘리는 문제가 있었습니다.(사실 구글에서 해결해주면 좋은 문제여서 기다리다가 개선했습니다)
notion image
 
이 문제를 해결하기 위해 content_scripts를 이용했습니다. 처음에는 아예 이 툴바를 없애버렸는데요. 이게 또 필요한 경우가 있더군요. 그래서 상단바에 있는 메뉴버튼(선 세개)를 누르면 이 툴바가 보였다 안보였다 하게 만들어 개선했습니다.
content_scripts 는 웹페이지의 context에서 실행하는 javascript 파일로 표준 DOM(Document Object Model)을 사용하여 브라우저에서 방문한 웹페이지의 세부정보를 읽거나 그것들을 변경할 수 있습니다.
"content_scripts": [ {
      "all_frames": true,
      "js": [ "script.js" ],
      "matches": [ "https://keep.google.com/*" ],
      "run_at": "document_end"
   } ],
위와 같이 manifest에 content_scripts 사용을 명시하여 Google Keep 페이지에서 script.js가 동작하도록 했습니다.
Google Keep 페이지에서 동작할 script 파일은 다음과 같이 작성해줍니다.

if (navigator.userAgent.includes("sidebar")) {
    var sidebar = document.querySelector("body > div.notes-container > div:nth-child(2) > div:nth-child(1)");
    sidebar.style.display = "none";

    var hamburgerBtn = document.querySelector("header > div:nth-child(2) > div:nth-child(1) > div:nth-child(1)");
    hamburgerBtn.style.display = "display";
    hamburgerBtn.onclick = function() { toggleSidebar() };

    var notes = document.querySelector("body > div.notes-container > div:nth-child(2) > div:nth-child(2)");
    notes.style.marginLeft = "0px";
}

function toggleSidebar() {
    console.log('toogle sidebar');
    if (sidebar.style.display == 'none') {
        sidebar.style.display = "block";
    } else {
        sidebar.style.display = "none";
    }
};
 

Blockit - 사이트 차단

notion image
집중을 방해하거나 유해한 웹 사이트를 간단히 차단하세요. 인터넷을 하다가 불필요한 사이트에 접속해 업무에 방해가 된 적이 있나요? 자녀가 부적절한 사이트에 들어갈까 봐 걱정되시나요? 그렇다면, Blockit을 사용해보세요.
 

문제&해결

어느 날 어마어마한 문제가 발생합니다.
문제가 발생한 버전에서는 외부 api를 불러오는 코드가 있었는데요. 개발 시 만들었다가 실제로는 사용하지 않을 기능이기에 없애야 했지만, 남아있는채로 출시했습니다. 그런데 이 api 서버가 Deprecated 되었고, 그 순간 오류를 내뿜으며 브라우저를 완전히 먹통으로 만들었습니다.
notion image
notion image
확인하자마자 이슈가 픽스된 버전의 업데이트를 배포하고 스토어 댓글과 사용자 커뮤니티에 가서 사과를 해야했습니다 :( 혹시 문제를 겪으셨던 분이 이걸 보고계시다면 다시 한 번 사과드립니다.
 
앞으로 서비스를 만들 때 더 책임감을 가지고 신중하게 개발해야 겠다는 생각을 하게 된 계기가 되었습니다.

BreakLock in Sidebar

notion image
기존 오픈소스 게임을 한글화 및 사이드바에서 플레이할 수 있도록 했습니다.
수많은 시도를 통해 올바른 패턴을 유추해내세요. 수많은 시도를 통해 올바른 패턴을 유추해내세요. 사이드바에서 BreakLock을 실행하세요. 점들을 연결해서 올바른 패턴을 찾아내세요. 한 번 시도할 때마다 얼마나 많은 점을 맞췄는지 알려줄 것입니다.
 

T-REX Runner in Sidebar

notion image
Chrome 이스터에그 T-REX Runner 게임을 사이드바에서 즐겨보세요. 크롬의 이스터에그 T-REX RUNNER를 이제 네이버 웨일의 사이드바에서 즐기실 수 있습니다. 사용자 피드백을 반영해 기존 게임 요소들에 더해 특수효과들을 추가하였습니다.
 
 
브라우저 이용 중 불편한 점이나 있었으면 좋겠다고 생각했었던 서비스들을 확장앱으로 만들어 볼 수 있어서 재미있었습니다. 이후 실제 서비스를 배포하여 많은 사용자들이 다운로드해 사용하는 것을 보고 신기하기도 했고, 직접 다양한 피드백들을 받아보고, 이를 반영해 서비스를 개선하는 값진 경험을 할 수 있었습니다.

댓글

guest