Chrome 확장 프로그램용 매니페스트 V3로 전환하는 방법

나는 정규 Chrome 확장 프로그램 프로그래머는 아니지만, 확실히 확장 프로그램을 충분히 코딩했으며 작업을 수행하는 방법을 알 수 있을 만큼 충분히 넓은 웹 개발 포트폴리오를 가지고 있습니다. 그러나 최근에 내 확장 프로그램이 "구식"이라는 피드백을 받았기 때문에 고객이 내 확장 프로그램 중 하나를 거부했습니다.

무엇이 잘못되었는지 파악하기 위해 허둥대던 중 부끄러움을 걷어내고 즉시 Chrome 확장 프로그램의 세계로 깊이 빠져들기 시작했습니다. 안타깝게도 Manifest V3에 대한 정보가 부족했고 이 전환이 무엇인지 빠르게 이해하기 어려웠습니다.

말할 필요도 없이, 보류 중인 작업으로 인해 힘들게 길을 찾아야 했습니다. Google의 Chrome 개발자 문서 그리고 나 자신을 위해 일을 알아냅니다. 작업을 완료하는 동안 이 분야에 대한 지식과 연구가 낭비되는 것을 원하지 않았고 학습 여정에서 쉽게 접근할 수 있었으면 하는 것을 공유하기로 결정했습니다.

매니페스트 3으로의 전환이 중요한 이유

Manifest V3는 Google이 Chrome 브라우저에서 사용할 API입니다. 현재 API인 Manifest V2의 후속 버전이며 Chrome 확장 프로그램이 브라우저와 상호 작용하는 방식을 제어합니다. 매니페스트 V3는 확장 규칙에 중요한 변경 사항을 도입했으며 그 중 일부는 우리가 익숙했던 V2의 새로운 주류가 될 것입니다.

매니페스트 V3로의 전환 다음과 같이 요약할 수 있습니다.

1. 2018년부터 전환이 진행되고 있습니다.
2. 매니페스트 V3는 공식적으로 2023년 XNUMX월에 출시될 예정입니다.
3. 2023년 2월까지 Manifest VXNUMX를 실행하는 확장 프로그램은 더 이상 Chrome 웹 스토어에서 사용할 수 없습니다.
4. Manifest V3에 도입된 새로운 규칙을 준수하지 않는 확장 프로그램은 결국 Chrome 웹 스토어에서 제거됩니다.

Manifest V3의 주요 목표 중 하나는 사용자를 더 안전하게 만들고 전반적인 브라우저 경험을 개선하는 것입니다. 이전에는 많은 브라우저 확장 프로그램이 클라우드의 코드에 의존했기 때문에 확장이 위험한지 평가. 매니페스트 V3는 확장 프로그램에 실행할 모든 코드를 포함하도록 요구하여 Google이 이를 스캔하고 잠재적인 위험을 감지할 수 있도록 함으로써 이 문제를 해결하는 것을 목표로 합니다. 또한 확장 프로그램이 브라우저에서 구현할 수 있는 변경 사항에 대해 Google의 허가를 요청하도록 강제합니다.

Google의 Manifest V3 전환을 최신 상태로 유지하는 것은 사용자 안전과 전반적인 브라우저 경험을 개선하기 위한 확장 프로그램에 대한 새로운 규칙을 도입하고 이러한 규칙을 준수하지 않는 확장 프로그램은 결국 Chrome 웹에서 제거되기 때문에 중요합니다. 가게.

요컨대, Manifest V2를 사용하는 확장 프로그램을 만드는 모든 노력은 앞으로 몇 달 안에 이러한 전환을 하지 않으면 물거품이 될 수 있습니다.

매니페스트 V2와 V3의 주요 차이점

이 둘 사이에는 많은 차이점이 있으므로 자세히 읽어 보시기 바랍니다. Chrome의 "매니페스트 V3로 마이그레이션" 가이드, 다음은 핵심 사항에 대한 짧고 간단한 요약입니다.

1. 서비스 근로자 Manifest V3에서 배경 페이지를 교체합니다.
2. 네트워크 요청 수정은 새 declarativeNetRequest 매니페스트 V3의 API.
3. Manifest V3에서 확장은 패키지에 포함된 JavaScript만 실행할 수 있으며 원격 호스팅 코드는 사용할 수 없습니다.
4. 매니페스트 V3 소개 promise 콜백이 여전히 대안으로 지원되지만 많은 메서드를 지원합니다.
5. Manifest V3의 호스트 권한은 별도의 요소이며 "host_permissions" 입력란입니다.
6. Manifest V3의 콘텐츠 보안 정책은 Manifest V2에서처럼 문자열이 아니라 대체 콘텐츠 보안 정책(CSP) 컨텍스트를 나타내는 멤버가 있는 개체입니다.

웹페이지의 배경을 변경하는 간단한 Chrome 확장 프로그램의 매니페스트에서 다음과 같이 표시될 수 있습니다.

// 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>"]
}

// 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>" ]
}

위의 태그 중 일부가 낯설게 느껴진다면 계속 읽어서 정확히 알아야 할 사항을 찾으십시오.

Manifest V3로 원활하게 전환하는 방법

네 가지 주요 영역에서 Manifest V3로의 전환을 요약했습니다. 물론 이전 Manifest V3에서 구현해야 하는 새로운 Manifest V2에는 많은 종소리와 휘파람이 있지만 이 네 가지 영역의 변경 사항을 구현하면 Chrome 확장 프로그램이 최종 전환을 위해 올바른 방향으로 나아갈 수 있습니다.

네 가지 주요 영역은 다음과 같습니다.

1. 매니페스트의 기본 구조를 업데이트합니다.
2. 호스트 권한을 수정하십시오.
3. 콘텐츠 보안 정책을 업데이트합니다.
4. 네트워크 요청 처리를 수정하십시오.

이 네 가지 영역을 통해 Manifest의 기초가 Manifest V3로 전환할 준비가 됩니다. 이러한 각 주요 측면을 자세히 살펴보고 이 전환에서 Chrome 확장 프로그램의 미래를 보장하기 위해 어떻게 노력할 수 있는지 알아보겠습니다.

매니페스트의 기본 구조 업데이트

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

Manifest V2와 V3의 주요 차이점 중 하나는 배경 페이지를 Manifest V3에서 단일 확장 서비스 작업자로 교체한 것입니다. 아래에 서비스 워커를 등록해야 합니다. "background" 필드를 사용하여 "service_worker" 키를 누르고 단일 JavaScript 파일을 지정하십시오. Manifest V3는 여러 백그라운드 스크립트를 지원하지 않지만 선택적으로 다음을 지정하여 서비스 워커를 ES 모듈로 선언할 수 있습니다. "type": "module", 추가 코드를 가져올 수 있습니다.

매니페스트 V3에서는 "browser_action" 와 "page_action" 속성은 단일 속성으로 통합됩니다. "action" 속성. 이러한 속성을 다음으로 바꿔야 합니다. "action" 당신의 매니페스트에서. 유사하게, "chrome.browserAction" 와 "chrome.pageAction" API는 Manifest V3에서 단일 "Action" API로 통합되며 이 API로 마이그레이션해야 합니다.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

전반적으로 매니페스트의 기본 구조를 업데이트하는 것은 매니페스트 V3로 전환하는 과정에서 중요한 단계입니다. 이를 통해 이 버전의 API에 도입된 새로운 기능과 변경 사항을 활용할 수 있습니다.

호스트 권한 수정

Manifest V3로 전환하는 두 번째 단계는 호스트 권한을 수정하는 것입니다. Manifest V2에서는 다음에서 호스트 권한을 지정합니다. "permissions" 매니페스트 파일의 필드. Manifest V3에서 호스트 권한은 별도의 요소이며 "host_permissions" 매니페스트 파일의 필드.

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

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

콘텐츠 보안 정책 업데이트

Manifest V2와 호환되도록 Manifest V3 확장의 CSP를 업데이트하려면 매니페스트 파일을 일부 변경해야 합니다. Manifest V2에서 CSP는 "content_security_policy" 매니페스트의 필드.

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

또한 다음에서 외부 도메인에 대한 모든 참조를 제거해야 합니다. "script-src", "worker-src", "object-src"및 "style-src" 지시문이 있는 경우. Manifest V3에서 확장의 보안 및 안정성을 보장하려면 CSP에 이러한 업데이트를 적용하는 것이 중요합니다.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

네트워크 요청 처리 수정

Manifest V3로 전환하는 마지막 단계는 네트워크 요청 처리를 수정하는 것입니다. Manifest V2에서는 다음을 사용했을 것입니다. chrome.webRequest 네트워크 요청을 수정하는 API. 그러나 이 API는 Manifest V3에서 declarativeNetRequest API.

이 새 API를 사용하려면 다음을 지정해야 합니다. declarativeNetRequest 매니페스트에서 권한을 부여하고 새 API를 사용하도록 코드를 업데이트합니다. 두 API의 한 가지 주요 차이점은 declarativeNetRequest API를 사용하려면 HTTP 요청의 전체 범주를 차단할 수 있는 대신 차단할 미리 결정된 주소 목록을 지정해야 합니다. chrome.webRequest API.

Manifest V3에서 확장 기능이 계속 제대로 작동하도록 코드를 변경하는 것이 중요합니다. 다음은 매니페스트를 수정하여 declarativeNetRequest 매니페스트 V3의 API:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

또한 다음을 사용하려면 확장 코드를 업데이트해야 합니다. declarativeNetRequest API 대신 chrome.webRequest API.

확인해야 할 다른 측면

제가 다룬 내용은 빙산의 일각에 불과합니다. 물론 내가 모든 것을 다루고 싶다면 여기 며칠 동안 있을 수 있고 Google의 Chrome 개발자 가이드가 있을 필요가 없을 것입니다. 내가 다룬 내용은 이 전환에서 Chrome 확장 프로그램을 무장할 수 있을 만큼 미래에 대비할 수 있도록 해줄 것이지만 확장 프로그램이 게임의 최상위에서 작동하는지 확인하기 위해 살펴볼 몇 가지 다른 사항은 다음과 같습니다.

• 백그라운드 스크립트를 서비스 작업자 실행 컨텍스트로 마이그레이션: 앞서 언급했듯이 Manifest V3는 백그라운드 페이지를 단일 확장 서비스 작업자로 대체하므로 서비스 작업자 실행 컨텍스트에 맞게 백그라운드 스크립트를 업데이트해야 할 수 있습니다.
• 통합 **chrome.browserAction** 와 **chrome.pageAction** 아피스: 이 두 개의 동등한 API는 Manifest V3에서 단일 API로 통합되므로 Action API로 마이그레이션해야 할 수 있습니다.
• Manifest V2 백그라운드 컨텍스트가 필요한 마이그레이션 기능: Manifest V3의 서비스 작업자 채택은 다음과 같은 방법과 호환되지 않습니다. chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()및 chrome.extension.getViews(). 다른 컨텍스트와 백그라운드 서비스 워커 간에 메시지를 전달하는 디자인으로 마이그레이션해야 할 수도 있습니다.
• 콘텐츠 스크립트의 CORS 요청을 백그라운드 서비스 작업자로 이동: Manifest V3를 준수하기 위해 콘텐츠 스크립트의 CORS 요청을 백그라운드 서비스 작업자로 이동해야 할 수 있습니다.
• 외부 코드 또는 임의 문자열 실행에서 마이그레이션: 매니페스트 V3은 더 이상 다음을 사용하는 외부 논리 실행을 허용하지 않습니다. chrome.scripting.executeScript({code: '...'}), eval()및 new Function(). 모든 외부 코드(JavaScript, WebAssembly, CSS)를 확장 번들로 이동하고 스크립트 및 스타일 참조를 업데이트하여 확장 번들에서 리소스를 로드하고 chrome.runtime.getURL() 런타임 시 리소스 URL을 빌드합니다.
• Tabs API에서 특정 스크립팅 및 CSS 메서드 업데이트: 앞서 언급했듯이 여러 메서드가 Manifest V3에서 탭 API에서 스크립팅 API로 이동합니다. 올바른 Manifest V3 API를 사용하려면 이러한 메서드에 대한 모든 호출을 업데이트해야 할 수 있습니다.

그리고 더 많은!

시간을 내어 모든 변경 사항을 최신 상태로 유지하십시오. 결국 이 변경은 불가피하며 이 전환을 피함으로써 Manifest V2 확장이 손실되는 것을 원하지 않는 경우 필요한 지식으로 무장하는 데 시간을 할애하십시오.

반면에 Chrome 확장 프로그램 프로그래밍이 처음이고 시작하려는 경우 Chrome의 웹 개발자 도구 세계에 뛰어드는 것이 가장 좋은 방법입니다. 나는 코스를 통해 그렇게했다. Linkedin 학습, 꽤 빨리 속도를 얻었습니다. 기본 지식을 갖추었다면 이 기사로 돌아와 알고 있는 내용을 Manifest V3로 번역하십시오!

그렇다면 앞으로 새로운 Manifest V3의 기능을 어떻게 사용하게 될까요?

글쎄요, 제게는 Manifest V3로의 전환과 chrome.webRequest API는 확장 기능을 데이터 중심 사용 사례(예: 광고 차단기)에서 보다 기능적이고 애플리케이션 기반 사용으로 전환하는 것으로 보입니다. 나는 꽤 얻을 수 있기 때문에 최근에 응용 프로그램 개발에서 멀리 떨어져 있습니다. 자원 집약적 때때로. 그러나이 변화가 나를 다시 데려 올 수 있습니다!

최근에 사용 가능한 API가 많은 AI 도구의 등장으로 수많은 새롭고 새로운 SaaS 애플리케이션이 탄생했습니다. 개인적으로 저는 더 많은 애플리케이션 기반 Chrome 확장 프로그램으로의 전환과 함께 완벽한 시기에 오고 있다고 생각합니다! 이 전환으로 인해 많은 이전 확장이 지워질 수 있지만 참신한 SaaS 아이디어를 기반으로 구축된 많은 새로운 확장이 그 자리를 차지하게 될 것입니다.

따라서 이것은 이전 확장 기능에 뛰어들어 개조하거나 새 확장 기능을 구축할 수 있는 흥미로운 업데이트입니다! 개인적으로 저는 사용자의 브라우징 경험을 향상시키기 위해 확장 프로그램에 사용되는 AI와 관련된 API를 사용할 가능성이 많다고 생각합니다. 그러나 그것은 사실 빙산의 일각에 불과합니다. 자신의 전문적인 확장 기능을 사용하거나 회사에 연락하여 확장 기능을 구축/업데이트하려는 경우 다음을 추천합니다. Gmail 계정 업그레이드 공동 작업, 개발 및 확장 프로그램을 Chrome 웹 스토어에 게시할 때 제공하는 이점 때문입니다.

그러나 개발자마다 요구 사항이 다르므로 현재 확장 프로그램을 유지하거나 새 확장 프로그램을 실행하는 데 필요한 사항을 알아보세요!

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/