Merhaba arkadaşlar. Bugünkü rehberimde C# ile nasıl Microsoft Edge WebView2 tabanlı bir web tarayıcısı yapıldığını anlatacağım.
Öncelikle en baştan şunu söyleyeyim, bunula ilgili yaptığım bir videolu rehber mevcut. Uzun uzun yazı okumak istemiyorsanız videolu rehberi izlemenizi öneririm. Videolu rehberi izlemek istiyorsanız link:
C# veya Visual Basic ile web tarayıcısı yapmak aslında nereden baksanız en az 15 yıldır anlatılmakta (Türkçe kaynaklar için konuşuyorum). İlk rehberlerin tamamı MSHTML (Internet Explorer) tabanlı bir tarayıcı yapmak üzerine idi.
Daha sonra hayatımıza CefSharp girdi ve CefSharp ile Chromium tabanlı bir C# web tarayıcısı yapmak mümkün hale geldi. CefSharp ile ilgili de birçok rehber yapıldı.
Fakat Microsoft da boş durmadı elbette ve önce EdgeHTML tabanlı WebView'i geliştirdi. Daha sonra ise günümüzün Microsoft Edge WebView2’si çıktı. WebView2, Microsoft Edge Chromium tabanlı. Yani aynı Chromium Embedded Framework (CefSharp'ın altyapısında Chromium Embedded Framework bulunuyor) gibi Blink ve V8 motorlarını kullanıyor. Fakat CEF'in aksine WebView2, Microsoft Edge'in kodunu baz alıyor. CEF ise stok Chromium'u baz alıyor.
WebView2'nin en büyük avantajı, kendisini sitelere doğrudan Microsoft Edge olarak tanıtması. Yani Chromium ve CEF tarafının aksine Google gibi siteler oturum açmanızı engellemiyor. Eğer bilmiyorsanız CEF tabanlı tarayıcılarda Google'da oturum açılamıyor. Steam'in oyun içi web tarayıcısı da buna dahil. Fakat kendi denemelerimde WebView2 tabanlı tarayıcılarda Google'da sorunsuzca oturum açabildim. Ayrıca YouTube'dan kendi YouTube Premium hesabım ile sorunsuzca reklamsız video izleyebildim.
Şimdi rehberimize geçelim.
İlk olarak bu tarayıcıyı yapmak için bazı gereksinimler mevcut.
Resimdeki gibi bir adet C# Windows Forms App (.NET Framework) projesi oluşturuyoruz. Daha sonra projemize isim veriyoruz:
En alttaki Framework kısmı çok önemli. Bu ayarın en az .NET Framework 4.7.2 olması şart. Şu seçeneklerden birini seçin:
Daha sonra Create diyerek projemizi oluşturuyoruz. Projeyi oluşturduktan sonra Solution Explorer'da projemize sağ tıklayıp Manage NuGet Packages diyoruz:
Daha sonra açılan NuGet sayfasında Browse'a tıklıyoruz:
Arama kutusuna "webview2" yazıyoruz ve çıkan ilk sonuç olan Microsoft.Web.WebView2 eklentisine tıklıyoruz:
Tüm bunlardan sonra karşımıza şöyle bir ekran çıkacaktır:
Burada Install diyerek kurulumu başlatıyoruz.
Bu pencerede de Apply diyoruz ve kurulum başlıyor.
Kurulum tamamlandıktan sonra NuGet penceresi şu şekilde olmalı:
Eğer burada Uninstall yazıyorsa kurulum sorunsuzca tamamlanmış demektir.
Şimdi NuGet penceresini kapatıyoruz ve formumuza geçiyoruz.
Toolbox'ı açıyoruz, en üstte yer alan WebView2 Windows Forms Control'ü genişletiyoruz ve WebView2'ye çift tıklayarak WebView2'yi formumuza ekliyoruz:
WebView2 forma eklenince böyle görünüyor:
Şimdi WebView2 seçiliyken Properties kısmına geliyoruz ve ayarları yapmaya başlıyoruz.
İlk olarak Name kısmındaki ismi
Daha sonra aşağıya inip Source kısmına program ilk açıldığında WebView2'nin açmasını istediğimiz site adresini yazıyoruz:
Örnek olarak ben Google yaptım.
Son olarak Anchor kısmına gelip tüm kancaları seçiyoruz:
Tüm işlemlerden sonra WebView2'yi yeniden boyutlandırıp tüm formu kaplayacak şekle getiriyoruz:
Tüm her şey tamam ise programımızı çalıştırabiliriz. Programımızı çalıştırıyoruz, eğer program açıldığında Google ana sayfası açılırsa sorun yok demektir.
Programımızı kapatıyoruz ve butonları eklemeye başlıyoruz. Toplam 5 adet Button ve 1 adet TextBox ekliyoruz:
Daha sonra butonları isimlendiriyoruz. Button1 Git, Button2 Geri, Button3 İleri, Button4 Yenile ve Button5 Ana Sayfa olacak. Tabii ki siz istediğiniz gibi yapabilirsiniz
Ben bu şekilde daha mantıklı buldum.
Şimdi kodlamaya geçiyoruz. İlk olarak formun boş bir alanına sağ tıklayıp View Code diyoruz ve en baştaki Using kodlarına şu kodu ekliyoruz:
Bununla birlikte Using kodları şunun gibi oluyor:
Daha sonra butonları kodlamaya başlıyoruz. Git butonunun kodu:
Geri butonu:
İleri butonu:
Yenile butonu:
Ana Sayfa butonu:
Ana Sayfa butonunda Navigate kısmındaki URL'yi ana sayfanın hangi site olmasını istiyorsanız o yapabilirsiniz. Ben açılış URL'si ile (webView1'in Source kısmına yazdığımız URL) aynı yaptım, size de bunu öneririm.
Şimdi programımızı deneyebiliriz.
Tarayıcı açılır açılmaz Google açılıyor. Technopat Sosyal'e girmeyi deniyoruz ve sorunsuz açılıyor:
Sırasıyla Geri, İleri ve Yenile butonları sorunsuz çalışmakta. Resimle göstermem epey zor fakat sorunsuz çalışmaktalar. Makalemin sonunda videolu rehberimi paylaştım, o rehberi izleyerek sonucu detaylı olarak görebilirsiniz. Ana Sayfa butonuna tıkladığımızda Google tekrar açılıyor:
Yani Ana Sayfa butonu da çalışıyor.
Şimdi Google'da oturum açmayı deneyelim. Normal CEF ile oturum açmaya çalıştığınızda e-postanızı girip Sonraki dediğinizde şuna benzer bir hata alacaksınız:
Şimdi WebView2 ile deniyoruz. E-posta adresimizi yazıyoruz:
Sonraki dediğimizde ise CEF'in (yani CefSharp'ın) aksine doğrudan şifre ekranı geliyor. Şifreyi de girince iki faktörlü doğrulama ekranı geliyor:
Bu doğrulamayı da telefondan onayladığımız gibi mutlu son ile karşılaşıyoruz:
Gördüğünüz gibi sorunsuzca Google oturumunu açabildik. YouTube'a girdiğimizde de hesabımız kullanılmaya devam ediliyor:
Sol üstte gördüğünüz gibi Premium yazmakta. CEF üzerinden YouTube'a girebilseniz bile oturum açamadığınız için Premium olarak kullanamıyorsunuz. WebView2 ise taş gibi çalışıyor.
Bu arada eğer merak ediyorsanız programı kapatıp açtığınızda da Google oturumu açık kalmaya devam ediyor. Yani sisteme kaydediyor.
Evet, rehber epey uzun oldu. Ancak videolu rehberimi doğrudan paylaşmak sakıncalı olabilir ve reklam sayılabilir diye düşündüğüm için tam teşekküllü bir yazılı rehber hazırlamak istedim.
Bu programlama rehberimde C# ile nasıl Microsoft Edge WebView2 tabanlı bir web tarayıcısı yapabileceğinizi anlattım. Umarım rehberim sizler için faydalı olmuştur. CefSharp rehberleri patır patır yayınlanırken WebView2 hakkında bir tane bile Türkçe rehberin olmamasından dolayı Türkçe bir WebView2 rehberi yapmak istedim.
Öncelikle en baştan şunu söyleyeyim, bunula ilgili yaptığım bir videolu rehber mevcut. Uzun uzun yazı okumak istemiyorsanız videolu rehberi izlemenizi öneririm. Videolu rehberi izlemek istiyorsanız link:
C# veya Visual Basic ile web tarayıcısı yapmak aslında nereden baksanız en az 15 yıldır anlatılmakta (Türkçe kaynaklar için konuşuyorum). İlk rehberlerin tamamı MSHTML (Internet Explorer) tabanlı bir tarayıcı yapmak üzerine idi.
Daha sonra hayatımıza CefSharp girdi ve CefSharp ile Chromium tabanlı bir C# web tarayıcısı yapmak mümkün hale geldi. CefSharp ile ilgili de birçok rehber yapıldı.
Fakat Microsoft da boş durmadı elbette ve önce EdgeHTML tabanlı WebView'i geliştirdi. Daha sonra ise günümüzün Microsoft Edge WebView2’si çıktı. WebView2, Microsoft Edge Chromium tabanlı. Yani aynı Chromium Embedded Framework (CefSharp'ın altyapısında Chromium Embedded Framework bulunuyor) gibi Blink ve V8 motorlarını kullanıyor. Fakat CEF'in aksine WebView2, Microsoft Edge'in kodunu baz alıyor. CEF ise stok Chromium'u baz alıyor.
WebView2'nin en büyük avantajı, kendisini sitelere doğrudan Microsoft Edge olarak tanıtması. Yani Chromium ve CEF tarafının aksine Google gibi siteler oturum açmanızı engellemiyor. Eğer bilmiyorsanız CEF tabanlı tarayıcılarda Google'da oturum açılamıyor. Steam'in oyun içi web tarayıcısı da buna dahil. Fakat kendi denemelerimde WebView2 tabanlı tarayıcılarda Google'da sorunsuzca oturum açabildim. Ayrıca YouTube'dan kendi YouTube Premium hesabım ile sorunsuzca reklamsız video izleyebildim.
Şimdi rehberimize geçelim.
İlk olarak bu tarayıcıyı yapmak için bazı gereksinimler mevcut.
- Sisteminizde mutlaka Microsoft Edge WebView2 Runtime yüklü olmalıdır. Çünkü programa yerleştireceğimiz WebView2 kütüphanesi asıl tarayıcının kendisini barındırmıyor, onun yerine sistemde yüklü olan Runtime'ı kullanıyor. Eğer Windows 11 kullanıyorsanız muhtemelen bu Runtime sisteminizde yüklüdür. Windows 11'i kurduktan sonra bir noktada kesinlikle bu Runtime kuruluyor. Fakat eğer siz bir şekilde sildiyseniz yeniden kurmalısınız.
- Visual Studio 2017 ve üstü. Benim tavsiyem ise doğrudan 2022 kullanmanızdır. Zira 2017'de SDK'yı projeye eklediğinizde WebView2 kontrolü Toolbox'a direkt gelmiyor, ek ayar yapmanız gerekiyor. Bununla uğraşmamak için 2022 kullanmak en iyisi.
Resimdeki gibi bir adet C# Windows Forms App (.NET Framework) projesi oluşturuyoruz. Daha sonra projemize isim veriyoruz:
En alttaki Framework kısmı çok önemli. Bu ayarın en az .NET Framework 4.7.2 olması şart. Şu seçeneklerden birini seçin:
Daha sonra Create diyerek projemizi oluşturuyoruz. Projeyi oluşturduktan sonra Solution Explorer'da projemize sağ tıklayıp Manage NuGet Packages diyoruz:
Daha sonra açılan NuGet sayfasında Browse'a tıklıyoruz:
Arama kutusuna "webview2" yazıyoruz ve çıkan ilk sonuç olan Microsoft.Web.WebView2 eklentisine tıklıyoruz:
Tüm bunlardan sonra karşımıza şöyle bir ekran çıkacaktır:
Burada Install diyerek kurulumu başlatıyoruz.
Bu pencerede de Apply diyoruz ve kurulum başlıyor.
Kurulum tamamlandıktan sonra NuGet penceresi şu şekilde olmalı:
Eğer burada Uninstall yazıyorsa kurulum sorunsuzca tamamlanmış demektir.
Şimdi NuGet penceresini kapatıyoruz ve formumuza geçiyoruz.
Toolbox'ı açıyoruz, en üstte yer alan WebView2 Windows Forms Control'ü genişletiyoruz ve WebView2'ye çift tıklayarak WebView2'yi formumuza ekliyoruz:
WebView2 forma eklenince böyle görünüyor:
Şimdi WebView2 seçiliyken Properties kısmına geliyoruz ve ayarları yapmaya başlıyoruz.
İlk olarak Name kısmındaki ismi
webView1 olarak değiştiriyoruz:Daha sonra aşağıya inip Source kısmına program ilk açıldığında WebView2'nin açmasını istediğimiz site adresini yazıyoruz:
Örnek olarak ben Google yaptım.
Son olarak Anchor kısmına gelip tüm kancaları seçiyoruz:
Tüm işlemlerden sonra WebView2'yi yeniden boyutlandırıp tüm formu kaplayacak şekle getiriyoruz:
Tüm her şey tamam ise programımızı çalıştırabiliriz. Programımızı çalıştırıyoruz, eğer program açıldığında Google ana sayfası açılırsa sorun yok demektir.
Programımızı kapatıyoruz ve butonları eklemeye başlıyoruz. Toplam 5 adet Button ve 1 adet TextBox ekliyoruz:
Daha sonra butonları isimlendiriyoruz. Button1 Git, Button2 Geri, Button3 İleri, Button4 Yenile ve Button5 Ana Sayfa olacak. Tabii ki siz istediğiniz gibi yapabilirsiniz
Ben bu şekilde daha mantıklı buldum.Şimdi kodlamaya geçiyoruz. İlk olarak formun boş bir alanına sağ tıklayıp View Code diyoruz ve en baştaki Using kodlarına şu kodu ekliyoruz:
C#:
using Microsoft.Web.WebView2.Core;
C#:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using Microsoft.Web.WebView2.Core;Daha sonra butonları kodlamaya başlıyoruz. Git butonunun kodu:
C#:
if (webView1 != null && webView1.CoreWebView2 != null)
{
webView1.CoreWebView2.Navigate(textBox1.Text);
}Geri butonu:
C#:
if (webView1 != null && webView1.CoreWebView2 != null)
{
webView1.CoreWebView2.GoBack();
}İleri butonu:
C#:
if (webView1 != null && webView1.CoreWebView2 != null)
{
webView1.CoreWebView2.GoForward();
}Yenile butonu:
C#:
if (webView1 != null && webView1.CoreWebView2 != null)
{
webView1.CoreWebView2.Reload();
}Ana Sayfa butonu:
C#:
if (webView1 != null && webView1.CoreWebView2 != null)
{
webView1.CoreWebView2.Navigate("https://www.google.com.tr");
}Şimdi programımızı deneyebiliriz.
Tarayıcı açılır açılmaz Google açılıyor. Technopat Sosyal'e girmeyi deniyoruz ve sorunsuz açılıyor:
Sırasıyla Geri, İleri ve Yenile butonları sorunsuz çalışmakta. Resimle göstermem epey zor fakat sorunsuz çalışmaktalar. Makalemin sonunda videolu rehberimi paylaştım, o rehberi izleyerek sonucu detaylı olarak görebilirsiniz. Ana Sayfa butonuna tıkladığımızda Google tekrar açılıyor:
Yani Ana Sayfa butonu da çalışıyor.
Şimdi Google'da oturum açmayı deneyelim. Normal CEF ile oturum açmaya çalıştığınızda e-postanızı girip Sonraki dediğinizde şuna benzer bir hata alacaksınız:
Şimdi WebView2 ile deniyoruz. E-posta adresimizi yazıyoruz:
Sonraki dediğimizde ise CEF'in (yani CefSharp'ın) aksine doğrudan şifre ekranı geliyor. Şifreyi de girince iki faktörlü doğrulama ekranı geliyor:
Bu doğrulamayı da telefondan onayladığımız gibi mutlu son ile karşılaşıyoruz:
Gördüğünüz gibi sorunsuzca Google oturumunu açabildik. YouTube'a girdiğimizde de hesabımız kullanılmaya devam ediliyor:
Sol üstte gördüğünüz gibi Premium yazmakta. CEF üzerinden YouTube'a girebilseniz bile oturum açamadığınız için Premium olarak kullanamıyorsunuz. WebView2 ise taş gibi çalışıyor.
Bu arada eğer merak ediyorsanız programı kapatıp açtığınızda da Google oturumu açık kalmaya devam ediyor. Yani sisteme kaydediyor.
Evet, rehber epey uzun oldu. Ancak videolu rehberimi doğrudan paylaşmak sakıncalı olabilir ve reklam sayılabilir diye düşündüğüm için tam teşekküllü bir yazılı rehber hazırlamak istedim.
Bu programlama rehberimde C# ile nasıl Microsoft Edge WebView2 tabanlı bir web tarayıcısı yapabileceğinizi anlattım. Umarım rehberim sizler için faydalı olmuştur. CefSharp rehberleri patır patır yayınlanırken WebView2 hakkında bir tane bile Türkçe rehberin olmamasından dolayı Türkçe bir WebView2 rehberi yapmak istedim.
