Chrome eklentisi nasıl yapılır?

Google’ın Chrome Web Mağazasına bir eklenti/extension hazırlamak ve eklemek için yapılması gereken ilk şey bir developer hesabı açmaktır, bunu https://chrome.google.com/webstore/devconsole/ adresinden Google hesabınızla yapabilirsiniz.

Ardından extension yazıp bunu .zip’leyip devconsole’dan hesabınıza yüklemeniz gerekiyor, yüklediğiniz extension incelenip yayına alınıyor.

Şimdi extension yazalım.

Chrome extension için extension klasörü içerisinde 2 temel dosya gerekir, birincisi manifest.json ikincisi iconlar(extension ikonları), ikonlar olmasa da olur ancak bu durumda tarayıcıda extension varsayılan ikonla gösterilir.

manifest.json içeriği basitçe aşağıdaki gibidir, daha fazla bilgi için https://developer.chrome.com/extensions/manifest

{
   "author": "VOLKAN YILMAZ",
   "description": "Get the latest WOLKANCA stories when you open a new tab.",
    "browser_action":{
      "default_popup": "wolkanca.html"
   },
   "icons":{
      "16": "icon-16x16.png",
	  "32": "icon-32x32.png",
	  "48": "icon-48x48.png",
	  "128": "icon-128x128.png",
	  "380": "icon-310x310.png"
  },
   "manifest_version": 2,
   "name": "WOLKANCA",
   "version": "1.1",
  "homepage_url": "https://wolkanca.com/"
}

manifest.json içerisinde wolkanca.html fark etmişsinizdir, bu sizin eklentinizin popup olarak açılacak sayfasıdır. İçeriği aşağıdaki gibi örnek ben iframe koydum:

<!doctype html><html>
<head>
  <meta charset="utf-8">
  <title>WOLKANCA</title>
</head>
<body>
<iframe src="https://wolkanca.com/" frameborder="0" scrolling="yes" seamless="seamless" height="100%" width="100%">
    Your browser doesn’t support iframes
</iframe>
</body>
</html>

Hepsi bu kadar, manifest.json, ikonlar, wolkanca.html bu dosyaları bir klasör içerisine koyup, zipleyip https://chrome.google.com/webstore/devconsole/ hesabınızdan yüklemeniz ve eklentinizin Chrome Web Store’da başlığı, görselleri ve açıklamalarıyla nasıl görüneceğini yapılandırıp inceleme için gönderebilirsiniz.

Chrome eklentilerinde HTML, Javascript ve CSS izin verilmekte bunları kullanarak daha karmaşık değişik eklentiler yapmanız mümkün.

Benim bu yazdığım örnek Chrome eklentisini yüklemek için: https://chrome.google.com/webstore/search/wolkanca adresini ziyaret edebilirsiniz.