3단계로 처음부터 Chrome 확장 프로그램을 만드는 방법

by

브라우저 확장 프로그램은 브라우저의 기능성을 끌어올리는 일종의 플러그인입니다. 브라우저가 기본적으로 제공하는 기능 외에도 추가적인 기능들을 덧붙여 사용자 경험을 향상시키는 역할을 합니다.

그렇다면 확장 프로그램이 웹 애플리케이션에 비해 어떤 이점을 가질까요? 확장 프로그램은 브라우저 API 전반에 걸쳐 접근 권한을 가지므로 브라우저를 더욱 세밀하게 제어할 수 있다는 장점이 있습니다.

확장 프로그램의 활용 범위는 다음과 같습니다.

✅ 브라우저와 탭의 사용자 인터페이스를 원하는 대로 맞춤화할 수 있습니다.

✅ 브라우저 작업을 더욱 효율적으로 수행할 수 있도록 새로운 단축키를 추가할 수 있습니다.

✅ 브라우저 활동 및 웹 탐색을 면밀히 모니터링할 수 있습니다.

구글 크롬은 사용자들이 자유롭게 크롬 확장 프로그램을 게시하고 공유할 수 있는 웹 스토어를 운영하고 있습니다. 크롬 확장 프로그램 개발이 복잡하고 어렵다고 생각할 수 있지만, 실제로는 HTML, CSS, JavaScript와 같은 기본적인 웹 기술만으로 충분합니다.

이 튜토리얼에서는 JavaScript와 같은 웹 기술을 사용하여 크롬 확장 프로그램을 만드는 과정을 자세히 알아볼 것입니다!

크롬 확장 프로그램 제작

본 튜토리얼에서는 브라우저 사용 기록을 분석하고 팝업 창을 통해 사용자에게 보여주는 크롬 확장 프로그램을 제작하는 방법을 단계별로 설명합니다.

필수 파일

크롬 확장 프로그램을 제작하는 데 반드시 필요한 파일은 단 하나, 바로 manifest.json 파일입니다. 나머지 코드는 웹 애플리케이션을 개발하는 과정과 거의 동일합니다.

Manifest.json 파일 생성

manifest.json 파일은 확장 프로그램의 구성과 작동 방식을 정의하는 핵심 파일입니다. 아래는 일반적으로 manifest.json 파일이 어떻게 구성되는지에 대한 예시입니다.

{
  "manifest_version": 3,
  "name": "History",
  "description": "View Browsing History",
  "version": "0.1",
  "action": {
    "default_popup": "index.html"
  }
}

현재 최신 버전의 매니페스트 파일은 v3이며, 크롬 개발자 문서에 따르면 확장 프로그램의 보안, 개인 정보 보호 및 성능을 향상시키고 서비스 워커 및 프로미스와 같은 최신 웹 기술을 활용할 수 있도록 지원합니다.

매니페스트 파일에서 action 속성을 주목해야 합니다. 이 속성은 사용자가 확장 프로그램 아이콘을 클릭했을 때 팝업으로 표시할 HTML 파일을 정의합니다. default_icon 속성을 사용하여 기본 확장 프로그램 아이콘을 설정할 수도 있습니다.

애플리케이션 개발

이제 사용자에게 팝업으로 표시될 실제 애플리케이션을 구축할 차례입니다. 이 부분은 확장 프로그램 자체와는 독립적으로, 일반적인 웹 애플리케이션 개발과 유사합니다.

가장 먼저, 매니페스트 파일의 default_popup 속성에 지정할 HTML 파일을 생성해야 합니다. 이 튜토리얼에서는 index.html 파일을 확장 프로그램의 진입점으로 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome Extension</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
    <h2>Browsing History</h2>
    <ul class="list"></ul>
    <script src="./app.js"></script>
</body>
</html>

팝업 창의 시각적인 스타일을 위해 외부 스타일 시트를 연결했습니다. 또한 확장 프로그램의 핵심 기능을 구현하기 위한 JavaScript 파일도 연결되어 있습니다.

function searchHistory() {
    chrome.history.search({
        text: '',
        startTime: new Date("2023-10-01").getMilliseconds()
    }, (results) => {
        for (const result of results) {
            let liItem = document.createElement("li")
            let link = document.createElement("a")
            link.innerText = result.title
            link.href = result.url
            liItem.appendChild(link)
            document.querySelector(".list").appendChild(liItem)
        }
    })
}

document.addEventListener("DOMContentLoaded", () => {
    searchHistory()
})

이 JavaScript 파일은 Chrome의 History API를 사용하여 브라우저 사용 기록을 가져와 팝업 창에 목록 형태로 표시합니다. 사용자가 확장 프로그램 아이콘을 클릭하면 DOMContentLoaded 이벤트가 발생하고, searchHistory 함수가 호출되어 실제 코드가 실행됩니다.

History API의 search 메서드는 검색 텍스트를 인자로 받습니다. 이 인자를 비워 두면 모든 사용 기록이 반환됩니다.

startTime 인자를 사용하면 특정 시작 시간 이후의 기록만 필터링하여 가져올 수 있습니다. 예를 들어 startTime을 일주일 전으로 설정하면 지난주 사용 기록만 표시됩니다. 이 인자는 선택 사항이며, 기본값은 지난 24시간입니다.

API는 콜백 함수를 통해 검색 결과를 배열 형태로 전달합니다. 이 배열을 순회하여 사용 기록 목록을 만들 수 있습니다.

for (const result of results) {
    let liItem = document.createElement("li")
    let link = document.createElement("a")
    link.innerText = result.title
    link.href = result.url
    liItem.appendChild(link)
    document.querySelector(".list").appendChild(liItem)
}

Chrome History API를 사용하기 위해서는 매니페스트 파일에 history 권한을 추가해야 합니다.

{
    "manifest_version": 3,
    "name": "History",
    "description": "View Browsing History",
    "version": "0.1",
    "action": {
      "default_popup": "index.html"
    },
    "permissions": [
        "history"
    ]
}

확장 프로그램 실행

이제 크롬 확장 프로그램을 실행하는 간단한 단계만 남았습니다. 크롬 브라우저의 주소창 옆에 있는 점 세 개 아이콘을 클릭하고 “확장 프로그램” 항목 아래의 “확장 프로그램 관리”를 선택합니다. 또는 주소창에 chrome://extensions/를 직접 입력해도 됩니다.

“개발자 모드” 스위치가 꺼져 있다면 활성화합니다.

“압축해제된 항목 로드” 버튼을 클릭하고 방금 생성한 확장 프로그램 폴더를 선택합니다. 확장 프로그램이 목록에 표시됩니다.

확장 프로그램을 실행하려면 크롬 주소창 옆의 확장 프로그램 아이콘을 클릭합니다.

축하합니다! 간단한 크롬 확장 프로그램을 성공적으로 개발했습니다. 더 많은 예제 코드를 살펴보고 싶다면 공식 구글 크롬 확장 프로그램 샘플 저장소를 참고하세요.

크롬 확장 프로그램을 크롬 웹 스토어에 게시하려면 다음 지침에 따라 등록하고 일회성 비용을 지불해야 합니다.

마무리

웹 애플리케이션 개발의 기본 지식이 있다면 크롬 확장 프로그램을 제작하는 것은 매우 쉽습니다. 매니페스트 파일을 생성하는 것만으로도 당신의 애플리케이션은 크롬 확장 프로그램으로 변신할 수 있습니다.

이제 크롬 확장 프로그램을 만드는 방법을 익혔으니, 개발자들에게 유용한 최고의 크롬 확장 프로그램들을 살펴보시기 바랍니다.