Pomodoro 타이머 예를 사용하여 매니페스트 Vo VA 단계별 가이드에서 Chrome 확장 프로그램을 업데이트하는 방법-JS 튜토리얼-php.cn

Pomodoro 타이머 예를 사용하여 매니페스트 Vo VA 단계별 가이드에서 Chrome 확장 프로그램을 업데이트하는 방법

WBOY

풀어 주다： 2024-08-30 18:34:12

원래의

451명이 탐색했습니다.

Google이 Manifest V2에 대한 지원을 단계적으로 중단했기 때문에 Chrome 확장 프로그램을 Manifest V2에서 Manifest V3으로 업데이트하는 것은 개발자에게 중요한 단계입니다. 이 기사에서는 원래 Manifest V2로 구축된 Pomodoro Timer 확장을 최신 Manifest V3 표준으로 업그레이드하는 과정을 안내합니다.

내 이야기

4년 전에 공짜로 만든 Pomodoro Timer 확장 프로그램이 있었는데 Google로부터 Manifest를 업데이트해야 한다는 알림을 받았습니다.

포모도로 타이머의 원래 버전은 주기 종료 알림으로 T-Rex의 포효를 포함하여 제가 직접 디자인한 것입니다. 신기하고 재밌었는데 24명이 사용하는 걸 보고 깜짝 놀랐어요.

다음과 같이 생겼습니다.

How to Update a Chrome Extension from Manifest Vo VA Step-by-Step Guide Using a Pomodoro Timer Example

제 아내가 최근 디자인을 배우기 시작했는데 매니페스트를 업데이트해야 해서 아내에게 디자인을 새롭게 해달라고 부탁했습니다. 결과는 글 마지막에 있습니다. 스포일러: 정말 잘 된 것 같아요.

Manifest V3으로 업그레이드해야 하는 이유는 무엇입니까?

Manifest V3에는 Chrome 확장 프로그램의 개인 정보 보호, 보안 및 성능 향상을 목표로 하는 몇 가지 주요 변경 사항이 도입되었습니다. 이러한 변경 사항은 다음과 같습니다.

서비스 워커: 백그라운드 페이지가 서비스 워커로 대체되며, 지속적으로 실행되지 않기 때문에 더 효율적입니다.
보안 강화: 권한 범위가 줄어들고 declarativeNetRequest API가 도입되어 네트워크 요청을 관리할 수 있습니다.
향상된 성능: 확장 프로그램이 브라우저 리소스와 상호 작용하는 방식을 최적화함으로써 V3는 더 나은 리소스 관리를 보장합니다.

1단계: 핵심 차이점 이해

업데이트를 시작하기 전에 Manifest V2와 V3 간의 주요 변경 사항을 이해하는 것이 중요합니다.

백그라운드 스크립트: V2에서는 백그라운드 스크립트가 지속적으로 실행되었습니다. V3에서는 필요할 때만 실행되는 서비스 워커로 대체됩니다.
권한: Manifest V3에서는 모든 권한을 명시적으로 선언해야 하며 특정 권한은 더 이상 사용되지 않거나 대체되었습니다.
API 변경 사항: 일부 API가 제거되거나 교체되었으며 확장 프로그램의 다양한 구성 요소 간의 메시징 시스템이 업데이트되었습니다.

2단계: 매니페스트 파일 업데이트

Pomodoro 타이머 확장을 위해 V2에서 V3로 Manifest.json 파일을 업데이트하는 방법은 다음과 같습니다.

원본 매니페스트 V2 예:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

로그인 후 복사

업데이트된 매니페스트 V3 예:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

로그인 후 복사

매니페스트의 주요 변경 사항:

배경 스크립트: