브라우저 확장 프로그램 직접 만들기 – 기초 개념부터 실전 예제 프로젝트까지

이 글에서는 브라우저 확장 프로그램(Browser Extension)이 무엇인지, 어떻게 동작하는지, 그리고 직접 만드는 방법까지 알아보겠습니다.

마지막에는 실제로 버튼 클릭 한 번으로 코드 스니펫을 클립보드에 복사해 주는 확장 프로그램을 직접 만들어 볼 것입니다. 정말 재미있는 프로젝트이니 끝까지 따라와 보세요!

이 글을 원활하게 따라오려면 다음 두 가지가 필요합니다.

• 자바스크립트(JavaScript)에 대한 기초적인 이해
• 파이어폭스(Firefox) 또는 크롬 등 아무 브라우저나 하나

브라우저 확장 프로그램이란?

브라우저 확장 프로그램은 브라우저의 기능을 확장하여 웹 서핑 경험을 더욱 풍부하게 만들어 주는 도구입니다.

예를 들어, 여러분이 기기에 설치했을 수 있는 광고 차단기를 생각해 보세요. 웹을 탐색할 때 광고를 차단함으로써 훨씬 쾌적한 브라우징 경험을 제공하죠. 이것이 바로 대표적인 브라우저 확장 프로그램입니다.

기본적인 브라우저 확장 프로그램 작성 방법

이제 아주 간단한 확장 프로그램부터 만들어 보겠습니다.

먼저 새 폴더를 하나 생성하고, 그 안에 manifest.json이라는 파일을 만듭니다.

매니페스트(manifest) 파일이란?

매니페스트 파일은 모든 브라우저 확장 프로그램에 반드시 필요한 파일로, 확장 프로그램의 이름, 버전 등 기본 정보가 담겨 있습니다.

manifest.json 파일 안에 다음 코드를 입력하세요.

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test"
}

확장 프로그램 불러오는 방법

파이어폭스 사용자라면:

주소창에 다음을 입력합니다.

about:debugging#/runtime/this-firefox

그러면 '임시 부가 기능 로드(Load Temporary Add-on)' 옵션이 보일 겁니다. 해당 옵션을 클릭하고 폴더 안의 manifest.json 파일을 선택하세요.

크롬 사용자라면:

주소창에 다음을 입력합니다.

chrome://extensions

• 개발자 모드(Developer Mode)를 활성화합니다.
• '압축해제된 확장 프로그램을 로드합니다(Load unpacked)' 버튼을 클릭하고 확장 프로그램 폴더를 선택합니다.

축하합니다! 확장 프로그램 설치에 성공했습니다. 하지만 지금은 아무 기능도 없는 상태죠. 이제 실질적인 기능을 추가해 보겠습니다. manifest.json 파일을 다음과 같이 수정합니다.

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["main.js"]
    }
  ]
}

위 코드에서는 매니페스트 파일에 콘텐츠 스크립트(content script)를 추가했습니다. 콘텐츠 스크립트는 웹 페이지의 DOM(Document Object Model)을 조작할 수 있으며, 이를 통해 자바스크립트(JS)와 CSS를 웹 페이지에 삽입할 수 있습니다.

"matches"에는 콘텐츠 스크립트가 적용될 도메인과 서브도메인 목록을 지정하고, "js"에는 불러올 자바스크립트 파일 배열을 넣습니다.

이제 같은 폴더 안에 main.js 파일을 생성하고 아래 코드를 추가하세요.

alert("테스트 확장 프로그램이 정상적으로 실행 중입니다")

확장 프로그램을 새로고침한 후 아무 URL이나 방문하면 알림 메시지가 뜨는 것을 확인할 수 있습니다.

참고: 코드를 수정할 때마다 반드시 확장 프로그램을 새로고침(reload)해야 합니다!

브라우저 확장 프로그램 커스터마이징하기

이제 좀 더 재미있는 기능을 추가해 보겠습니다.

방문하는 웹 페이지의 모든 이미지를 내가 원하는 이미지로 바꿔 주는 확장 프로그램을 만들어 보겠습니다.

먼저 현재 폴더에 원하는 이미지 파일을 하나 넣고, main.js 파일을 다음과 같이 수정합니다.

console.log("확장 프로그램이 실행 중입니다");

var images = document.getElementsByTagName('img')

for (elt of images){
   elt.src = `${browser.runtime.getURL("pp.jpg")}`
   elt.alt = '대체 텍스트'
}

여기서 무슨 일이 일어나는지 살펴보겠습니다.

var images = document.getElementsByTagName('img')

이 코드 줄은 웹 페이지에서 img 태그를 가진 모든 요소를 선택합니다.

그다음 for 반복문으로 이미지 배열을 순회하며, runtime.getURL 함수를 사용해 모든 img 요소의 src 속성을 우리 이미지의 URL로 변경합니다.

여기서 pp.jpg는 현재 디렉터리에 있는 이미지 파일의 이름입니다.

이제 콘텐츠 스크립트가 pp.jpg 파일에 접근할 수 있도록 manifest.json 파일을 다음과 같이 수정해야 합니다.

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["main.js"]
    }
  ],
  "web_accessible_resources": [
    "pp.jpg"
  ]
}

확장 프로그램을 새로고침한 후 원하는 URL을 방문해 보세요. 이제 모든 이미지가 현재 작업 디렉터리에 있는 이미지로 변경된 것을 확인할 수 있습니다.

확장 프로그램에 아이콘 추가하기

manifest.json 파일에 다음 코드를 추가합니다.

"icons": {
  "48": "icon-48.png",
  "96": "icon-96.png"
}

툴바 버튼 추가하기

이번에는 브라우저 툴바에 버튼을 배치해 보겠습니다. 사용자는 이 버튼을 통해 확장 프로그램과 상호작용할 수 있습니다.

툴바 버튼을 추가하려면 manifest.json 파일에 다음 코드를 넣으세요.

"browser_action": {
  "default_icon": {
    "19": "icon-19.png",
    "38": "icon-38.png"
  }
}

모든 이미지 파일은 현재 디렉터리에 있어야 합니다.

확장 프로그램을 새로고침하면 브라우저 툴바에 우리 확장 프로그램의 아이콘이 나타날 겁니다.

툴바 버튼에 클릭 이벤트 리스너 추가하기

버튼을 클릭했을 때 특정 동작을 실행하고 싶다면 어떻게 해야 할까요? 예를 들어 버튼을 누를 때마다 새 탭을 열어 보겠습니다.

이를 위해 manifest.json 파일에 다음 코드를 추가합니다.

"background": {
  "scripts": ["background.js"]
},
"permissions": [
  "tabs"
]

그런 다음 현재 작업 디렉터리에 background.js라는 새 파일을 생성하고 다음 코드를 작성합니다.

function openTab(){

    var newTab = browser.tabs.create({
        url:'https://twitter.com/abhilekh_gautam',
        active:true
    })
}

browser.browserAction.onClicked.addListener(openTab)

이제 확장 프로그램을 새로고침하세요!

이후 버튼을 클릭할 때마다 openTab 함수가 호출되어 새 탭이 열립니다. active 키가 true로 설정되면 새로 열린 탭이 바로 현재 탭으로 전환됩니다.

백그라운드 스크립트에서는 브라우저가 제공하는 다양한 API를 활용할 수 있습니다. API에 대해 더 알고 싶다면 관련 문서(Javascript APIs)를 참고하세요.

이제 브라우저 확장 프로그램의 기본기를 익혔으니, 개발자들이 일상에서 실제로 유용하게 쓸 수 있는 확장 프로그램을 만들어 보겠습니다.

실전 프로젝트: 스택오버플로우 코드 복사 버튼

자, 이제 실생활에서 정말 유용한 것을 만들어 보겠습니다. 스택오버플로우(StackOverflow)에서 코드 스니펫을 클릭 한 번으로 복사할 수 있는 확장 프로그램입니다. 웹 페이지의 코드 블록 옆에 'Copy' 버튼을 추가해 클릭 시 코드가 클립보드에 저장되도록 할 겁니다.

동작 미리보기

먼저 새 폴더를 생성하고, 그 안에 manifest.json 파일을 만듭니다.

파일에 다음 코드를 입력하세요.

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "copy code",
  "content_scripts": [
    {
      "matches": ["*://*.stackoverflow.com/*"],
      "js": ["main.js"]
    }
  ]
}

content_scripts 안의 matches 값을 잘 살펴보세요. 이 확장 프로그램은 스택오버플로우의 도메인과 서브도메인에서만 동작합니다.

이제 같은 폴더에 main.js라는 자바스크립트 파일을 하나 더 만들고 다음 코드를 추가합니다.

var arr = document.getElementsByClassName("s-code-block")

for(let i = 0 ; i < arr.length ; i++){
  var btn = document.createElement("button")
  btn.classList.add("copy_code_button")
  btn.appendChild(document.createTextNode("Copy"))
  arr[i].appendChild(btn)
  // 버튼 스타일링
  btn.style.position = "relative"

  if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
    btn.style.left = `${arr[i].offsetWidth - 70}px`

  else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
    btn.style.left = `${arr[i].offsetWidth - 200}px`
  else
    btn.style.left = `${arr[i].offsetWidth - 150}px`

  if(arr[i].scrollHeight === arr[i].offsetHeight)
    btn.style.bottom = `${arr[i].offsetHeight - 50}px`
  else
    btn.style.bottom = `${arr[i].scrollHeight - 50}px`
  // 버튼 스타일링 끝

  console.log("Appended")
}

먼저 클래스명이 s-code-block인 모든 요소를 선택했습니다. 왜냐하면 스택오버플로우 사이트를 검사(inspect)해 본 결과, 모든 코드 스니펫이 이 이름의 클래스 안에 들어 있었기 때문입니다.

그다음 해당 요소들을 순회하면서 각각 버튼을 추가하고, 마지막으로 버튼의 위치와 스타일을 적절히 조정합니다 (아직 완벽한 스타일링은 아니지만 시작으로 충분합니다).

앞서 설명한 과정대로 확장 프로그램을 로드하고 스택오버플로우에 접속하면 코드 블록에 Copy 버튼이 나타나는 것을 확인할 수 있습니다.

버튼에 기능 연결하기

이제 버튼을 클릭했을 때 전체 코드 스니펫이 클립보드에 복사되도록 만들 차례입니다. main.js 파일에 다음 코드를 추가하세요.

var button = document.querySelectorAll(".copy_code_button")
button.forEach((elm)=>{
  elm.addEventListener('click',(e)=>{
    navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
    alert("클립보드에 복사되었습니다")
  })
})

먼저 querySelectorAll로 사이트에 추가된 모든 버튼을 선택합니다. 그다음 버튼이 클릭될 때 발생하는 이벤트를 감지(listen)합니다.

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

위 코드 줄이 코드를 클립보드에 복사하는 역할을 합니다. 스니펫이 복사될 때마다 '클립보드에 복사되었습니다'라는 알림으로 사용자에게 알려주면 완성입니다!

마치며

웹 확장 프로그램은 다양한 방식으로 활용할 수 있는 강력한 도구입니다. 이 글이 여러분이 직접 나만의 확장 프로그램을 만드는 데 도움이 되길 바랍니다.

전체 코드는 GitHub 저장소에서 확인할 수 있습니다. 더 좋은 스타일링이나 클립보드 히스토리 같은 새로운 기능을 구현했다면 언제든지 풀 리퀘스트(Pull Request)를 보내주세요.

즐거운 코딩 되세요!