Bookmarklet Oluşturucu: JavaScript’i bookmarklet’e dönüştürün

Bu bookmarklet oluşturucu nasıl kullanılır

1. Yer imine bir ad verin ve JavaScript kodunuzu kod kutusuna yapıştırın; ya da bitmiş bir örneği görmek için Sayfa başlığı örneğini yükle düğmesine basın. Başta javascript: olması gerekmez; oluşturucu bunu kaldırır ve kendi önekini ekler.
2. Bookmarklet oluştur düğmesine basın. Oluşturulan URL, karakter cinsinden uzunluğuyla birlikte aşağıda görünür.
3. Koyu renkli düğmeyi yer imi çubuğuna sürükleyin. Çubuk gizliyse önce tarayıcınızın Görünüm menüsünden veya ayarlarından açın.
4. Herhangi bir sayfayı açın ve yer imine tıklayın. Betik, o sayfa üzerinde bir kez çalışır.

Düğmeye bu sayfada tıklamak bilerek hiçbir şey yapmaz — bookmarklet, oluşturucuda değil, okuduğunuz sayfada çalışmak üzere tasarlanmıştır. Betiği önce küçük bir sayfada denemek, ardından asıl işinizi yaptığınız sayfada kullanmak en güvenli alışkanlıktır.

Bookmarklet aslında nedir

Bookmarklet, adresi https: yerine javascript: ile başlayan sıradan bir tarayıcı yer imidir. Bir sayfa açıp yer imine tıkladığınızda tarayıcı hiçbir yere gitmez; betiğinizi o sayfa üzerinde çalıştırır. Bookmarklet’ler sayfaya özgü işlerde işe yarar: biçimlendirilmiş bir alıntıyı kopyalamak, okuma görünümünü açıp kapatmak, seçili metni çıkarmak ya da geçerli URL’yi başka bir hizmette açmak gibi. Eklenti kurulumu gerektirmezler, izin istemezler ve yer imi çubuğunda diğer bağlantılar gibi dururlar.

JavaScript nasıl bookmarklet’e dönüştürülür

Bir betiği elle dönüştürmek üç adım sürer ve oluşturucu bunların her birini sizin yerinize yapar. İşte iki satırlık bir betik ve dönüştüğü bookmarklet:

const n = document.links.length;
alert('Bu sayfada ' + n + ' bağlantı var');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert('Bu%20sayfada%20'%20%2B%20n%20%2B%20'%20ba%C4%9Flant%C4%B1%20var')%3B%0A%7D)()

1. Kodu bir fonksiyonun içine alın

Araç kodunuzu hemen çağrılan bir ok fonksiyonunun,(() => { … })(), içine yerleştirir. Bu, değişkenlerinizin sayfanın zaten tanımladığı adlarla çakışmasını önler ve ikinci bir nedenle de önemlidir: birjavascript: URL’sindeki kod bir metin değeriyle bittiğinde tarayıcı sayfayı, o metni gösteren yeni bir belgeyle değiştirir. Blok gövdeli bir fonksiyon hiçbir şey döndürmez, dolayısıyla sayfa yerinde kalır. Elle yazarken klasik alternatif, kodavoid ile başlamaktır.

2. Yüzde işaretiyle kodlayın

Tarayıcılar bir URL’yi kullanmadan önce içindeki ham sekme ve satır sonu karakterlerini siler; bu yüzden çok satırlı bir betik doğrudan yer imine yapıştırılırsa tek satıra sıkışır. Bu durumda tek bir // yorumu kendisinden sonraki her şeyi yutar ve satır sonlarına dayanan ifadeler birbirine karışır. Kodlama her satır sonunu%0A’ya çevirir ve bu şekilde korunur; tarayıcı kodu çalıştırmadan hemen önce yüzde kodlamasını geri çözer. Kodlama ayrıca boşlukları, çift tırnakları,% ve # karakterlerini de korur.

3. javascript: önekini ekleyin

javascript: şeması, tarayıcıya adresin geri kalanını betik olarak çalıştırmasını söyleyen şeydir. Ortaya çıkan metin, çubuğa sürüklediğiniz veya bir yer imine yapıştırdığınız şeydir. Üç adımı da elle yapmak mümkündür, ancak tek bir kaçırılan karakter bookmarklet’i sessizce bozabilir; oluşturucunun asıl yararı bu hataları baştan ortadan kaldırmasıdır.

Bookmarklet nasıl kurulur

Masaüstünde

Koyu renkli düğmeyi Chrome, Edge, Firefox, Safari veya başka bir masaüstü tarayıcıdaki yer imi çubuğuna sürükleyin. Sürüklemek uygun değilse Yer imi URL’sini kopyaladüğmesine basın, yeni bir yer imi oluşturun ve URL’yi adres alanına yapıştırın.

iPhone, iPad ve Android’de

Mobil tarayıcılarda sürükleyebileceğiniz bir yer imi çubuğu yoktur; bu yüzden düzenleme yöntemini kullanın:

1. Yer imi URL’sini kopyala düğmesine basın.
2. Herhangi bir sayfaya yer imi ekleyin — bu sayfa da olur.
3. Yer imlerinizi açın, yeni yer imini düzenleyin ve adresini kopyaladığınız javascript: URL’siyle değiştirin. Orada yeniden adlandırmayı da yapın.
4. Çalıştırmak istediğiniz sayfaya gidin. iPhone veya iPad’deki Safari’de yer imini yer imlerinizden açın. Android’deki Chrome’da bookmarklet’in adını adres çubuğuna yazın ve çıkan yer imi önerisine dokunun; yer imleri ekranından açmak sayfadan ayrılmanıza yol açar ve çalışacak bir sayfa kalmaz.

Adres çubuğuna yapıştırmayın

Kısayol gibi görünür, ancak Chrome adres çubuğuna yapıştırılan metnin başındakijavascript: ifadesini bilerek siler — bu, insanları kötü amaçlı kod yapıştırmaya kandıran dolandırıcılıklara karşı bir savunmadır. Geriye kalan metin arama olarak işlenir. Kodu yer imi olarak kaydetmek güvenilir yoldur.

Yapıştırabileceğiniz bookmarklet örnekleri

Bunların her biri yalnızca standart tarayıcı API’lerini kullanır. Birini yukarıdaki kod kutusuna yapıştırın, Bookmarklet oluştur düğmesine basın ve kurun.

Sayfayı Markdown bağlantısı olarak kopyalama

Bağlantı seçili hâlde bir kutu açar; kopyalamanız yeterlidir.

prompt('Markdown bağlantısı:', '[' + document.title + '](' + location.href + ')');

Seçtiğiniz kelimeleri sayma

Önce metni seçin, sonra bookmarklet’e tıklayın.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' kelime seçildi');

Sayfayı düzenlenebilir yapma

Düzenlemeyi kapatmak için yeniden tıklayın. Sayfayı yenilemek orijinali geri getirir.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Sayfayı Wayback Machine’de açma

Bulunduğunuz sayfanın arşivlenmiş kopyalarını listeler.

location.href = 'https://web.archive.org/web/*/' + location.href;

Yaygın bookmarklet kullanımları

Bookmarklet neden çalışmaz

Sitenin güvenlik politikası engelliyor

Bir bookmarklet çoğu sitede çalışıp yalnızca birinde hiçbir şey yapmıyorsa o sitenin Content-Security-Policy ayarına bakın. CSP belirtimi bir sayfanın politikasının bookmarklet’lere karışmaması gerektiğini söyler; yine de tarayıcılarscript-src kuralları katı olan sayfalarda javascript: URL’lerini engelleyebilir. Başka bir alan adından betik enjekte eden bir bookmarklet iki kez etkilenir: çalışsa bile o dış betiğin yüklenip yüklenemeyeceğine sayfanın politikası karar verir. Bookmarklet içinden bunu aşmanın yolu yoktur. Betiğe böyle bir sitede ihtiyacınız varsa çözüm tarayıcı eklentisi veya userscript’tir.

Sayfa metin içeren boş bir sayfaya dönüştü

Kodunuz bir metin değeriyle bitti ve tarayıcı bunu yeni bir sayfa olarak gösterdi. Metin döndüren her return ifadesini kaldırın. Bookmarklet’i elle yazdıysanız burada yeniden oluşturmak onu bir fonksiyonun içine alır; böylece sondaki bir metin ifadesi artık sayfanın yerini almaz.

Hiçbir şey olmuyor ve hata da yok

Tarayıcınızın geliştirici konsolunu açın ve bookmarklet’e yeniden tıklayın. Sözdizimi hataları, eksik öğeler ve engellenen betikler orada bildirilir. Elle hazırlanmış bookmarklet’lerde sık görülen ve çoğu kişinin ilk bakışta gözden kaçırdığı bir neden, kodun geri kalanıyla aynı satırda kalmış bir// yorumudur — özgün kaynaktan yeniden oluşturmak bunu çözer.

Mevcut bir bookmarklet nasıl düzenlenir

Yer iminin adresini kopyalayın, başındaki javascript: ifadesini silin ve okunabilir koda geri dönmek için kalanınıURL kodlayıcı ve çözücü (İngilizce sayfa) ile çözün. Değişikliğinizi yapın, kodu bu bookmarklet oluşturucuya yapıştırın ve eski yer iminin adresini yeni URL ile değiştirin. Özgün kaynağı bir metin dosyasında saklamak bu gidiş gelişi kısaltır. Yer imlerini toplu hâlde düzenliyorsanız, her bookmarklet’in kaynağını kısa bir açıklamayla birlikte tek bir notta tutmak aylar sonra bile neyin ne işe yaradığını hatırlamanızı sağlar.

Güvenlik önemlidir

Bir bookmarklet, sayfanın kendi betiklerinin sahip olduğu erişimle çalışır: sayfanın açığa çıkardığı her şeyi okuyabilir ve değiştirebilir. Kurmadan önce kodu gözden geçirin, uzak betik yükleyen kod parçalarından kaçının — başkasının denetlediği bir URL siz kurduktan sonra değişebilir — ve bilinmeyen bir bookmarklet’i hassas bilgi içeren bir sayfada asla çalıştırmayın. Bir web sitesi, mesaj veya video sizden bir yer imine ya da adres çubuğuna kod yapıştırmanızı istiyorsa bunu dolandırıcılık sayın.

Bookmarklet, userscript ve eklenti karşılaştırması

Üçü birbirine benzer görünür ama farklı ihtiyaçlara yanıt verir.Bookmarklet, tıkladığınızda tek bir sayfada bir kez çalışan tek bir betiktir — kurulum gerektirmez ve yer imlerinizle birlikte taşınır.Userscript (bir userscript yöneticisiyle yönetilir) eşleşen sitelere bağlanır, her ziyarette otomatik çalışabilir ve sayfalar arasında kendi ayarlarını tutar.Tarayıcı eklentisi bunların ikisini de ve daha fazlasını yapabilir — arka plan işleri, ağ trafiğine müdahale, araç çubuğu simgeleri — karşılığında bir kurulum adımı ve tarayıcının başta size gösterdiği geniş izinler gerekir. Eklentiler sayfa güvenlik politikaları tarafından da farklı ele alınır: CSP belirtimi, Chrome’un eklenti kaynaklı enjeksiyonların sayfa politikasından bağımsız çalışmasını sağlamaya çalıştığını belirtir. Bookmarklet ile başlayın, ihtiyacınızı birkaç hafta gözlemleyin ve yalnızca sınırlarına dayandığınızda bir üst seçeneğe geçin.

Sınırlar: bookmarklet ne zaman kullanılmaz

Bookmarklet yalnızca tıkladığınızda ve bir seferde tek sayfada çalışır. Ziyaretler arasında durum tutamaz, arka planda iş yapamaz ve her sayfayı otomatik olarak değiştiremez. Uzunluk nadiren sorundur — Chrome en fazla 2 MB URL uzunluğu belgelendirir — ama uzun bir betik okunamaz bir yer imi URL’sine dönüşür ve o boyutta bir userscript yöneticisi veya eklenti bakımı daha kolaydır. Bir bookmarklet’in yaptığı değişiklikler sayfa yenilenince de kaybolur: bir sonraki sefer hâlâ orada duran vurgular istiyorsanızherhangi bir web sitesinde metin nasıl vurgulanır ve saklanır yazısına (İngilizce) bakın. İş “bu sayfayı tek tıkla kaydet” ise, “bir kod parçası çalıştır” değilse, amaca yönelik birtarayıcı eklentisi bunu kod bakımı gerektirmeden yapar.

Gizlilik: kodunuz nereye gidiyor

Hiçbir yere. Ad, kod parçası ve oluşturulan URL sayfadan asla çıkmaz — bookmarklet oluşturmak hiçbir ağ isteği içermez. Dürüst bir not: bitmiş bookmarklet normal bir yer imi olarak saklanır; bu yüzden yer imlerinizi cihazlar arasında eşitliyorsanız betik diğer yer imlerinizle birlikte taşınır ve eşitlenen profili okuyabilen her şey tarafından görülebilir. Parola, anahtar veya başka bir gizli bilgiyi bookmarklet’in içine asla yazmayın; kodunuzu paylaşmayı düşünüyorsanız önce bu tür değerlerden arındırın.

İlgili araçlar ve rehberler

Yukarıdaki Markdown bağlantısı bookmarklet’i her seferinde tek bir bağlantıyı kopyalar; bir sayfanın tüm HTML’sini Markdown’a çevirmek içinHTML’den Markdown’a dönüştürücü (İngilizce) aracını kullanın. Kopyaladığınız bağlantılar izleme parametreleriyle doluysaURL temizleyici bunları ayıklar. Hiç betik yazmadan sayfaları kaydetmek ve onlarla çalışmak için Marqly’ninweb vurgulayıcısına, Chrome için yer imi yöneticisine ve ikinci beyin iş akışına bakın — ya da yer imlerini düzenlemerehberini okuyun (hepsi İngilizce).