Chrome Uzantıları için Manifest V3'e Nasıl Geçilir?

Düzenli bir Chrome uzantı programcısı olmasam da, kesinlikle yeterince uzantı kodladım ve görevde yolumu bilmem için yeterince geniş bir web geliştirme portföyüne sahibim. Ancak, kısa bir süre önce, uzantımın "eski" olduğuna dair geri bildirim aldığım için bir müşterim uzantılarımdan birini reddetti.

Neyin yanlış olduğunu anlamaya çalışırken, utancımı halının altına süpürdüm ve hemen Chrome Uzantıları dünyasına derin dalışıma başladım. Ne yazık ki, Manifest V3 hakkında bilgi azdı ve bu geçişin neyle ilgili olduğunu hızlı bir şekilde anlamak benim için zordu.

Söylemeye gerek yok, bekleyen bir işle, özenle yolumu bulmam gerekti. Google'ın Chrome Geliştirici Belgeleri ve kendim için bir şeyler çöz. İşimi bitirirken, bu alandaki bilgi ve araştırmalarımın boşa gitmesini istemedim ve öğrenme yolculuğumda keşke kolayca erişebilseydim dediğim şeyleri paylaşmaya karar verdim.

Manifest 3'e geçiş neden önemlidir?

Manifest V3, Google'ın Chrome tarayıcısında kullanacağı bir API'dir. Mevcut API olan Manifest V2'nin halefidir ve Chrome uzantılarının tarayıcıyla nasıl etkileşime girdiğini yönetir. Manifest V3, uzantı kurallarında, bazıları alıştığımız V2'nin yeni dayanak noktası olacak önemli değişiklikler getiriyor.

Manifest V3'e geçiş şöyle özetlenebilir:

1. Geçiş 2018'den beri devam ediyor.
2. Manifest V3, resmi olarak Ocak 2023'te kullanıma sunulacak.
3. Haziran 2023 itibarıyla, Manifest V2'yi çalıştıran uzantılar artık Chrome Web Mağazası'nda bulunmayacaktır.
4. Manifest V3'te tanıtılan yeni kurallara uymayan uzantılar, sonunda Chrome Web Mağazası'ndan kaldırılacaktır.

Manifest V3'ün ana hedeflerinden biri, kullanıcıları daha güvenli hale getirmek ve genel tarayıcı deneyimini iyileştirmektir. Önceden, birçok tarayıcı uzantısı buluttaki koda bağlıydı, yani bir uzantının riskli olup olmadığını değerlendirin. Manifest V3, uzantıların çalıştıracakları tüm kodları içermesini zorunlu kılarak Google'ın bunları taramasına ve potansiyel riskleri tespit etmesine olanak tanıyarak bu sorunu çözmeyi amaçlamaktadır. Ayrıca uzantıları, tarayıcıda uygulayabilecekleri değişiklikler için Google'dan izin istemeye zorlar.

Google'ın Manifest V3'e geçişiyle ilgili güncel bilgilere sahip olmak önemlidir çünkü bu geçiş, kullanıcı güvenliğini ve genel tarayıcı deneyimini iyileştirmeyi amaçlayan uzantılar için yeni kurallar getirir ve bu kurallara uymayan uzantılar sonunda Chrome Web'den kaldırılır. Mağaza.

Kısacası, önümüzdeki aylarda bu geçişi yapmazsanız, Manifest V2'yi kullanan uzantılar oluşturmak için harcadığınız tüm çabalar boşa gidebilir.

Manifest V2 ve V3 arasındaki temel farklar

İkisi arasında pek çok fark var ve okumanızı şiddetle tavsiye ederim. Chrome'un "Manifest V3'e Geçiş" kılavuzu, işte kilit noktaların kısa ve tatlı bir özeti:

1. servis çalışanları Manifest V3'teki arka plan sayfalarını değiştirin.
2. Ağ isteği değişikliği, yeni declarativeNetRequest Manifest V3'teki API.
3. Manifest V3'te, uzantılar yalnızca paketlerinde bulunan JavaScript'i çalıştırabilir ve uzaktan barındırılan kodu kullanamaz.
4. Manifest V3 tanıtıyor promise birçok yöntemi destekler, ancak geri aramalar hala bir alternatif olarak desteklenir.
5. Manifest V3'teki ana bilgisayar izinleri ayrı bir öğedir ve "host_permissions" alan.
6. Manifest V3'teki içerik güvenliği ilkesi, Manifest V2'de olduğu gibi bir dizi yerine alternatif içerik güvenlik ilkesi (CSP) bağlamlarını temsil eden üyelere sahip bir nesnedir.

Bir web sayfasının arka planını değiştiren basit bir Chrome Uzantısının Manifest'inde şöyle görünebilir:

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

Yukarıdaki etiketlerden bazılarının size yabancı geldiğini düşünüyorsanız, tam olarak neyi bilmeniz gerektiğini öğrenmek için okumaya devam edin.

Manifest V3'e sorunsuz geçiş nasıl yapılır?

Manifest V3'e geçişi dört temel alanda özetledim. Elbette, yeni Manifest V3'te eski Manifest V2'den uygulanması gereken pek çok özellik olsa da, bu dört alanda değişiklik yapmak Chrome Uzantınızı nihai geçiş için doğru yola sokacaktır.

Dört temel alan şunlardır:

1. Manifest'inizin temel yapısı güncelleniyor.
2. Ana bilgisayar izinlerinizi değiştirin.
3. İçerik güvenliği politikasını güncelleyin.
4. Ağ talebi işlemenizi değiştirin.

Bu dört alanla, Manifest'inizin temelleri Manifest V3'e geçiş için hazır olacaktır. Bu temel özelliklerin her birine ayrıntılı olarak bakalım ve bu geçişten itibaren Chrome Uzantınızı geleceğe hazır hale getirmek için nasıl çalışabileceğimizi görelim.

Manifestinizin temel yapısını güncellemek

Manifest'inizin temel yapısını güncellemek, Manifest V3'e geçişin ilk adımıdır. Yapmanız gereken en önemli değişiklik, "manifest_version" eleman 3, Manifest V3 özellik setini kullandığınızı belirler.

Manifest V2 ve V3 arasındaki en büyük farklardan biri, Manifest V3'te arka plan sayfalarının tek bir uzantılı hizmet çalışanı ile değiştirilmesidir. altında hizmet çalışanını kaydetmeniz gerekecektir. "background" alanını kullanarak "service_worker" anahtarına basın ve tek bir JavaScript dosyası belirtin. Manifest V3 birden çok arka plan komut dosyasını desteklemese de, isteğe bağlı olarak hizmet çalışanını belirterek bir ES Modülü olarak ilan edebilirsiniz. "type": "module", bu da daha fazla kod içe aktarmanıza olanak tanır.

Manifest V3'te, "browser_action" ve "page_action" özellikler tek bir yerde birleştirilir "action" Emlak. Bu özellikleri ile değiştirmeniz gerekecek "action" bildiriminizde. Benzer şekilde, "chrome.browserAction" ve "chrome.pageAction" API'ler, Manifest V3'te tek bir "Eylem" API'sinde birleştirilmiştir ve bu API'ye geçiş yapmanız gerekecektir.

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

Genel olarak, bildiriminizin temel yapısını güncellemek, API'nin bu sürümünde sunulan yeni özelliklerden ve değişikliklerden yararlanmanıza olanak tanıdığından, Manifest V3'e geçiş sürecinde çok önemli bir adımdır.

Ana makine izinlerinizi değiştirin

Manifest V3'e geçişin ikinci adımı, ana bilgisayar izinlerinizi değiştirmektir. Manifest V2'de, ana bilgisayar izinlerini "permissions" bildirim dosyasındaki alan. Manifest V3'te, ana bilgisayar izinleri ayrı bir öğedir ve bunları "host_permissions" bildirim dosyasındaki alan.

Ana bilgisayar izinlerinizi nasıl değiştireceğinize dair bir örnek:

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

İçerik güvenliği ilkesini güncelleyin

Manifest V2 uzantınızın CSP'sini Manifest V3 ile uyumlu olacak şekilde güncellemek için manifest dosyanızda bazı değişiklikler yapmanız gerekecektir. Manifest V2'de CSP, "content_security_policy" bildirim alanı.

Manifest V3'te, CSP artık alternatif CSP bağlamlarını temsil eden farklı üyelere sahip bir nesnedir. yerine tek "content_security_policy" alanı için artık ayrı alanlar belirtmeniz gerekecektir. "content_security_policy.extension_pages" ve "content_security_policy.sandbox", kullandığınız uzantı sayfalarının türüne bağlı olarak.

Ayrıca, dış etki alanlarına yapılan tüm başvuruları da kaldırmalısınız. "script-src", "worker-src", "object-src", ve "style-src" varsa direktifler. Manifest V3'teki uzantınızın güvenliğini ve kararlılığını sağlamak için bu güncellemeleri CSP'nizde yapmanız önemlidir.

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

Ağ talebi işlemenizi değiştirin

Manifest V3'e geçişteki son adım, ağ istek işlemenizi değiştirmektir. Manifest V2'de, chrome.webRequest Ağ isteklerini değiştirmek için API. Ancak, bu API, Manifest V3'te şu şekilde değiştirilmiştir: declarativeNetRequest API.

Bu yeni API'yi kullanmak için, declarativeNetRequest izin verin ve yeni API'yi kullanmak için kodunuzu güncelleyin. İki API arasındaki temel farklardan biri, declarativeNetRequest API, HTTP istekleri kategorilerinin tamamını engelleyebilmek yerine engellenecek önceden belirlenmiş adreslerin bir listesini belirtmenizi gerektirir. chrome.webRequest API.

Uzantınızın Manifest V3 altında düzgün şekilde çalışmaya devam etmesini sağlamak için kodunuzda bu değişiklikleri yapmanız önemlidir. Manifest'inizi kullanmak için nasıl değiştireceğinize dair bir örnek: declarativeNetRequest Manifest V3'teki API:

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

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

kullanmak için uzantı kodunuzu da güncellemeniz gerekecektir. declarativeNetRequest API yerine chrome.webRequest API.

Kontrol etmeniz gereken diğer hususlar

Anlattıklarım buzdağının sadece görünen kısmı. Tabii ki, her şeyi anlatmak isteseydim, günlerce burada kalabilirdim ve Google'ın Chrome Geliştirici kılavuzlarına sahip olmanın bir anlamı olmazdı. Anlattıklarım, bu geçişte Chrome uzantılarınızı devreye alacak kadar geleceğe hazır olmanızı sağlayacak olsa da, uzantılarınızın performanslarının zirvesinde çalıştığından emin olmak için bakmak isteyebileceğiniz başka şeyler de var.

• Arka plan komut dosyalarını hizmet çalışanı yürütme bağlamına taşıma: Daha önce bahsedildiği gibi, Manifest V3, arka plan sayfalarını tek bir uzantı hizmet çalışanıyla değiştirir, bu nedenle, hizmet çalışanı yürütme bağlamına uyum sağlamak için arka plan komut dosyalarının güncellenmesi gerekebilir.
• Birleştirici **chrome.browserAction** ve **chrome.pageAction** API'ler: Bu iki eşdeğer API, Manifest V3'te tek bir API'de birleştirilmiştir, bu nedenle Action API'ye geçiş gerekli olabilir.
• Bir Manifest V2 arka plan bağlamı bekleyen işlevlerin taşınması: Manifest V3'te hizmet çalışanlarının benimsenmesi, aşağıdaki gibi yöntemlerle uyumlu değildir: chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs(), ve chrome.extension.getViews(). Mesajları diğer bağlamlar ve arka plan hizmet çalışanı arasında ileten bir tasarıma geçmek gerekli olabilir.
• İçerik betiklerindeki CORS isteklerini arka plan hizmet çalışanına taşıma: Manifest V3'e uyum sağlamak için içerik komut dosyalarındaki CORS isteklerini arka plan hizmet çalışanına taşımak gerekebilir.
• Harici kod veya rasgele dizeleri yürütmekten uzaklaşma: Manifest V3 artık kullanarak harici mantığın yürütülmesine izin vermiyor chrome.scripting.executeScript({code: '...'}), eval(), ve new Function(). Tüm harici kodu (JavaScript, WebAssembly, CSS) uzantı paketine taşımak, uzantı paketinden kaynakları yüklemek için komut dosyasını ve stil referanslarını güncellemek ve chrome.runtime.getURL() çalışma zamanında kaynak URL'leri oluşturmak için.
• Sekmeler API'sinde belirli komut dosyası oluşturma ve CSS yöntemleri güncelleniyor: Daha önce bahsedildiği gibi, Manifest V3'te birçok yöntem Tabs API'sinden Scripting API'ye taşınır. Doğru Manifest V3 API'sini kullanmak için bu yöntemlere yapılan tüm çağrıları güncellemek gerekebilir.

Ve daha fazlası!

Tüm değişikliklerden haberdar olmak için biraz zaman ayırmaktan çekinmeyin. Sonuçta, bu değişiklik kaçınılmazdır ve bu geçişten kaçınarak Manifest V2 uzantılarınızın kaybolmasını istemiyorsanız, gerekli bilgilerle kendinizi silahlandırmak için biraz zaman ayırın.

Öte yandan, Chrome uzantılarını programlama konusunda yeniyseniz ve başlamak istiyorsanız, Chrome'un Web Geliştirici araçları dünyasına dalmak bu konuda harika bir yol olabilir. Bunu bir kurs aracılığıyla yaptım Linkedin Öğrenme, bu da beni oldukça hızlı bir şekilde hızlandırdı. Bu temel bilgiye sahip olduğunuzda, bu makaleye geri dönün ve bildiklerinizi Manifest V3'e çevirin!

Peki bundan sonra yeni Manifest V3'teki özellikleri nasıl kullanacağım?

Bana göre Manifest V3'e geçiş ve chrome.webRequest API, uzantıları veri merkezli kullanım durumlarından (reklam engelleyiciler gibi) daha işlevsel ve uygulama tabanlı kullanımlara kaydırıyor gibi görünüyor. Oldukça fazla olabileceği için son zamanlarda uygulama geliştirmeden uzak duruyorum. yoğun kaynak bazen Ancak, bu değişim beni geri getiren şey olabilir!

Birçoğu kullanıma hazır API'lere sahip olan yapay zeka araçlarının son zamanlarda yükselişi, tonlarca yeni ve taze SaaS uygulamasını ateşledi. Şahsen, daha fazla uygulama tabanlı Chrome uzantılarına geçişle mükemmel bir zamanda geldiğini düşünüyorum! Eski uzantıların birçoğu bu geçişten silinebilirken, yeni SaaS fikirleri etrafında inşa edilen pek çok yeni uzantı onların yerini alacak.

Bu nedenle, bu, eski uzantılara atlayıp yenilemek veya yenilerini oluşturmak için heyecan verici bir güncellemedir! Şahsen, bir kullanıcının göz atma deneyimini geliştirmek için uzantılarda kullanılan yapay zekayı içeren API'leri kullanma konusunda birçok olasılık görüyorum. Ama bu gerçekten buzdağının sadece görünen kısmı. Kendi profesyonel uzantılarınızla gerçekten ilgilenmek istiyorsanız veya şirketlere onlar için uzantılar oluşturmak/güncellemek üzere ulaşmak istiyorsanız, tavsiye ederim Gmail hesabınızı yükseltme ortak çalışma, geliştirme ve Chrome Web Mağazası'nda uzantılar yayınlama konusunda sağladığı avantajlar için.

Ancak, her geliştiricinin gereksinimlerinin farklı olduğunu unutmayın, bu nedenle mevcut uzantılarınızı ayakta tutmak veya yeni uzantılarınızı devam ettirmek için neye ihtiyacınız olduğunu öğrenin!

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/