Eğitim: Manifest V2'ye Taşıma

Manifest sürümü 1, Chrome 18'de kullanımdan kaldırıldı ve desteği, manifest sürümü 1 destek planına göre aşamalı olarak sonlandırılacak. 1. sürümden 2. sürüme geçişte yapılan değişiklikler iki geniş kategoriye ayrılır: API değişiklikleri ve güvenlik değişiklikleri.

Bu belgede, Chrome uzantılarınızı manifest sürümü 1'den sürüm 2'ye taşıma ile ilgili kontrol listeleri ve bu değişikliklerin ne anlama geldiği ve neden yapıldığına dair daha ayrıntılı özetler yer almaktadır.

API değişiklikleri kontrol listesi

  • browser_actions özelliğini mi yoksa chrome.browserActions API'sini mi kullanıyorsunuz?

  • browser_actions değerini tekil browser_action özelliğiyle değiştirin.

  • chrome.browserActions yerine chrome.browserAction koyun.

  • icons özelliğini default_icon ile değiştirin.

  • name özelliğini default_title ile değiştirin.

  • popup özelliğini default_popup ile değiştirin (artık dize olmalıdır).

  • page_actions özelliğini mi yoksa chrome.pageActions API'sini mi kullanıyorsunuz?

  • page_actions yerine page_action koyun.

  • chrome.pageActions yerine chrome.pageAction koyun.

  • icons özelliğini default_icon ile değiştirin.

  • name özelliğini default_title ile değiştirin.

  • popup özelliğini default_popup ile değiştirin (artık dize olmalıdır).

  • chrome.self özelliğini kullanıyor musunuz?

  • chrome.extension ile değiştirin.

  • Port.tab özelliğini kullanıyor musunuz?

  • Port.sender ile değiştirin.

  • chrome.extension.getTabContentses() veya chrome.extension.getExtensionTabs() API'lerini mi kullanıyorsunuz?

  • chrome.extension.getViews( { "type" : "tab" } ) ile değiştirin.

  • Uzantınız arka plan sayfası kullanıyor mu?

  • background_page özelliğini background özelliğiyle değiştirin.

  • Sayfanın kodunu içeren bir scripts veya page özelliği ekleyin.

  • Arka plan sayfanızı etkinlik sayfasına dönüştürmek için persistent özelliği ekleyin ve false olarak ayarlayın.

Güvenlik değişiklikleri kontrol listesi

  • HTML sayfalarında satır içi komut dosyası blokları kullanıyor musunuz?

  • <script> etiketleri içinde bulunan JS kodunu kaldırıp harici bir JS dosyasına yerleştirin.

  • Satır içi etkinlik işleyicileri (ör. onclick vb.) kullanıyor musunuz?

  • Bu kodları HTML kodundan kaldırın, harici bir JS dosyasına taşıyın ve bunun yerine addEventListener() kullanın.

  • Uzantınız, uzantı paketinde bulunan kaynaklara (ör. resimler ve komut dosyaları) erişmesi gereken web sayfalarına içerik komut dosyaları yerleştiriyor mu?

  • web_accessible_resources özelliğini tanımlayın ve kaynakları (isteğe bağlı olarak bu kaynaklar için ayrı bir İçerik Güvenliği Politikası) listeleyin.

  • Uzantınız harici web sayfalarını yerleştiriyor mu?

  • sandbox özelliğini tanımlayın.

  • Kodunuz veya kitaplığınız eval(), yeni Function(), innerHTML, setTimeout() kullanıyor mu ya da başka bir şekilde dinamik olarak değerlendirilen JS kodu dizeleri mi iletiyor?

  • JSON kodunu bir nesneye ayrıştırıyorsanız JSON.parse() kullanın.

  • CSP dostu bir kitaplık kullanın (ör. AngularJS).

  • Manifestinizde bir korumalı alan girişi oluşturun ve etkilenen kodu korumalı alanda çalıştırın. Korumalı alanlı sayfayla iletişim kurmak için postMessage() kullanın.

  • jQuery veya Google Analytics gibi harici kodlar mı yüklüyorsunuz?

  • Kitaplığı indirip uzantınızda paketlemeyi ve ardından yerel paketten yüklemeyi deneyin.

  • Manifest dosyanızın "content_security_policy" bölümünde kaynağı sunan HTTPS alanını izin verilenler listesine ekleyin.

API değişikliklerinin özeti

Manifest sürümü 2, tarayıcı işlemi ve sayfa işlemi API'lerinde birkaç değişiklik yapar ve eski API'lerin yerini yenileriyle değiştirir.

Tarayıcı işlemlerinde yapılan değişiklikler

Tarayıcı işlemleri API'sinde bazı adlandırma değişiklikleri yapılmıştır:

  • browser_actions ve chrome.browserActions özellikleri, tekil karşılıkları olan browser_action ve chrome.browserAction ile değiştirildi.
  • Eski browser_actions mülkünde icons, name ve popup mülkleri vardı. Bunların yerine şunlar eklendi:

  • Tarayıcı işlemi rozet simgesi için default_icon

  • Rozetin üzerine geldiğinizde ipucunda görünen metin için default_name

  • Tarayıcı işleminin kullanıcı arayüzünü temsil eden HTML sayfası için default_popup (Bu artık bir dize olmalı, nesne olamaz.)

Sayfa işlemlerinde yapılan değişiklikler

Tarayıcı işlemlerinde yapılan değişikliklere benzer şekilde, sayfa işlemleri API'sinde de değişiklik yapıldı:

  • page_actions ve chrome.pageActions özellikleri, tekil karşılıkları olan page_action ve chrome.pageAction ile değiştirildi.
  • Eski page_actions mülkünde icons, name ve popup mülkleri vardı. Bunların yerine aşağıdakiler kullanılıyor:

  • Sayfa işlemi rozeti simgesi için default_icon

  • Rozetin üzerine geldiğinizde ipucunda görünen metin için default_name

  • Sayfa işleminin kullanıcı arayüzünü temsil eden HTML sayfası için default_popup (Bu artık bir dize olmalıdır, nesne olamaz.)

Kaldırılan ve değiştirilen API'ler

Bazı uzantı API'leri kaldırıldı ve yerlerine yenileri eklendi:

  • background_page özelliği, background ile değiştirildi.
  • chrome.self özelliği kaldırıldı, chrome.extension özelliğini kullanın.
  • Port.tab özelliği, Port.sender ile değiştirildi.
  • chrome.extension.getTabContentses() ve chrome.extension.getExtensionTabs() API'lerinin yerini chrome.extension.getViews( { "type" : "tab" } ) aldı.

Güvenlik değişikliklerinin özeti

Manifest sürüm 1'den sürüm 2'ye geçişle birlikte güvenlikle ilgili çeşitli değişiklikler yapıldı. Bu değişikliklerin çoğu, Chrome'un Content Security Policy'yi (İçerik Güvenliği Politikası) benimsemesinden kaynaklanmaktadır. Bu politikanın etkilerini anlamak için daha fazla bilgi edinmeniz gerekir.

Satır içi komut dosyalarına ve etkinlik işleyicilere izin verilmiyor

İçerik Güvenliği Politikası kullanıldığından artık HTML içeriğiyle satır içi olan <script> etiketlerini kullanamazsınız. Bunlar harici JS dosyalarına taşınmalıdır. Ayrıca satır içi etkinlik işleyicileri de desteklenmez. Örneğin, uzantınızda aşağıdaki kodun olduğunu varsayalım:

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

Bu kod, çalışma zamanında hataya neden olur. Bu sorunu düzeltmek için <script> etiket içeriklerini harici dosyalara taşıyın ve bunları src='path_to_file.js' özelliğiyle referanslayın.

Benzer şekilde, birçok web geliştiricisi tarafından kullanılan yaygın bir özellik ve kolaylık olan satır içi etkinlik işleyicileri de yürütülmez. Örneğin, aşağıdaki gibi yaygın durumları göz önünde bulundurun:

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

Bunlar, Manifest V2 uzantılarında çalışmaz. Satır içi etkinlik işleyicilerini kaldırın, bunları harici JS dosyanıza yerleştirin ve bunun yerine etkinlik işleyicilerini kaydetmek için addEventListener() kullanın. Örneğin, JS kodunuzda şunu kullanın:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

Bu, uzantınızın davranışını kullanıcı arayüzü işaretlemesinden ayırmanın çok daha temiz bir yoludur.

İçerik yerleştirme

Uzantınızın, harici olarak kullanılabilecek veya harici bir kaynaktan gelen içerikleri yerleştirebileceği bazı senaryolar vardır.

Web sayfalarındaki uzantı içeriği: Uzantınız, web sayfalarına yerleştirilen içerik komut dosyalarında kullanılan kaynakları (ör. resimler, komut dosyası, CSS stilleri vb.) yerleştiriyorsa bu kaynakları izin verilenler listesine eklemek için web_accessible_resources özelliğini kullanmanız gerekir. Böylece harici web sayfaları bu kaynakları kullanabilir:

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

Harici içerik yerleştirme: İçerik Güvenliği Politikası, yalnızca yerel komut dosyalarının ve nesnelerin paketinizden yüklenmesine izin verir. Bu da harici saldırganların uzantınıza bilinmeyen kodlar eklemesini engeller. Ancak, jQuery veya Google Analytics kodu gibi harici olarak sunulan kaynakları yüklemek istediğiniz zamanlar olabilir. Bunu yapmanın iki yolu vardır:

  1. İlgili kitaplığı (ör. jQuery) yerel olarak indirin ve uzantınızla birlikte paketleyin.
  2. Manifest dosyanızın "content_security_policy" bölümünde HTTPS kaynaklarının izin verilenler listesine eklenmesine izin vererek İGP'yi sınırlı şekilde gevşetebilirsiniz. Google Analytics gibi bir kitaplığı dahil etmek için şu yaklaşımı kullanın:

    {
      ...,
      "content_security_policy": "script-src 'self'
      https://ssl.google-analytics.com; object-src 'self'",
      ...
    }
    

Dinamik komut dosyası değerlendirmesini kullanma

Yeni manifest v2 şemasındaki belki de en büyük değişikliklerden biri, uzantıların artık eval() veya yeni Function() gibi dinamik komut dosyası değerlendirme tekniklerini kullanamaması ya da setTimeout() gibi eval() kullanımına neden olacak işlevlere JS kodu dizeleri iletememesidir. Ayrıca, Google Haritalar ve belirli şablon oluşturma kitaplıkları gibi en çok tercih edilen bazı JavaScript kitaplıklarının bu tekniklerden bazılarını kullandığı bilinmektedir.

Chrome, sayfaların kendi kaynağında çalışması için bir korumalı alan sağlar. Bu sayfaların chrome.* alanına erişimi engellenir. API'ler. Yeni İçerik Güvenliği Politikası kapsamında eval() ve benzerlerini kullanmak için:

  1. Manifest dosyanızda bir sanal alan girişi oluşturun.
  2. Koruma alanı girişinde, koruma alanında çalıştırmak istediğiniz sayfaları listeleyin.
  3. Koruma alanına alınmış sayfayla iletişim kurmak için postMessage() üzerinden mesaj iletimini kullanın.

Bunun nasıl yapılacağıyla ilgili daha fazla bilgi için Sandboxing Eval dokümanlarına bakın.

Daha fazla bilgi

Manifest sürümü 2'deki değişiklikler, geliştiricileri daha güvenli ve sağlam bir şekilde tasarlanmış uzantılar ve uygulamalar oluşturmaya yönlendirmek için tasarlanmıştır. Manifest sürüm 1'den sürüm 2'ye kadar yapılan değişikliklerin tam listesini görmek için manifest dosyası dokümanlarına bakın. Güvenli olmayan kodu izole etmek için korumalı alan kullanma hakkında daha fazla bilgi edinmek istiyorsanız Korumalı alan değerlendirmesi makalesini inceleyin. İçerik Güvenliği Politikası hakkında daha fazla bilgi edinmek için uzantılarla ilgili eğitimimizi ve HTML5Rocks'taki iyi bir giriş yazısını inceleyebilirsiniz.