콘텍스트 메뉴 사용하기

여기서는 whale.contextMenus.* 메소드와 이벤트를 활용하여 브라우저의 콘텍스트 메뉴를 사용하는 방법을 살펴보겠습니다.

콘텍스트 메뉴란?

일반적으로 브라우저에서 웹 페이지의 내용을 마우스 오른쪽 버튼으로 클릭하면 콘텍스트 메뉴가 나타납니다. 사용중인 플랫폼에 따라 다양한 키보드 단축키를 사용하여 콘텍스트 메뉴를 실행 할 수도 있습니다. 콘텍스트 메뉴 API를 사용하여 이 메뉴의 항목을 추가, 수정할 수 있습니다. 또한 특정 유형의 미디어에서만 콘텍스트 메뉴 항목이 표시되도록 제한 할 수도 있습니다.

콘텍스트 메뉴 수정하기

매니페스트 파일의 permissions 항목에 contextMenus를 추가해야 합니다.

{
"name": "Context Menu Extension",
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon-small.png", // for contextMenu
"48": "icon-medium.png",
"128": "icon-large.png",
}
}

특히 icons 항목에서 정의한 16x16 크기의 아이콘은 추가되는 콘텍스트 메뉴 항목에도 표시되므로 꼭 정의할 것을 권장합니다.

콘텍스트 메뉴 아이템 추가

whale.contextMenus.create() 함수를 사용하여 콘텍스트 메뉴에 항목을 추가할 수 있습니다. 함수의 인자로 콘텍스트 메뉴에 추가되는 내용을 전달합니다. 예를 들어, 선택된 문자열에 마우스 우클릭을 하는 경우에만 나타나는 콘텍스트 항목이고, 이 항목을 클릭했을 때 선택된 문자열을 네이버 검색에 연동하는 기능을 구현한다고 가정하면, 아래와 같은 코드를 작성할 수 있습니다.

콘텍스트 메뉴를 추가하기 위해서는 background.js 파일을 아래와 같이 작성합니다.

whale.contextMenus.create({
title: `%s 검색하기`,
contexts: [`selection`],
onclick: searchText
});

whale.contextMenus.create() 함수의 인자에 대해서 자세히 살펴보자면:

  • title 은 콘텍스트 메뉴 새로운 항목의 제목을 정의합니다. %s로 표시된 부분에는 선택된 문자열이 나타납니다. 예를 들어, “웨일 브라우저”라는 문자열을 선택했다면, 콘텍스트 메뉴에는 “웨일 브라우저 찾아보기” 가 항목으로 보여집니다.
  • contexts 는 콘텍스트 메뉴의 항목이 노출되는 대상에 대한 정의입니다. image, video, page, link, editable 와 같은 값이 올 수 있으며, 모든 대상에 대해서 콘텍스트 메뉴 항목을 노출하고자 한다면 all 을 추가하면 됩니다.
  • 마지막으로 onclick은 해당 항목이 클릭되었을 때 동작을 정의합니다. 위 예제에서는 searchtext() 함수가 호출될 것입니다.

콘텍스트 메뉴 항목이 클릭되었을 때 처리

위 예제에서 콘텍스트 메뉴가 선택되면 onclick 콜백에 연결된 searchtext() 함수가 실행됩니다.

function searchText(info) {
const myQuery = encodeURI(`https://search.naver.com/search.naver?query=${info.selectionText}`);

whale.tabs.create({
url: myQuery
});
}

이 콜백 함수는 OnClickData 형식의 인자를 넘겨줍니다. 사용자가 마우스 오른쪽 클릭으로 선택한 대상에 대한 다양한 정보를 넘겨 받습니다. 위 예제에서는 info 라는 인자로 넘겨 받아 사용자가 선택한 문자열(info.selectionText)을 네이버 검색에 연동하였습니다.

방문기록 다루기 테스트와 디버깅