Cara Membuat Perubahan Elemen Inspeksi Permanen di Browser Anda dengan Tampermonkey

Fitur Inspect Element di browser web Anda adalah alat pengembang yang memungkinkan Anda memodifikasi aspek front-end situs web, termasuk HTML, CSS, dan JavaScript, dan membuat perubahan sementara. Anda juga dapat melakukan lebih banyak hal dengan Inspect Element. Namun, semua perubahan hilang setelah penyegaran.

Namun terkadang, Anda mungkin ingin menyimpan perubahan untuk jangka waktu yang lama atau menambahkan fungsi tambahan untuk meningkatkan pengalaman pengguna. Salah satu cara untuk membuat perubahan Inspect Element menjadi permanen adalah dengan menggunakan ekstensi Tampermonkey. Ini memungkinkan Anda menambahkan skrip khusus pada halaman web, membuat perubahan permanen di mesin lokal Anda.

Mari kita lihat cara menggunakan Tampermonkey untuk membuat perubahan elemen inspeksi menjadi permanen di browser lokal Anda.

Apa Itu Tampermonkey dan Bagaimana Cara Menginstalnya?

Tampermonkey, pengelola skrip pengguna, adalah ekstensi browser populer yang tersedia untuk semua browser web utama, termasuk Chrome, Edge, Opera Next, dan Firefox. Ini memungkinkan Anda membuat dan menjalankan skrip pengguna khusus dan yang sudah ada untuk memodifikasi halaman web guna memperbaiki atau menyempurnakannya.

Ia juga dilengkapi perpustakaan skrip pengguna yang dibuat oleh pengguna Tampermonkey lainnya. Misalnya, Anda dapat menggunakan skrip pengguna Pengunduh YouTube Lokal untuk unduh video YouTube menggunakan Tampermonkey atau menonton video YouTube yang ditandai tanpa masuk.

Ekstensi ini menjalankan skrip pengguna yang disimpan segera setelah halaman web tertentu dimuat, sehingga membuat perubahan yang diinginkan tampak permanen.

Sebelum kita mulai menulis skrip, Anda perlu menginstal Tampermonkey. Jadi, mari kita mulai dengan memasang ekstensi:

1. Pergi ke Halaman resmi Tampermonkey. Ini akan secara otomatis mendeteksi browser web Anda. Jika tidak, klik tab mana pun dari Chrome, Microsoft Edge, Firefox, Safari, dan Opera, bergantung pada browser yang Anda gunakan.
2. Dalam Unduh bagian, klik Dapatkan dari Toko. Anda akan diarahkan ke toko web browser Anda.
3. Klik Install untuk menambahkan ekstensi ke browser Anda. Ikuti petunjuk di layar untuk menyelesaikan instalasi.

Jika browser Anda tidak terdaftar, tetapi Anda menggunakan browser Chromium, Anda seharusnya dapat memasang ekstensi ini dari Toko Chrome.

Setelah terinstal, Anda dapat mulai menulis skrip pengguna khusus menggunakan JavaScript untuk membuat perubahan yang diinginkan pada situs web mana pun. Tentu saja, Anda memerlukan pemahaman dasar tentang HTML, CSS, dan JavaScript untuk menulis skrip pengguna dan membuat modifikasi menggunakan Tampermonkey.

Untuk mendemonstrasikan kemampuan Tampermonkey, kami akan menulis skrip untuk menambahkan tombol bagikan WhatsApp untuk membagikan tautan artikel dengan kontak WhatsApp Anda.

Yang Perlu Dipertimbangkan Sebelum Melakukan Modifikasi Elemen Website

Saat melakukan modifikasi pada situs web mana pun, penting untuk menghormati kebijakan mereka tentang penggunaan JavaScript pihak ketiga. Jangan mencoba menjalankan skrip pengguna secara sembarangan di situs web mana pun, terutama saat Anda berurusan dengan data sensitif.

Meskipun Tampermonkey membantu Anda mengubah tampilan dan menambahkan fungsionalitas ke situs web, semua perubahan hanya terlihat secara lokal di browser Anda dan tidak memengaruhi sumbernya.

Memulai Dengan Tampermonkey

Setelah Anda merencanakan modifikasi yang ingin Anda lakukan pada halaman web, Anda dapat mulai menulis skrip Anda. Skrip pengguna baru dapat dibuat dari toolbar atau dashboard Tampermonkey.

Untuk membuat skrip baru, klik Ekstensi ikon di toolbar browser dan pilih Tampermonkey. Selanjutnya, pilih Buat skrip baru. Ini akan membuka editor skrip di dasbor Tampermonkey.

Header Tampermonkey atau komentar metadata default terlihat seperti ini:

// ==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...
})();

Komentar metadata ini mencakup informasi penting tentang nama skrip pengguna, tujuan yang dimaksudkan, dan izin serta memberi tahu Tampermonkey kapan harus menjalankan skrip.

Untuk panduan ini, kami akan fokus pada @cocok arahan, alias metadata diajukan. Tampermonkey menggunakan arahan ini untuk memastikan skrip pengguna hanya diterapkan ke situs web atau halaman web tertentu. Dalam hal ini, skrip pengguna berikut hanya akan berjalan di example.com (ganti URL situs web sesuai kebutuhan Anda) dan semua halamannya.

Menulis Skrip Pengguna untuk Menambahkan Tombol Bagikan WhatsApp

Di akhir setiap artikel MakeUseOf, Anda akan menemukan widget berbagi untuk berbagai platform media sosial, kecuali WhatsApp. Meskipun Anda dapat menyalin dan menempelkan URL, tombol bagikan WhatsApp berguna jika Anda sering membagikan artikel di grup WhatsApp Anda.

Anda dapat membuat skrip pengguna di Tampermonkey untuk menambahkan tombol bagikan WhatsApp di akhir artikel. Kami akan mengintegrasikan tombol tersebut ke dalam widget berbagi yang ada yang memungkinkan Anda membagikan URL halaman web dengan kontak WhatsApp Anda.

Mari kita mulai dengan membuat tombol berbagi WhatsApp dasar.

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

Sekarang kita memiliki tombol berbagi WhatsApp dasar, mari tambahkan beberapa gaya ke dalamnya. Ini akan memberikan tombol latar belakang dan warna teks, batas, padding, dan gaya kursor. Dengan sedikit mengutak-atik, Anda dapat mengubah properti tombol untuk menyempurnakan tampilannya.

//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';

Setelah tombolnya siap, saatnya mengujinya. Tapi di mana Anda meletakkannya? Seperti yang biasa dilakukan, seringkali tombol share ditempatkan di akhir artikel.

Namun, dalam hal ini, kami sudah memiliki widget berbagi di akhir setiap artikel. Jadi, sangat ideal untuk menjadikan tombol bagikan ini sebagai bagian dari widget.

Untuk melakukan ini, kami akan memeriksa widget berbagi yang ada untuk menemukan wadah induk yang berisi elemen berbagi untuk menemukannya di skrip pengguna. Di halaman web, tekan Ctrl + Shift + C untuk membuka Elemen Inspeksi. Selanjutnya, pilih elemen widget berbagi di halaman untuk memeriksanya.

Anda akan melihat bahwa itu adalah elemen dengan nama kelas “berbagi bagian bawah”. Anda dapat memilih elemen ini menggunakan querySelector metode dalam skrip pengguna Anda.

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

Setelah memilih elemen, mari masukkan tombol bagikan sebagai anak ke dalamnya:

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

Tekan Ctrl + S untuk menyimpan skrip. Jika Anda memuat ulang halaman tersebut, Anda akan melihat tombol bagikan dimasukkan ke dalam widget berbagi yang ada. Tapi mengkliknya tidak akan menghasilkan apa-apa.

Agar tombol ini berfungsi, kami akan membuat fungsi untuk menghasilkan URL berbagi WhatsApp berdasarkan URL halaman saat ini. Anda dapat menggunakan location.href untuk mengembalikan URL halaman.

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

Selanjutnya, mari tambahkan pendengar acara ke tombol. Saat diklik, browser akan membuka tab baru dengan tautan berbagi WhatsApp yang memungkinkan Anda menulis pesan.

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

Simpan dan Jalankan Skrip Pengguna

Setelah skrip pengguna Anda siap, tekan Ctrl + S untuk menyimpan perubahan. Buka Skrip Pengguna yang Dipasang tab di Tampermonkey untuk melihat semua skrip pengguna yang terpasang di browser Anda.

Untuk melihat skrip pengguna beraksi, buka halaman web target. Anda akan melihat warna hijau Membagikan tombol. Mengklik tombol tersebut akan meminta Anda untuk membuka desktop WhatsApp, asalkan Anda telah menginstal aplikasi tersebut. Anda kemudian dapat memilih kontak dari daftar untuk mengirim tautan artikel.

Anda dapat memodifikasi skrip lebih lanjut untuk menambahkan lebih banyak penyempurnaan. Misalnya, Anda dapat menampilkan ikon WhatsApp pada tombol atau mengubah penempatannya menggunakan fungsi InsertAfter().

Anda dapat mengaktifkan, menonaktifkan, atau mengedit skrip pengguna individual dari dasbor Tampermonkey. Alternatifnya, klik ikon Tampermonkey di toolbar untuk menonaktifkan semua skrip pengguna aktif sekaligus.

Membuat Perubahan Elemen Inspeksi Secara Permanen Menggunakan Tampermonkey

Tampermonkey adalah salah satu dari banyak pengelola skrip pengguna yang tersedia yang memungkinkan Anda memodifikasi halaman web untuk meningkatkan pengalaman menjelajah Anda. Modifikasi kecil dapat membantu aksesibilitas yang lebih baik dan memperbaiki gangguan kecil pada situs web favorit Anda.

Sebelum Anda mulai menulis skrip, periksa apakah skrip dari pengguna lain sudah ada. Namun, berhati-hatilah saat memasang skrip pengguna pihak ketiga dari sumber yang tidak dikenal untuk menghindari kode berbahaya.