Cách chuyển sang Bản kê khai V3 cho Tiện ích mở rộng của Chrome

Mặc dù tôi không phải là lập trình viên tiện ích mở rộng thông thường của Chrome, nhưng tôi chắc chắn đã mã hóa đủ tiện ích mở rộng và có danh mục đầu tư phát triển web đủ rộng để biết cách thực hiện nhiệm vụ của mình. Tuy nhiên, gần đây, một khách hàng của tôi đã từ chối một trong các tiện ích mở rộng của tôi khi tôi nhận được phản hồi rằng tiện ích mở rộng của tôi đã “lỗi thời”.

Khi đang loay hoay tìm hiểu xem có gì không ổn, tôi đã giấu đi sự bối rối của mình và ngay lập tức bắt đầu tìm hiểu sâu trở lại thế giới Tiện ích mở rộng của Chrome. Thật không may, thông tin về Manifest V3 rất khan hiếm và thật khó để tôi hiểu nhanh toàn bộ quá trình chuyển đổi này là gì.

Không cần phải nói, với một công việc đang chờ xử lý, tôi đã phải cẩn thận tìm đường đi của mình Tài liệu dành cho nhà phát triển Chrome của Google và tìm ra mọi thứ cho bản thân mình. Trong khi hoàn thành công việc, tôi không muốn kiến ​​thức và nghiên cứu của mình trong lĩnh vực này bị lãng phí và quyết định chia sẻ những gì tôi ước mình có thể tiếp cận dễ dàng trong hành trình học tập của mình.

Tại sao quá trình chuyển đổi sang Manifest 3 lại quan trọng

Manifest V3 là API mà Google sẽ sử dụng trong trình duyệt Chrome của mình. Nó là phiên bản kế thừa của API hiện tại, Manifest V2 và điều chỉnh cách các tiện ích mở rộng của Chrome tương tác với trình duyệt. Manifest V3 giới thiệu những thay đổi quan trọng đối với các quy tắc dành cho tiện ích mở rộng, một số trong số đó sẽ là trụ cột mới từ V2 mà chúng tôi đã quen thuộc.

Quá trình chuyển đổi sang Manifest V3 có thể được tóm tắt như vậy:

1. Quá trình chuyển đổi đã diễn ra từ năm 2018.
2. Manifest V3 sẽ chính thức bắt đầu ra mắt vào tháng 2023 năm XNUMX.
3. Đến tháng 2023 năm 2, các tiện ích chạy Manifest VXNUMX sẽ không còn trên Cửa hàng Chrome trực tuyến nữa.
4. Các tiện ích mở rộng không tuân thủ các quy tắc mới được giới thiệu trong Bản kê khai V3 cuối cùng sẽ bị xóa khỏi Cửa hàng Chrome trực tuyến.

Một trong những mục tiêu chính của Manifest V3 là giúp người dùng an toàn hơn và cải thiện trải nghiệm trình duyệt tổng thể. Trước đây, nhiều tiện ích mở rộng của trình duyệt dựa vào mã trong đám mây, nghĩa là khó có thể đánh giá xem một phần mở rộng có rủi ro hay không. Manifest V3 nhằm mục đích giải quyết vấn đề này bằng cách yêu cầu các tiện ích mở rộng chứa tất cả mã chúng sẽ chạy, cho phép Google quét chúng và phát hiện các rủi ro tiềm ẩn. Nó cũng buộc các tiện ích mở rộng yêu cầu sự cho phép của Google đối với những thay đổi mà chúng có thể thực hiện trên trình duyệt.

Luôn cập nhật quá trình chuyển đổi của Google sang Manifest V3 là rất quan trọng vì nó đưa ra các quy tắc mới cho các tiện ích mở rộng nhằm cải thiện sự an toàn của người dùng và trải nghiệm tổng thể của trình duyệt, đồng thời các tiện ích mở rộng không tuân thủ các quy tắc này cuối cùng sẽ bị xóa khỏi Chrome Web Cửa hàng.

Nói tóm lại, tất cả công sức của bạn trong việc tạo tiện ích mở rộng sử dụng Manifest V2 có thể là vô ích nếu bạn không thực hiện quá trình chuyển đổi này trong những tháng tới.

Sự khác biệt chính giữa Manifest V2 và V3

Có rất nhiều sự khác biệt giữa hai loại này và trong khi tôi thực sự khuyên bạn nên đọc tiếp Hướng dẫn "Di chuyển sang tệp kê khai V3" của Chrome, đây là một bản tóm tắt ngắn gọn và thú vị về các điểm chính:

1. công nhân phục vụ thay thế các trang nền trong Manifest V3.
2. Sửa đổi yêu cầu mạng được xử lý với cái mới declarativeNetRequest API trong Bản kê khai V3.
3. Trong Manifest V3, các tiện ích mở rộng chỉ có thể thực thi JavaScript được bao gồm trong gói của chúng và không thể sử dụng mã được lưu trữ từ xa.
4. Manifest V3 giới thiệu promise hỗ trợ nhiều phương pháp, mặc dù gọi lại vẫn được hỗ trợ như một phương pháp thay thế.
5. Quyền của máy chủ trong Manifest V3 là một thành phần riêng biệt và phải được chỉ định trong "host_permissions" trường.
6. Chính sách bảo mật nội dung trong Bản kê khai V3 là một đối tượng có các thành viên đại diện cho ngữ cảnh chính sách bảo mật nội dung thay thế (CSP), chứ không phải là một chuỗi như trong Bản kê khai V2.

Trong Tệp kê khai của Tiện ích mở rộng Chrome đơn giản làm thay đổi nền của trang web, có thể giống như sau:

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

Nếu bạn thấy một số thẻ ở trên có vẻ xa lạ với mình, hãy tiếp tục đọc để tìm hiểu chính xác những gì bạn cần biết.

Cách chuyển đổi suôn sẻ sang Manifest V3

Tôi đã tóm tắt quá trình chuyển đổi sang Manifest V3 trong bốn lĩnh vực chính. Tất nhiên, mặc dù có nhiều điểm đáng chú ý trong Manifest V3 mới cần được triển khai từ Manifest V2 cũ, nhưng việc triển khai các thay đổi trong bốn lĩnh vực này sẽ giúp Tiện ích mở rộng Chrome của bạn đi đúng hướng cho quá trình chuyển đổi cuối cùng.

Bốn lĩnh vực chính là:

1. Cập nhật cấu trúc cơ bản của Tệp kê khai của bạn.
2. Sửa đổi quyền lưu trữ của bạn.
3. Cập nhật chính sách bảo mật nội dung.
4. Sửa đổi xử lý yêu cầu mạng của bạn.

Với bốn lĩnh vực này, các nguyên tắc cơ bản của Tệp kê khai của bạn sẽ sẵn sàng cho quá trình chuyển đổi sang Tệp kê khai V3. Hãy xem xét chi tiết từng khía cạnh chính này và xem cách chúng tôi có thể làm việc hướng tới việc chứng minh Tiện ích mở rộng Chrome của bạn trong tương lai từ quá trình chuyển đổi này.

Cập nhật cấu trúc cơ bản của Bản kê khai của bạn

Cập nhật cấu trúc cơ bản của tệp kê khai là bước đầu tiên trong quá trình chuyển đổi sang Tệp kê khai V3. Thay đổi quan trọng nhất bạn cần thực hiện là thay đổi giá trị của "manifest_version" yếu tố để 3, xác định rằng bạn đang sử dụng bộ tính năng Manifest V3.

Một trong những điểm khác biệt chính giữa Manifest V2 và V3 là việc thay thế các trang nền bằng một nhân viên dịch vụ mở rộng duy nhất trong Manifest V3. Bạn sẽ cần đăng ký nhân viên dịch vụ theo "background" trường, sử dụng "service_worker" key và chỉ định một tệp JavaScript. Mặc dù Manifest V3 không hỗ trợ nhiều tập lệnh nền, nhưng bạn có thể tùy chọn khai báo nhân viên dịch vụ dưới dạng Mô-đun ES bằng cách chỉ định "type": "module", cho phép bạn nhập thêm mã.

Trong Bản kê khai V3, "browser_action" và "page_action" các thuộc tính được thống nhất thành một "action" tài sản. Bạn sẽ cần thay thế các thuộc tính này bằng "action" trong bảng kê khai của bạn. Tương tự như vậy, các "chrome.browserAction" và "chrome.pageAction" Các API được hợp nhất thành một API "Hành động" duy nhất trong Bản kê khai V3 và bạn sẽ cần chuyển sang API này.

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

Nhìn chung, việc cập nhật cấu trúc cơ bản của tệp kê khai là một bước quan trọng trong quá trình chuyển đổi sang Tệp kê khai V3, vì nó cho phép bạn tận dụng các tính năng và thay đổi mới được giới thiệu trong phiên bản API này.

Sửa đổi quyền lưu trữ của bạn

Bước thứ hai trong quá trình chuyển đổi sang Manifest V3 là sửa đổi quyền đối với máy chủ của bạn. Trong Manifest V2, bạn chỉ định quyền của máy chủ lưu trữ trong "permissions" trường trong tệp kê khai. Trong Manifest V3, quyền của máy chủ lưu trữ là một thành phần riêng biệt và bạn nên chỉ định chúng trong "host_permissions" trường trong tệp kê khai.

Dưới đây là một ví dụ về cách sửa đổi quyền lưu trữ của bạn:

// 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": [ ":///*" ]

Cập nhật chính sách bảo mật nội dung

Để cập nhật CSP của tiện ích Manifest V2 để tương thích với Manifest V3, bạn cần thực hiện một số thay đổi đối với tệp kê khai của mình. Trong Manifest V2, CSP được chỉ định dưới dạng một chuỗi trong "content_security_policy" trường của bảng kê khai.

Trong Manifest V3, CSP hiện là một đối tượng với các thành viên khác nhau đại diện cho các bối cảnh CSP thay thế. Thay vì một "content_security_policy" trường, bây giờ bạn sẽ phải chỉ định các trường riêng biệt cho "content_security_policy.extension_pages" và "content_security_policy.sandbox", tùy thuộc vào loại trang mở rộng mà bạn đang sử dụng.

Bạn cũng nên xóa mọi tham chiếu đến miền bên ngoài trong "script-src", "worker-src", "object-src"và "style-src" chỉ thị nếu chúng có mặt. Điều quan trọng là phải thực hiện những cập nhật này cho CSP của bạn để đảm bảo tính bảo mật và tính ổn định của tiện ích mở rộng của bạn trong Bản kê khai V3.

// 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'"

Sửa đổi xử lý yêu cầu mạng của bạn

Bước cuối cùng trong quá trình chuyển đổi sang Manifest V3 là sửa đổi việc xử lý yêu cầu mạng của bạn. Trong Manifest V2, bạn sẽ sử dụng chrome.webRequest API để sửa đổi các yêu cầu mạng. Tuy nhiên, API này được thay thế trong Manifest V3 bởi declarativeNetRequest API.

Để sử dụng API mới này, bạn sẽ cần chỉ định declarativeNetRequest quyền trong bảng kê khai của bạn và cập nhật mã của bạn để sử dụng API mới. Một điểm khác biệt chính giữa hai API là declarativeNetRequest API yêu cầu bạn chỉ định danh sách các địa chỉ được xác định trước để chặn, thay vì có thể chặn toàn bộ danh mục yêu cầu HTTP như bạn có thể làm với chrome.webRequest API.

Điều quan trọng là phải thực hiện những thay đổi này trong mã của bạn để đảm bảo rằng tiện ích mở rộng của bạn tiếp tục hoạt động bình thường trong Bản kê khai V3. Đây là một ví dụ về cách bạn sẽ sửa đổi bảng kê khai của mình để sử dụng declarativeNetRequest API trong Bản kê khai V3:

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

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

Bạn cũng sẽ cần cập nhật mã mở rộng của mình để sử dụng declarativeNetRequest API thay vì chrome.webRequest API.

Các khía cạnh khác bạn cần kiểm tra

Những gì tôi đã đề cập chỉ là phần nổi của tảng băng chìm. Tất nhiên, nếu tôi muốn bao quát mọi thứ, tôi có thể ở đây trong nhiều ngày và sẽ chẳng ích gì khi có các hướng dẫn dành cho Nhà phát triển Chrome của Google. Mặc dù những gì tôi đã đề cập sẽ giúp bạn đủ vững tin trong tương lai để trang bị các tiện ích mở rộng của Chrome trong quá trình chuyển đổi này, nhưng đây là một số điều khác mà bạn có thể muốn xem xét để đảm bảo các tiện ích mở rộng của bạn hoạt động ở đầu trò chơi của chúng.

• Di chuyển các tập lệnh nền sang bối cảnh thực thi nhân viên dịch vụ: Như đã đề cập trước đó, Manifest V3 thay thế các trang nền bằng một nhân viên dịch vụ tiện ích duy nhất, do đó, có thể cần phải cập nhật các tập lệnh nền để thích ứng với ngữ cảnh thực thi của nhân viên dịch vụ.
• thống nhất các **chrome.browserAction** và **chrome.pageAction** API: Hai API tương đương này được hợp nhất thành một API duy nhất trong Bản kê khai V3, vì vậy có thể cần phải di chuyển sang API hành động.
• Di chuyển các chức năng mong đợi bối cảnh nền Manifest V2: Việc áp dụng nhân viên dịch vụ trong Manifest V3 không tương thích với các phương pháp như chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()và chrome.extension.getViews(). Có thể cần phải di chuyển sang một thiết kế truyền thông điệp giữa các bối cảnh khác và nhân viên dịch vụ nền.
• Di chuyển các yêu cầu CORS trong tập lệnh nội dung sang nhân viên dịch vụ nền: Có thể cần phải chuyển các yêu cầu CORS trong tập lệnh nội dung sang nhân viên dịch vụ nền để tuân thủ Bản kê khai V3.
• Di chuyển khỏi thực thi mã bên ngoài hoặc các chuỗi tùy ý: Manifest V3 không còn cho phép thực thi logic bên ngoài bằng cách sử dụng chrome.scripting.executeScript({code: '...'}), eval()và new Function(). Có thể cần phải di chuyển tất cả mã bên ngoài (JavaScript, WebAssembly, CSS) vào gói tiện ích mở rộng, cập nhật tập lệnh và tham chiếu kiểu để tải tài nguyên từ gói tiện ích mở rộng và sử dụng chrome.runtime.getURL() để xây dựng các URL tài nguyên trong thời gian chạy.
• Cập nhật một số phương thức tập lệnh và CSS nhất định trong API Tab: Như đã đề cập trước đó, một số phương thức chuyển từ API tab sang API tập lệnh trong Bản kê khai V3. Có thể cần phải cập nhật bất kỳ lệnh gọi nào tới các phương thức này để sử dụng đúng API Tệp ​​kê khai V3.

Và nhiều cái khác!

Vui lòng dành chút thời gian để cập nhật tất cả các thay đổi. Xét cho cùng, sự thay đổi này là không thể tránh khỏi và nếu bạn không muốn các tiện ích mở rộng Manifest V2 của mình bị mất do tránh quá trình chuyển đổi này, thì hãy dành thời gian trang bị cho mình những kiến ​​thức cần thiết.

Mặt khác, nếu bạn chưa quen với việc lập trình các tiện ích mở rộng của Chrome và đang muốn bắt đầu, thì một cách tuyệt vời để bắt đầu là khám phá thế giới các công cụ dành cho Nhà phát triển web của Chrome. Tôi đã làm như vậy thông qua một khóa học về Học Linkedin, giúp tôi tăng tốc khá nhanh. Khi bạn đã có kiến ​​thức cơ bản đó, hãy quay lại bài viết này và dịch những gì bạn biết sang Bản kê khai V3!

Vì vậy, tôi sẽ sử dụng các tính năng trong Manifest V3 mới như thế nào trong tương lai?

Đối với tôi, quá trình chuyển đổi sang Manifest V3 và loại bỏ chrome.webRequest API dường như đang chuyển các tiện ích mở rộng ra khỏi các trường hợp sử dụng tập trung vào dữ liệu (chẳng hạn như trình chặn quảng cáo) sang các mục đích sử dụng dựa trên ứng dụng và chức năng hơn. Gần đây tôi đã tránh xa việc phát triển ứng dụng vì nó có thể khá nguồn lực chuyên sâu đôi khi. Tuy nhiên, sự thay đổi này có thể là thứ đưa tôi trở lại!

Sự gia tăng của các công cụ AI trong thời gian gần đây, nhiều công cụ có API sẵn dùng, đã tạo ra vô số ứng dụng SaaS mới mẻ. Cá nhân tôi nghĩ rằng đây là thời điểm hoàn hảo để chuyển sang các tiện ích mở rộng Chrome dựa trên ứng dụng hơn! Mặc dù nhiều tiện ích mở rộng cũ hơn có thể bị xóa khỏi quá trình chuyển đổi này, nhưng rất nhiều tiện ích mở rộng mới được xây dựng dựa trên các ý tưởng SaaS mới lạ sẽ thay thế chúng.

Do đó, đây là một bản cập nhật thú vị để bắt đầu và cải tiến các tiện ích mở rộng cũ hoặc xây dựng các tiện ích mở rộng mới! Cá nhân tôi thấy có nhiều khả năng trong việc sử dụng các API liên quan đến AI được sử dụng trong các tiện ích mở rộng để nâng cao trải nghiệm duyệt web của người dùng. Nhưng đó thực sự chỉ là phần nổi của tảng băng chìm. Nếu bạn đang muốn thực sự tìm hiểu mọi thứ với tiện ích mở rộng chuyên nghiệp của riêng mình hoặc liên hệ với các công ty để xây dựng/cập nhật tiện ích mở rộng cho họ, thì tôi khuyên bạn nên nâng cấp tài khoản Gmail của bạn vì những lợi ích mà nó mang lại trong việc cộng tác, phát triển và xuất bản các tiện ích mở rộng lên Cửa hàng Chrome trực tuyến.

Tuy nhiên, hãy nhớ rằng các yêu cầu của mỗi nhà phát triển là khác nhau, vì vậy hãy tìm hiểu những gì bạn cần để duy trì hoạt động của các tiện ích mở rộng hiện tại hoặc các tiện ích mở rộng mới của bạn!

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/