Önceki yazıda (bkz: Merhaba Dünya Google Chrome Eklentisi Geliştirmek) hangi sayfayı açarsak açalım, bize javascript ile alert penceresi içerisinde merhaba dünya mesajı veren bir uygulama hazırlamıştık. Bu yazıda ise tarayıcı eklentilerinin büyük bir kısmında yer alan ve eklenti ikonuna basıldığında çıkan ekranları (html dosyalarını) nasıl ekleyebileceğimizi göreceğiz.
Not: Önceki sorudaki projeye devam ediyorum, proje oluşturma konusunda üstteki merhaba dünya yazısına gidip kodları görebilirsiniz.
1. Projeyi açalım ve proje klasörü içerisine popup.html adında bir html dosyası ekleyelim
2. manifest.json dosyasını aşağıdaki gibi güncelleyin
{
"name":"merhaba",
"version":"1.0",
"manifest_version":2,
"content_scripts":[
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"browser_action":{
"default_popup": "popup.html",
"default_title": "Merhaba reitix"
}
}
3. HTML kodlarını HTML şablonu olaraj hızlıca oluşturalım (bkz: VS Code HTML Kod Şablonu Ekleme Klavye Kısayolu)
4. HTML kodlarında body etiketi içerisine merhaba reitix ya da eklemek istediğiniz yazıyı ekleyin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Merhaba</title>
</head>
<body>
<span>Merhaba Reitix</span>
</body>
</html>
5. chrome://extensions/ url'sine girerek eklentinizi güncelleyin
6. Artık herhangi bir internet sitesine girdiğinizde ve eklenti ikonunuza bastığınızda merhaba dünya yazısı bu ikon altında html dosyasında yazdığınız biçimde görüntülenecektir.
Benzer yazılar için:
bkz: ConvNetJS nedir?
bkz: Visual Studio 2019'un yeni özellikleri nelerdir?
bkz: CSS ile rastgele sayı üretmek
bkz: Moment.js kullanımı örnekleri
bkz: Bootstrap icons vs FontAwesome