[javascript] 콘텍스트 메뉴를 사용한 문서 검색 엔진 구현하기

11 Dec 2023

javascript

인터넷을 사용하다 보면 종종 콘텍스트 메뉴(context menu)를 본적이 있을 겁니다. 일반적으로 마우스 우클릭을 하면 나타나는 메뉴인데, 우리는 이를 활용하여 문서 검색 엔진을 구현해 볼 것입니다. 이를 통해 사용자는 선택한 텍스트를 바로 검색할 수 있게 될 것입니다.

콘텍스트 메뉴 등록하기

HTML 구조

먼저, HTML 파일에 우리가 사용할 콘텍스트 메뉴를 정의해야 합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>콘텍스트 메뉴를 통한 문서 검색</title>
  </head>
  <body>
    <div>
      <p>검색하려는 텍스트를 선택하고 마우스 우클릭하세요.</p>
    </div>

    <!-- 콘텍스트 메뉴 정의 -->
    <div id="customContextMenu">
      <menu type="context" id="contextMenu">
        <menuitem label="선택한 텍스트 검색" onclick="searchSelectedText()"></menuitem>
      </menu>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>

위의 코드에는 콘텍스트 메뉴를 정의한 부분이 있습니다. 여기서는 선택한 텍스트 검색을 선택할 때 호출될 searchSelectedText 함수를 정의하였습니다.

JavaScript 구현

이제 JavaScript 코드를 작성하여 searchSelectedText 함수를 구현해보겠습니다.

// index.js
function searchSelectedText() {
  let selectedText = window.getSelection().toString();
  if (selectedText) {
    window.open("https://search-engine.com?q=" + selectedText, "_blank");
  }
}

searchSelectedText 함수는 현재 선택된 텍스트를 가져와서, 만약 선택된 텍스트가 있다면 새 창을 열어 해당 텍스트를 검색어로 하는 검색 엔진 페이지를 보여줍니다.

결과 테스트

위의 코드를 통해 만들어진 페이지를 열고 테스트를 해봅시다. 웹 페이지에서 마우스로 텍스트를 선택한 후 마우스 우클릭을 하면 우리가 만든 콘텍스트 메뉴가 나타나서 선택한 텍스트 검색을 클릭하면 새 탭에서 해당 텍스트를 검색하는 페이지가 열리는 것을 확인할 수 있을 것입니다.

이제 여러분도 자신만의 문서 검색 엔진을 콘텍스트 메뉴를 활용하여 만들 수 있게 되었습니다!