Featured image of post Manifest V3를 사용하여 브라우저 확장 개발Featured image of post Manifest V3를 사용하여 브라우저 확장 개발
소프트웨어

Manifest V3를 사용하여 브라우저 확장 개발

Chrome의 Manifest V3 표준을 준수하는 최신 브라우저 확장 프로그램을 구축하기 위한 초보자 가이드입니다.

  1. 홈
  2. Softwares
  3. Manifest V3를 사용하여 브라우저 확장 개발

Manifest V3는 이제 Google Chrome 확장 프로그램을 구축하기 위한 공식 필수 사양입니다. Manifest V2의 지원이 중단됨에 따라 개발자는 백그라운드 처리를 위해 비영구 서비스 워커를 채택하고 선언적 네트 요청 모델에 적응해야 합니다. 이 가이드에서는 Manifest V3의 핵심 아키텍처 변화를 설명하고 호환 확장을 설정하는 간단한 연습을 제공합니다.

1. Manifest V2에서 V3으로 기본 전환

MV3(Manifest V3)는 브라우저 확장 프로그램을 더욱 안전하고 개인정보를 존중하며 성능 좋게 만들기 위해 설계되었습니다.

1) 백그라운드 페이지를 서비스 워커로 전환하기

MV2에서는 확장 프로그램이 지속적인 백그라운드 페이지(background.js)를 실행했습니다. MV3에서는 백그라운드 스크립트가 서비스 워커로 대체되었습니다. 서비스 워커는 임시적입니다. 브라우저는 시스템 메모리를 절약하기 위해 유휴 상태일 때 서비스 워커를 종료합니다. 메모리의 변수는 지속되지 않으므로 개발자는 chrome.storage API를 사용하여 애플리케이션 상태를 저장해야 합니다.

2) declarativeNetRequest을 사용한 네트워크 차단

이전 webRequest API에서는 확장 프로그램이 JavaScript를 사용하여 들어오고 나가는 모든 네트워크 트래픽을 가로채고 수정할 수 있었습니다. 보안 문제로 인해 MV3는 declarativeNetRequest API를 시행합니다. 모든 요청에 ​​대해 사용자 지정 논리를 실행하는 대신 확장 프로그램은 브라우저가 기본적으로 처리하는 선언적 차단 규칙을 등록합니다.

3) 원격 호스팅 코드 금지

보안 감사를 위해 확장 프로그램은 더 이상 외부 JavaScript 파일을 다운로드하고 실행하는 것이 허용되지 않습니다(예: CDN에서 jQuery 또는 Google Analytics 로드). 확장에 의해 실행되는 모든 코드는 확장 패키지 내에 로컬로 번들되어야 합니다.

2. 기본 매니페스트 V3 파일 구조

다음은 팝업 UI를 여는 확장에 대한 부트스트랩 구현입니다.

1) 구성 파일: manifest.json

메타데이터, 권한, 백그라운드 서비스 작업자 및 사용자 인터페이스 작업을 정의합니다.

{
  "manifest_version": 3,
  "name": "NetGuide MV3 Sample",
  "version": "1.0.0",
  "description": "A bootstrap extension demonstrating Manifest V3 features.",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2) 배경 스크립트: background.js

필요할 때 응답하는 이벤트 중심 핸들러를 구현합니다.

// Register default state on installation
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ extensionActive: true });
  console.log("Extension installed and initialized.");
});

// React to tab activation changes
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    if (result.extensionActive) {
      console.log(`Active tab shifted to: ${activeInfo.tabId}`);
    }
  });
});

3) UI: popup.html 및 popup.js

HTML 인터페이스를 디자인하고 로컬 팝업 스크립트를 로드합니다.

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { width: 180px; font-family: sans-serif; padding: 10px; }
    button { width: 100%; padding: 6px; background: #2563eb; color: white; border: none; border-radius: 4px; }
  </style>
</head>
<body>
  <h4>NetGuide Tool</h4>
  <button id="action-btn">Check Status</button>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('action-btn').addEventListener('click', () => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    alert(`Extension active status: ${result.extensionActive}`);
  });
});

3. 개발 팁 및 디버깅

  • 유휴 시간 초과 처리: 유휴 상태에서는 MV3 서비스 작업자가 실행을 중지하므로 setInterval과 같은 표준 Javascript 타이머가 실패합니다. chrome.alarms API를 사용하여 정기적인 프로세스를 예약합니다.
  • 콘솔 감사: 확장 프로그램을 로드하려면 Google Chrome에서 chrome://extensions을 열고 ‘개발자 모드’를 활성화한 다음 ‘압축 해제된 로드’를 클릭하고 개발 폴더를 선택하세요. “뷰 검사: 서비스 워커” 링크를 클릭하여 배경 메시지를 확인하세요.

4. 결론: Manifest V3 탐색

Manifest V3으로 전환하면서 처음에는 특정 API에 대한 제한(광고 차단기 및 보안 도구에 영향을 줌)이 도입되었지만 플랫폼은 안정화되었습니다. MV3에서 확장 기능을 구현하면 플러그인이 최신 브라우저 보안 표준을 준수하여 사용자에게 안전하고 최적화된 탐색 환경을 제공할 수 있습니다.

©2022 - 2026 Kaisekukun