크롬 확장의 경우 V3 매니페스트로 전환하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

크롬 확장의 경우 V3 매니페스트로 전환하는 방법

Joseph Gordon-Levitt

Mar 09, 2025 am 10:08 AM

How to Transition to Manifest V3 for Chrome Extensions 최근에, 내 고객 중 한 명이 "구식"이기 때문에 내 확장을 거부하여 크롬 확장의 매니페스트 V3를 파헤칠 수있었습니다. Manifest V3 Online에 대한 정보가 부족하며 이해하기가 어렵습니다.

열심히 일한 후 마침내 작업을 완료했지만 연구 결과가 낭비되는 것을 원하지 않았기 때문에 학습 경험을 공유하기로 결정했습니다.

매니페스트 V3 마이그레이션의 중요성 Danifest V3는 현재 API Manifest V2의 후속 인 Chrome의 Google API이며 Chrome Extensions가 브라우저와 어떻게 상호 작용하는지 관리합니다. Manifest V3는 확장 규칙을 크게 변경했으며 그 중 일부는 우리가 사용하는 데 사용되는 V2의 새로운 기둥이됩니다.

매니페스트 V3의 마이그레이션은 다음과 같이 요약 될 수 있습니다.

이주는 2018 년부터 진행되었습니다.

Manifest V3는 공식적으로 2023 년 1 월에 출시 될 예정입니다.

2023 년 6 월까지 Manifest V2를 실행하는 확장자는 더 이상 Chrome 웹 스토어에서 사용할 수 없습니다.

Manifest V3에 도입 된 새로운 규칙을 준수하지 않는 확장은 결국 Chrome 웹 스토어에서 제거됩니다.

Manifest V3의 주요 목표 중 하나는 사용자 보안을 개선하고 전반적인 브라우저 경험을 향상시키는 것입니다. 이전에는 많은 브라우저 확장이 클라우드 기반 코드에 의존하여 확장이 위험했는지 여부를 평가하기가 어렵다는 것을 의미했습니다. Manifest V3는 실행될 모든 코드를 포함하도록 확장자를 요구 하여이 문제를 해결하도록 설계되어 Google이 스캔하고 잠재적 위험을 감지 할 수 있습니다. 또한 확장자가 브라우저에서 구현할 수있는 변경 사항에 대해 Google의 권한을 요청하도록 강요합니다.

사용자 보안 및 전반적인 브라우저 경험을 향상시키기 위해 설계된 확장에 대한 새로운 규칙을 도입하기 때문에 Google의 Manifest V3 마이그레이션을 따라 잡는 것이 중요합니다. 이러한 규칙을 준수하지 않는 확장은 결국 Chrome 웹 스토어에서 제거됩니다.

요컨대, 가능한 빨리 마이그레이션하지 않으면 매니페스트 V2를 사용하는 확장을 만들기위한 모든 노력이 낭비 될 수 있습니다.

Manifest V2와 v3 의 주요 차이점 둘 사이에는 많은 차이점이 있으며 Chrome의 "Migrate to Manifest V3"가이드를 읽는 것이 좋습니다. 핵심 요점에 대한 간단한 요약이 있습니다.

NET 요청 수정은 새로운 DeclarativenEtRequest API를 사용하여 Manifest V3에서 처리됩니다.
매니페스트 V3는 많은 방법에 대한 약속 지원을 소개하지만 콜백은 여전히 대안으로 지원됩니다.
Manifest V3의 컨텐츠 보안 정책은 멤버가 Manifest V2의 문자열이 아닌 대체 컨텐츠 보안 정책 (CSP) 컨텍스트를 대표하는 객체입니다.
웹 페이지의 배경을 단순히 변경하는 크롬 확장 목록에서 다음과 같이 보일 수 있습니다.
위의 태그 중 일부가 이상하게 보이면 알아야 할 것을 배우려면 계속 읽으십시오.

매니페스트 V3 로 마이그레이션하는 방법 나는 v3을 매니페스트로 마이그레이션하는 것을 네 가지 주요 영역으로 요약했습니다. 물론, 새로운 Manifest V3에는 오래된 Manifest V2에서 구현 해야하는 새로운 기능이 많이 있지만,이 네 가지 영역을 변경하면 최종 마이그레이션을 위해 Chrome 확장을 준비합니다.

4 가지 핵심 영역은 다음과 같습니다

목록의 기본 구조를 업데이트하십시오.

호스트 권한을 수정하십시오.

컨텐츠 보안 정책 업데이트.

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

로그인 후 복사

네트워크 요청 처리를 수정합니다.

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

로그인 후 복사

이 네 가지 측면을 통해 목록의 기본 요소는 Manifest V3으로 마이그레이션 할 준비가됩니다. 각 주요 측면을 자세히 살펴 보고이 마이그레이션으로부터 크롬 확장을 보호하기 위해 일하는 방법을 배우겠습니다.

업데이트 목록의 기본 구조

매니페스트 업데이트의 기본 구조는 Manifest V3로 이동하는 첫 번째 단계입니다. 가장 중요한 변경 사항은 "Manifest_version"요소의 값을 3으로 변경하는 것입니다. 즉, Manifest V3 기능 세트를 사용하고 있음을 의미합니다.

Manifest V2와 V3의 주요 차이점 중 하나는 Manifest V3의 단일 확장 서비스 작업자로 백엔드 페이지를 대체하는 것입니다. "배경"필드에 서비스 작업자를 등록하고 "Service_Worker"키를 사용하고 단일 JavaScript 파일을 지정해야합니다. Manifest V3에서 여러 배경 스크립트를 지원하지 않더라도 "유형": "Module"을 지정하여 서비스 작업자를 ES 모듈로 선언하여 더 많은 코드를 가져올 수 있습니다.

Manifest v3에서 "Browser_Action"및 "Page_Action"속성은 단일 "action"속성으로 병합됩니다. 이 속성을 매니페스트의 "액션"으로 바꿔야합니다. 마찬가지로, Manifest V3의 Chrome.BrowserAction 및 Chrome.PageAction API는 마이그레이션 해야하는 단일 '액션'API로 병합됩니다.

일반적으로 업데이트 Manifest의 기본 구조는 Manifest V3으로의 마이그레이션의 핵심 단계입니다.이 버전의 API에 도입 된 새로운 기능과 변경 사항을 활용할 수 있습니다.

호스트 권한을 수정 Manifest V3으로 마이그레이션하는 두 번째 단계는 호스트 권한을 수정하는 것입니다. Manifest V2에서는 Manifest 파일의 "권한"필드에 호스트 권한을 지정합니다. Manifest V3에서 호스트 권한은 매니페스트 파일의 "host_permissions"필드에 지정 해야하는 별도의 요소입니다.

다음은 호스트 권한을 수정하는 방법의 예입니다.

컨텐츠 보안 정책 업데이트 Manifest V3와 일치하도록 Manifest V2 확장의 CSP를 업데이트하려면 Manifest 파일을 변경해야합니다. Manifest V2에서 CSP는 매니페스트의 "content_security_policy"필드에서 문자열로 지정됩니다.

Manifest V3에서 CSP는 이제 다른 멤버가 대체 CSP 컨텍스트를 나타내는 객체입니다. 현재 단일 "content_security_policy"필드를 사용하는 대신 사용중인 확장 페이지의 유형에 따라 "content_security_policy.extension_pages"및 "content_security_policy.sandbox"에 별도의 필드를 지정해야합니다.

현재 CSP에 외부 도메인이있는 경우 "Script-SRC", "Worker-SRC", "Object-SRC"및 "Style-SRC"지시문에서 참조를 삭제해야합니다. 이러한 CSP 업데이트를 만드는 것은 Manifest V3에서 확장의 보안 및 안정성을 보장하기 위해 중요합니다.

<code>// Manifest V2
{
  "manifest_version": 2,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "optional_permissions": ["<all_urls>"]
}</all_urls></code>

로그인 후 복사

<code>// Manifest V3
{
  "manifest_version": 3,
  "name": "Shane's Extension",
  "version": "1.0",
  "description": "A simple extension that changes the background of a webpage to Shane's face.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab", ],
  "host_permissions": [ "<all_urls>" ]
}</all_urls></code>

로그인 후 복사