백그라운드 스크립트 vs 콘텐츠 스크립트 - maeng2418/zzik-meok GitHub Wiki

백그라운드 스크립트

1. 실행 환경:

• 확장 프로그램의 전체 생명주기 동안 하나의 인스턴스로 실행됩니다.
• 사용자가 탭을 열거나 닫아도 계속 실행됩니다.

2. 권한:

• 확장 프로그램의 모든 권한에 접근할 수 있습니다.
• chrome.* API를 완전히 사용할 수 있습니다(예: chrome.tabs, chrome.storage, chrome.cookies 등).

3. 용도:

• 장기 실행 작업, 이벤트 리스닝, 상태 관리에 적합합니다.
• 브라우저 이벤트(탭 열기/닫기, 북마크 변경 등) 모니터링에 사용됩니다.
• 확장 프로그램의 "뇌" 역할을 합니다.

4. DOM 접근:

• 웹 페이지의 DOM에 직접 접근할 수 없습니다.
• 자체 전용 컨텍스트에서 실행됩니다.

5. manifest.json 설정:

{
  "background": {
    "service_worker": "background.js"
  }
}

}

콘텐츠 스크립트

1. 실행 환경:

• 특정 웹 페이지 내에서 실행됩니다.
• 매칭되는 페이지가 로드될 때마다 새 인스턴스가 생성됩니다.
• 페이지마다 독립적인 인스턴스가 실행됩니다.

2. 권한:

• 제한된 chrome.* API만 접근 가능합니다.
• chrome.runtime.sendMessage를 통해 백그라운드 스크립트와 통신할 수 있습니다.

3. 용도:

• 웹 페이지와 직접 상호작용하는 작업에 적합합니다.
• DOM 조작, 이벤트 리스닝, 웹 페이지 내용 읽기/수정 등을 수행합니다.

4. DOM 접근:

• 웹 페이지의 DOM에 완전히 접근할 수 있습니다.
• 페이지 내의 JavaScript 환경과 격리되어 실행됩니다(별도의 JavaScript 컨텍스트).

5. manifest.json 설정:

{
  "content_scripts": [
    {
      "matches": ["*://*.example.com/*"],
      "js": ["content.js"]
    }
  ]
}

통신 방법

백그라운드 스크립트와 콘텐츠 스크립트는 메시지 패싱(Message Passing)을 통해 통신합니다:

// 콘텐츠 스크립트에서 백그라운드로 메시지 전송
chrome.runtime.sendMessage({greeting: "안녕하세요!"}, function(response) {
  console.log("응답 수신:", response);
});

// 백그라운드 스크립트에서 메시지 수신
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("메시지 수신:", request);
    sendResponse({farewell: "안녕히 가세요!"});
  }
);

이렇게 두 스크립트는 각각 다른 환경에서 서로 다른 역할을 수행하며, 확장 프로그램의 구조를 형성합니다.