Tampermonkey ile Tarayıcınızdaki Öğe Değişikliklerini Kalıcı Olarak İnceleme Nasıl Yapılır?

Web tarayıcınızdaki Öğeyi İncele özelliği, bir web sitesinin HTML, CSS ve JavaScript dahil olmak üzere ön uç özelliklerini değiştirmenize ve geçici değişiklikler yapmanıza olanak tanıyan bir geliştirici aracıdır. Inspect Element ile çok daha fazlasını da yapabilirsiniz. Ancak yenileme sonrasında tüm değişiklikler kaybolur.

Ancak bazen değişiklikleri uzun bir süre saklamak veya kullanıcı deneyimini geliştirmek için ek işlevler eklemek isteyebilirsiniz. Inspect Element değişikliklerini kalıcı hale getirmenin bir yolu Tampermonkey uzantısını kullanmaktır. Değişikliklerin yerel makinenizde kalıcı olmasını sağlayarak web sayfalarına özel komut dosyaları eklemenizi sağlar.

Yerel tarayıcınızda inceleme öğesi değişikliklerini kalıcı hale getirmek için Tampermonkey'i nasıl kullanacağınıza bakalım.

Tampermonkey Nedir ve Nasıl Yükleyebilirsiniz?

Bir kullanıcı betiği yöneticisi olan Tampermonkey, Chrome, Edge, Opera Next ve Firefox dahil olmak üzere tüm önemli web tarayıcılarında kullanılabilen popüler bir tarayıcı uzantısıdır. Web sayfalarını düzeltmek veya geliştirmek amacıyla değiştirmek için özel ve mevcut kullanıcı komut dosyaları oluşturmanıza ve çalıştırmanıza olanak tanır.

Ayrıca diğer Tampermonkey kullanıcıları tarafından oluşturulan bir kullanıcı komut dosyası kitaplığına da sahiptir. Örneğin, Yerel YouTube İndiricisi kullanıcı kodunu kullanarak şunları yapabilirsiniz: Tampermonkey'i kullanarak YouTube videolarını indirin veya işaretlenen YouTube videolarını giriş yapmadan izleyin.

Uzantı, belirtilen web sayfası yüklenir yüklenmez kaydedilen kullanıcı komut dosyalarını çalıştırır ve böylece amaçlanan değişikliklerin kalıcı görünmesini sağlar.

Bir komut dosyası yazmaya başlamadan önce Tampermonkey'i yüklemeniz gerekecek. O halde uzantıyı yüklemeye başlayalım:

1. Şuraya git: Tampermonkey resmi sayfası. Web tarayıcınızı otomatik olarak algılayacaktır. Değilse, kullandığınız tarayıcıya bağlı olarak Chrome, Microsoft Edge, Firefox, Safari ve Opera'dan herhangi bir sekmeye tıklayın.
2. İçinde İndirmek bölümüne tıklayın Mağazadan Al. Tarayıcınızın web mağazasına yönlendirileceksiniz.
3. Tıklamak Düzenlemek Uzantıyı tarayıcınıza eklemek için. Kurulumu tamamlamak için ekrandaki talimatları izleyin.

Tarayıcınız listede yoksa ancak Chromium tarayıcı kullanıyorsanız bu uzantıyı şuradan yükleyebilmelisiniz: Chrome Mağazası.

Kurulduktan sonra, herhangi bir web sitesinde amaçlanan değişiklikleri yapmak için JavaScript kullanarak özel kullanıcı komut dosyaları yazmaya başlayabilirsiniz. Söylemeye gerek yok, kullanıcı metnini yazmak ve Tampermonkey'i kullanarak değişiklikler yapmak için temel HTML, CSS ve JavaScript bilgisine ihtiyacınız olacak.

Tampermonkey'in yeteneklerini göstermek için, makale bağlantılarını WhatsApp kişilerinizle paylaşmak üzere bir WhatsApp paylaş düğmesi ekleyen bir komut dosyası yazacağız.

Web Sitesi Öğesinde Değişiklik Yapmadan Önce Dikkat Edilmesi Gerekenler

Herhangi bir web sitesinde değişiklik yaparken üçüncü taraf JavaScript'lerin kullanımına ilişkin politikalarına uymak önemlidir. Özellikle hassas verilerle uğraşırken, herhangi bir web sitesinde kullanıcı komut dosyalarını keyfi olarak çalıştırmaya çalışmayın.

Tampermonkey bir web sitesinin görünümünü değiştirmenize ve işlevsellik eklemenize yardımcı olurken, tüm değişiklikler yalnızca tarayıcınızda yerel olarak görünür ve kaynağı etkilemez.

Tampermonkey'e Başlarken

Bir web sayfasında yapmak istediğiniz değişiklikleri planladıktan sonra senaryonuzu yazmaya başlayabilirsiniz. Araç çubuğundan veya Tampermonkey kontrol panelinden yeni kullanıcı komut dosyaları oluşturulabilir.

Yeni bir komut dosyası oluşturmak için Uzantılar tarayıcı araç çubuğundaki simgesini seçin ve Kurcalama maymunu. Sonra seçin Yeni bir komut dosyası oluştur. Bu, Tampermonkey kontrol panelinde bir komut dosyası düzenleyicisi açacaktır.

Varsayılan Tampermonkey üstbilgisi veya meta veri yorumları şu şekilde görünür:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grantnone
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();

Bu meta veri yorumları kullanıcı betiğinin adı, amaçlanan amacı ve izinleri hakkında önemli bilgiler içerir ve Tampermonkey'e betiği ne zaman çalıştıracağını söyler.

Bu kılavuz için şunlara odaklanacağız: @kibrit direktif, diğer adıyla meta veriler dosyalandı. Tampermonkey bu yönergeyi kullanıcı betiğinin yalnızca belirli bir web sitesine veya web sayfalarına uygulanmasını sağlamak için kullanır. Bu durumda, aşağıdaki kullanıcı komut dosyası yalnızca example.com'da (web sitesi URL'sini gereksiniminize göre değiştirin) ve tüm sayfalarında çalışacaktır.

WhatsApp Paylaş Düğmesi Eklemek için Kullanıcı Betiği Yazma

Her MakeUseOf makalesinin sonunda WhatsApp dışında çeşitli sosyal medya platformları için bir paylaşım widget'ı bulacaksınız. URL'yi kopyalayıp yapıştırabilseniz de, WhatsApp grubunuzda sık sık makale paylaşıyorsanız WhatsApp paylaş düğmesi kullanışlıdır.

Makalenin sonuna WhatsApp paylaşım butonu eklemek için Tampermonkey'de bir kullanıcı metni oluşturabilirsiniz. Web sayfası URL'sini WhatsApp kişilerinizle paylaşmanıza olanak tanıyan düğmeyi mevcut paylaşım widget'ına entegre edeceğiz.

Temel bir WhatsApp paylaşım düğmesi oluşturmaya başlayalım.

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

Artık temel bir WhatsApp paylaşım düğmemiz olduğuna göre, ona biraz stil ekleyelim. Bu, düğmeye arka plan ve metin rengini, kenarlığını, dolgusunu ve imleç stilini verecektir. Biraz kurcalayarak, görünüme ince ayar yapmak için düğme özelliklerini değiştirebilirsiniz.

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

Düğme hazır olduğunda test etme zamanı geldi. Peki onu nereye yerleştireceksin? Yaygın bir uygulama olarak, sıklıkla paylaş düğmesi makalelerin sonuna yerleştirilir.

Ancak bu örnekte, her makalenin sonunda zaten bir paylaşım widget'ımız var. Bu nedenle, bu paylaşım düğmesini widget'ın bir parçası haline getirmek idealdir.

Bunu yapmak için, kullanıcı komut dosyasında bulmak üzere paylaşım öğelerini içeren ana kapsayıcıyı bulmak için mevcut paylaşım widget'ını inceleyeceğiz. Web sayfasında tuşuna basın. Ctrl + Üst Karakter + C Öğeyi İncele'yi açmak için. Ardından, incelemek için sayfadaki paylaşım widget öğesini seçin.

Bunun bir olduğunu göreceksiniz “sınıf adına sahip öğealt paylaşımı”. Bu öğeyi kullanarak seçebilirsiniz. sorguSeçici Kullanıcı metninizdeki yöntem.

const sharingDiv = document.querySelector ('div.sharing.bottom');

Elemanı seçtikten sonra, ona alt öğe olarak paylaş butonunu ekleyelim:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

Basmak Ctrl + S Komut dosyasını kaydetmek için. Sayfayı yeniden yüklerseniz mevcut paylaşım widget'ına eklenmiş bir paylaş düğmesi göreceksiniz. Ancak üzerine tıklamak hiçbir şey yapmaz.

Düğmenin çalışmasını sağlamak için mevcut sayfanın URL'sini temel alarak bir WhatsApp paylaşım URL'si oluşturacak bir işlev oluşturacağız. Sayfa URL'sini döndürmek için konum.href'i kullanabilirsiniz.

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

Daha sonra butona bir olay dinleyicisi ekleyelim. Tıklandığında tarayıcı, mesaj oluşturmanıza olanak tanıyan WhatsApp paylaşım bağlantısını içeren yeni bir sekme açacaktır.

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

Kullanıcı Komut Dosyasını Kaydedin ve Çalıştırın

Kullanıcı metnini hazırladıktan sonra tuşuna basın. Ctrl + S Değişiklikleri kaydetmek için. Aç Yüklü Kullanıcı Kodları Tarayıcınızda yüklü olan tüm kullanıcı komut dosyalarını görüntülemek için Tampermonkey'deki sekmeyi tıklayın.

Kullanıcı metnini çalışırken görmek için hedef web sayfasını açın. Bir yeşil göreceksin Paylaşmak düğme. Uygulamanın yüklü olması koşuluyla, düğmeye tıkladığınızda WhatsApp masaüstünü açmanız istenecektir. Daha sonra makale bağlantısını göndermek için listeden kişiyi seçebilirsiniz.

Daha fazla geliştirme eklemek için komut dosyasını daha da değiştirebilirsiniz. Örneğin, WhatsApp simgesini düğme üzerinde görüntüleyebilir veya InsertAfter() işlevini kullanarak konumunu değiştirebilirsiniz.

Bireysel kullanıcı komut dosyalarını Tampermonkey kontrol panelinden etkinleştirebilir, devre dışı bırakabilir veya düzenleyebilirsiniz. Alternatif olarak, tüm aktif kullanıcı kodlarını bir defada devre dışı bırakmak için araç çubuğundaki Tampermonkey simgesini tıklayın.

Tampermonkey Kullanarak İnceleme Öğesi Değişikliklerini Kalıcı Hale Getirme

Tampermonkey, tarama deneyiminizi geliştirmek için web sayfalarını değiştirmenize olanak tanıyan birçok kullanıcı yöneticisi yöneticisinden biridir. Küçük değişiklikler daha iyi erişilebilirliğe yardımcı olabilir ve favori web sitenizdeki küçük rahatsızlıkları giderebilir.

Bir komut dosyası yazmaya başlamadan önce, diğer kullanıcılara ait bir komut dosyasının zaten mevcut olup olmadığını kontrol edin. Ancak kötü amaçlı kodlardan kaçınmak için bilinmeyen kaynaklardan üçüncü taraf kullanıcı komut dosyaları yüklerken dikkatli olun.