툴바에 버튼 추가하기

홈 ❯ 구현 예제

툴바 버튼은 확장앱이 사용할 수 있는 주요 UI 구성 요소 중 하나입니다. 툴바 버튼은 브라우저 상단의 주소창 옆에 각 확장앱 아이콘으로 표시됩니다. 사용자가 아이콘을 클릭하면 다음 두 가지 중 하나가 발생할 수 있습니다.

아이콘에 대한 팝업을 지정한 경우, 팝업이 표시됩니다. 팝업은 HTML, CSS 및 JavaScript로 구현한 웹 페이지로 일시적 대화창입니다.
팝업을 지정하지 않은 경우 클릭 이벤트가 생성되어 코드에서 수신하고 이에 대한 응답으로 다른 종류의 작업을 수행 할 수 있습니다.

이러한 종류의 버튼을 정의하는 방법을 브라우저 액션 (Browser action) 이라고 합니다.

MV3에서는 브라우저 액션(browserAction)/페이지 액션(pageAction)이 액션(action)으로 통합되었습니다.

매니페스트 설정

매니페스트 파일에 아래와 같이 action 항목을 설정합니다.

{
  "manifest_version": 3,
  "name": "button-demo",
  "description": "툴바 버튼 예제",
  "version": "1.0",
  "action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

아이콘 이미지는 PNG, GIF, JPG, BMP, ICO 등의 형식을 사용할 수 있으며 실제 이미지 크기가 더 크더라도 가로, 세로 16픽셀 크기에 맞추어 자동으로 조정됩니다. 그러나 최적의 결과를 위해서는 16의 배수 단위 정사각형 크기 이미지로 지정할 것을 권장합니다.

버튼 클릭 시 동작 지정

위 예제와 같은 매니페스트 설정으로 툴바에 버튼은 표시되겠지만 이 상태에서는 버튼을 클릭하면 기본 메뉴만 표시될 뿐 다른 동작은 수행되지 않습니다. 여기에 백그라운드 스크립트를 추가하고 whale.action.onClicked 이벤트 핸들러를 이용해 클릭 시 새 탭을 열고 네이버 뉴스로 이동하게 만들어 보겠습니다.

아래와 같이 background 항목을 추가하고:

"background": {
  "service_worker": "sw.js"
}

다음과 같이 sw.js 의 내용을 작성합니다.

whale.action.onClicked.addListener(() => {
    whale.tabs.create({
        url: `https://news.naver.com/`
    });
})

이렇게 작성하면 브라우저 액션 버튼을 클릭할 때 action.onClicked 이벤트 핸들러가 동작하고, whale.tabs.create() 함수를 이용해 지정한 URL을 새 탭으로 여는 동작을 수행합니다.

팝업 추가하기

매니페스트 설정의 action 아래에 default_popup 항목을 추가하고 HTML 페이지 경로를 지정합니다.이제 툴바 버튼을 클릭하면 팝업창이 생성되어 지정한 페이지가 표시되는 것을 확인할 수 있습니다.

{
  "manifest_version": 3,
  "name": "button-demo",
  "description": "툴바 버튼 예제",
  "version": "1.0",
  "action": {
    "default_popup": "popup/index.html",
    "default_icon": {
        "16": "icons/page-16.png",
        "32": "icons/page-32.png"
    }
  }
}

default_popup의 파일 경로는 확장앱 폴더를 기준으로 상대 경로로 작성해야 합니다. 확장앱 폴더보다 상위의 페이지는 접근할 수 없고, http(s):// 혹은 file:/// 등 프로토콜을 포함한 외부 리소스 주소도 지정할 수 없습니다.

첫 페이지를 온라인 웹 사이트 주소로 만들고 싶으면 확장앱 내부에 적당한 HTML 파일을 두고 원하는 웹 주소로 이동(Redirect)하도록 구현할 수도 있습니다.

← 콘텍스트 메뉴 사용하기 테스트와 디버깅 →