Bu yazıda, Google Chrome Extension geliştirmeye örnek bir uygulama olarak TCMB'nin sağladığı günlük kurlar XML dosyasındaki verileri çekip uygulamada göstererek, extension yapısının pekişmesini hedefliyorum.
Başlamadan önce temellere değindiğim aşağıdaki yazıya göz atmanızı tavsiye ederim.
Geliştirme sırasında herhangi bir kod editör kullanılabilir. Bu çalışma için VS Code ortamı kullanılacaktır.
Extensions Proje Yapısı
popup.js: Extension uygulamasının script kodlarını içerir. fetch API ile TCMB today.xml dosyasından verilerin çekilip dönüş verileri ile tablonun oluşturulmasıdır. Kodlar sadece javascript kodu içermekte olup ek bir kütüphane içermez.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const xmlUrl = 'https://www.tcmb.gov.tr/kurlar/today.xml'; | |
| fetch(xmlUrl) | |
| .then(response => response.text()) | |
| .then(xmlText => { | |
| const parser = new DOMParser(); | |
| const xmlDoc = parser.parseFromString(xmlText, 'application/xml'); | |
| const currencyNodes = xmlDoc.getElementsByTagName('Currency'); | |
| for (let i = 0; i < currencyNodes.length; i++) { | |
| const currencyNode = currencyNodes[i]; | |
| const currencyName = currencyNode.querySelector('Isim').textContent; | |
| const currencyForexSelling = currencyNode.querySelector('ForexSelling').textContent; | |
| const currencyForexBuying = currencyNode.querySelector('ForexBuying').textContent; | |
| const row = document.createElement('tr'); | |
| const firstNameCell = document.createElement('td'); | |
| firstNameCell.textContent = currencyName; | |
| row.appendChild(firstNameCell); | |
| const lastNameCell = document.createElement('td'); | |
| lastNameCell.textContent = currencyForexBuying; | |
| row.appendChild(lastNameCell); | |
| const ageCell = document.createElement('td'); | |
| ageCell.textContent = currencyForexSelling; | |
| row.appendChild(ageCell); | |
| tableBody.appendChild(row); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('XML verisi çekilirken hata oluştu:', error); | |
| }); |
popup.html: Extension uygulamasının HTML kodunu içerir. Dosyadaki en önemli yapı table elementidir. table -> tbody elementinin id'si olan tableBody içeriğini javascript işlemleri doldurur. head etiketinde bulunan Bootstrap kütüphanesi cdn linki ile dahil edilmiştir. Böylece dış bir css frameworkünü de ekleyebilmiş olduk.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> <div class="container mt-3" style="width: 450px;"></div> | |
| <h2 class="text-center">TCMB Döviz Kurları</h2> | |
| <table class="table table-bordered table-striped" id="myTable"> | |
| <thead> | |
| <tr> | |
| <th>Para birimi</th> | |
| <th>Alış</th> | |
| <th>Satış</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"> | |
| </tbody> | |
| </table> </div> | |
| <script src="./popup.js" type="module"></script> | |
| </body> | |
| </html> |
images klasörüne uzantıda görünecek png uzantılı 16,32,48 ve 128 px boyutlarında ikon logoları eklendi.
manifest.json:Uzantı hakkında temel yapılandırma ayarlarını içerir. Uzantının yetenekleri ve kullandığı dosyalar hakkında bilgi verir. Chrome uzantılarında olması zorunlu bir dosyadır.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "manifest_version": 3, | |
| "name": "Get Currency", | |
| "description": "Anlık döviz kurunu görüntülemeyi sağlar.", | |
| "version": "1.0", | |
| "icons": { | |
| "16": "images/icon-16.png", | |
| "32": "images/icon-32.png", | |
| "48": "images/icon-48.png", | |
| "128": "images/icon-128.png" | |
| }, | |
| "action": { | |
| "default_popup": "popup.html" | |
| }, | |
| "content_scripts": [ | |
| { "js": ["/popup.js"], "matches": ["https://www.tcmb.gov.tr/*"] } | |
| ] | |
| } |
Aşağıdaki cors hatasını almamak için content_scripts içerisinde matches propertysine tcmb sitesinin linkini vermek gerekir. manifest.json dosyasındaki pattern yapısındaki * işareti, https://www.tcmb.gov.tr/ ile başlayan linkleri scripte enjekte edilip uzantıda kullanabilmesini ve js properysinde belirtilen popup.js dosyasında kullanılabilmesini sağlar.
content_script propertysi, web sayfaları bağlamında çalışan javascript dosyalarını belirtir.
action: Uzantının kullanacağı varsayılan html, image dosyalarını belirtiği json keydir. default_popup ise uzantıya tıkladığında açılacak olan HTML dosyasını belirtmeye yarar.
Dosyaların oluşması sonucu proje yapısı aşağıdaki gibidir.
GetCurrency/
├─ images/
│ ├─ icon-16.png
│ ├─ icon-32.png
│ ├─ icon-48.png
│ ├─ icon-128.png
├─ manifest.json
├─ popup.html
├─ popup.js
Extension Projesinin Yayına Alınması ve Tarayıcıda Kullanılabilmesi
Tarayıcıdaki üç noktadan Uzantılar -> Uzantıları Yönet sekmesi seçilir.
Geliştirdiğimiz uzantıyı test edebilmek için Geliştirici Modu (Developer Mode) aktif olmalıdır. Açılan ekrandan bu ayar yapılabilir.
Paketlenmemiş Öğe butonuna tıklanarak proje yüklenebilir. manifest.json dosyası, projenin ana dizininde mutlaka olmalıdır.
Yükleme tamamlandığında oluşacak görüntülerin aşağıdaki gibi olması beklenir.
Uzantılar sayfasındaki görüntü
Adres çubuğundaki görüntü
Uzantının kullanımı
Özetle; temel web teknolojisi bilgilerine ek olarak fetch API kullanarak web servisten veri çekerek Google Chrome'de kullanılabilecek bir extension geliştirilmesini deneyimledik.
Proje için Github Linki: GetCurrency Extension
Dokümanlar ve Tutorial Kaynaklar
Yazının faydalı olmasını umarak, çalışmalarınızda kolaylıklar diliyorum :)
Yorumlar
Yorum Gönder