QAing(4), contentScript 보여주기

크롬 익스텐션의 Background는 익스텐션이 백그라운드에서 실행할 수 있게 해주는 스크립트나 서비스 워커를 말한다. 이는 익스텐션의 핵심 로직을 처리하고, 브라우저 이벤트를 모니터링하는 데 사용된다. Background 스크립트는 익스텐션이 활성화되어 있을 때 항상 실행되며, 사용자가 직접적으로 상호작용하지 않아도 다양한 작업을 수행할 수 있다.

웹팩을 설정하고 contentScript에 코드를 작성해도 익스텐션 버튼을 누르면 contentScript가 바로 나타나지 않을 것이다. 그럴 때에는

이럴 때에는 chrome.action.onClicked.addListener를 사용해야 한다.

chrome.action과 같은 기능은 Browser API 또는 Web Extension API의 일부로 분류되는데, 이러한 API들은 웹 브라우저의 기능을 확장하거나, 브라우저와 상호 작용하는 익스텐션(확장 프로그램)을 개발할 때 사용된다.

chrome.action API는 크롬 익스텐션의 아이콘을 Google Chrome 툴바에 제어할 수 있게 해줍니다. 이 API를 통해, 익스텐션의 아이콘을 사용자가 쉽게 접근하고 조작할 수 있게 할 수 있다. 예를 들어, 특정 사이트에서만 익스텐션이 활성화되도록 하거나, 익스텐션의 아이콘을 클릭했을 때 특정 동작을 수행하도록 설정할 수 있다.

(예시 코드)

chrome.action.onClicked.addListener((tab) => {
  console.log('현재 탭의 URL:', tab.url)
  chrome.storage.local.get(['isActive'], function (result) {
    const toggleActive = !result.isActive

    chrome.storage.local.set({ isActive: toggleActive })

    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      console.log(tabs)
      if (toggleActive) {
        chrome.scripting.executeScript({
          target: { tabId: tab.id },
          files: ['contentScript.js'],
        })}
      if (!toggleActive) {
        chrome.tabs.remove(tab.id, () => {
          chrome.storage.local.set({ isActive: false })
          })
      }
    })
  })
})

1️⃣ chrome.action.onClicked.addListener

크롬 확장의 아이콘이 클릭될 때마다 실행되는 이벤트 리스너를 등록합니다.

2️⃣ (선택)chrome.storage.local 상태를 조회합니다

이는 on/off를 하기 위해서 사용하는 코드이다. 만약 options를 사용한다 던지 탭을 이동할 때 상태값을 저장 할 필요가 없다면 단순히 변수에 저장해서 사용해도 된다.

3️⃣ chrome.scripting.executeScript

특정 탭에 자바스크립트 코드나 외부 스크립트 파일을 프로그래매틱하게 실행할 수 있게 해준다. 이 API를 사용하여 확장 프로그램이 웹 페이지의 콘텐츠와 상호작용하거나 페이지에 동적으로 스크립트를 주입하여 변경을 적용할 수 있다.

chrome.scripting.executeScript 함수는 다음과 같은 매개변수를 받는다.

target: 스크립트를 실행할 탭의 ID와 옵션으로 프레임 ID를 포함하는 객체입니다.
files: 실행할 외부 스크립트 파일의 경로를 문자열 배열로 지정합니다.
func: 직접 실행할 함수입니다. files 매개변수가 지정되어 있지 않을 때 사용됩니다.
args: func 매개변수로 전달된 함수에 인자로 전달할 값들의 배열입니다.

chrome.scripting.executeScript({
  target: { tabId: tab.id },
  files: ['contentScript.js']
});

이 API를 사용하기 위해서는 manifest.json 파일에 scripting 권한과 스크립트 파일이나 함수에서 접근할 웹 페이지의 호스트 권한이 필요하다.

  "permissions": ["tabs", "scripting", "storage"],