Home-theater-designers
Ciri Inspect Element pada penyemak imbas web anda ialah alat pembangun yang membolehkan anda mengubah suai aspek bahagian hadapan tapak web, termasuk HTML, CSS dan JavaScript serta membuat perubahan sementara. Anda juga boleh melakukan lebih banyak lagi dengan Inspect Element. Walau bagaimanapun, semua perubahan hilang selepas muat semula.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Tetapi kadangkala, anda mungkin mahu menyimpan perubahan untuk tempoh yang panjang atau menambah fungsi tambahan untuk meningkatkan pengalaman pengguna. Satu cara untuk membuat perubahan Elemen Periksa kekal adalah dengan menggunakan sambungan Tampermonkey. Ia membolehkan anda menambah skrip tersuai pada halaman web, menjadikan perubahan kekal pada mesin tempatan anda.
Mari lihat cara menggunakan Tampermonkey untuk membuat perubahan elemen periksa kekal pada penyemak imbas setempat anda.
cara menyekat e-mel di iphone
Apakah Tampermonkey dan Bagaimana Anda Boleh Memasangnya?
Tampermonkey, pengurus skrip pengguna, ialah sambungan pelayar popular yang tersedia untuk semua pelayar web utama, termasuk Chrome, Edge, Opera Next dan Firefox. Ia membolehkan anda membuat dan menjalankan skrip pengguna tersuai dan sedia ada untuk mengubah suai halaman web untuk membetulkan atau meningkatkannya.
Ia juga mempunyai perpustakaan skrip pengguna yang dibuat oleh pengguna Tampermonkey lain. Sebagai contoh, anda boleh menggunakan skrip pengguna Pengunduh YouTube Tempatan untuk muat turun video YouTube menggunakan Tampermonkey atau tonton video YouTube yang dibenderakan tanpa log masuk .
Sambungan menjalankan skrip pengguna yang disimpan sebaik sahaja halaman web yang ditentukan dimuatkan, dengan itu menjadikan perubahan yang dimaksudkan kelihatan kekal.
Sebelum kami mula menulis skrip, anda perlu memasang Tampermonkey. Jadi, mari mulakan dengan memasang sambungan:
- Pergi ke Laman rasmi Tampermonkey . Ia akan mengesan pelayar web anda secara automatik. Jika tidak, klik pada mana-mana tab daripada Chrome, Microsoft Edge, Firefox, Safari dan Opera, bergantung pada penyemak imbas yang anda gunakan.
- Di dalam Muat turun bahagian, klik pada Dapatkan dari Kedai . Anda akan diarahkan ke kedai web penyemak imbas anda.
- Klik pada Pasang untuk menambah sambungan pada penyemak imbas anda. Ikuti sebarang arahan pada skrin untuk melengkapkan pemasangan.
Jika penyemak imbas anda tidak disenaraikan, tetapi anda menggunakan penyemak imbas Chromium, anda sepatutnya boleh memasang sambungan ini daripada Kedai Chrome .
Setelah dipasang, anda boleh mula menulis skrip pengguna tersuai menggunakan JavaScript untuk membuat perubahan yang dimaksudkan pada mana-mana tapak web. Tidak perlu dikatakan, anda memerlukan pemahaman asas tentang HTML, CSS dan JavaScript untuk menulis skrip pengguna dan membuat pengubahsuaian menggunakan Tampermonkey.
Untuk menunjukkan keupayaan Tampermonkey, kami akan menulis skrip untuk menambah butang kongsi WhatsApp untuk berkongsi pautan artikel dengan kenalan WhatsApp anda.
Perkara yang Perlu Dipertimbangkan Sebelum Membuat Pengubahsuaian Elemen Laman Web
Semasa membuat pengubahsuaian pada mana-mana tapak web, adalah penting untuk menghormati dasar mereka tentang menggunakan JavaScript pihak ketiga. Jangan cuba menjalankan skrip pengguna sewenang-wenangnya di mana-mana tapak web, terutamanya apabila anda berurusan dengan data sensitif.
Walaupun Tampermonkey membantu anda mengubah suai penampilan dan menambah kefungsian pada tapak web, semua perubahan hanya kelihatan secara setempat dalam penyemak imbas anda dan tidak menjejaskan sumber.
Bermula Dengan Tampermonkey
Sebaik sahaja anda telah merancang pengubahsuaian yang ingin anda lakukan pada halaman web, anda boleh mula menulis skrip anda. Skrip pengguna baharu boleh dibuat daripada bar alat atau papan pemuka Tampermonkey.
Untuk membuat skrip baharu, klik butang Sambungan ikon dalam bar alat penyemak imbas dan pilih Tampermonkey . Seterusnya, pilih Buat skrip baharu . Ini akan membuka editor skrip dalam papan pemuka Tampermonkey.
Pengepala Tampermonkey lalai atau komen metadata kelihatan 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/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();Komen metadata ini termasuk maklumat penting tentang nama skrip pengguna, tujuan yang dimaksudkan dan kebenaran serta memberitahu Tampermonkey bila hendak melaksanakan skrip.
Untuk panduan ini, kami akan menumpukan pada @perlawanan arahan, aka metadata difailkan. Tampermonkey menggunakan arahan ini untuk memastikan skrip pengguna hanya digunakan pada tapak web atau halaman web tertentu. Dalam keadaan ini, skrip pengguna berikut hanya akan dijalankan pada example.com (gantikan URL tapak web mengikut keperluan anda) dan semua halamannya.
Menulis Skrip Pengguna untuk Menambah Butang Kongsi WhatsApp
Pada akhir setiap artikel MakeUseOf, anda akan menemui widget perkongsian untuk pelbagai platform media sosial, kecuali WhatsApp. Walaupun anda boleh menyalin dan menampal URL, butang kongsi WhatsApp berguna jika anda kerap berkongsi artikel pada kumpulan WhatsApp anda.
Anda boleh mencipta skrip pengguna dalam Tampermonkey untuk menambah butang kongsi WhatsApp di penghujung artikel. Kami akan menyepadukan butang ke dalam widget kongsi sedia ada yang akan membolehkan anda berkongsi URL halaman web dengan kenalan WhatsApp anda.
Mari mulakan dengan mencipta butang kongsi WhatsApp asas.
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Memandangkan kita mempunyai butang kongsi WhatsApp asas, mari tambahkan sedikit gaya padanya. Ini akan memberikan butang warna latar belakang dan teks, jidar, padding dan gaya kursornya. Dengan sedikit mengutak-atik, anda boleh menukar sifat butang untuk memperhalusi penampilan.
//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';
Dengan butang sedia, sudah tiba masanya untuk mengujinya. Tetapi di manakah anda meletakkannya? Sebagai amalan biasa, selalunya butang kongsi diletakkan di penghujung artikel.
Walau bagaimanapun, dalam keadaan ini, kami sudah mempunyai widget perkongsian pada penghujung setiap artikel. Jadi, adalah sesuai untuk menjadikan butang kongsi ini sebahagian daripada widget.
Untuk melakukan ini, kami akan memeriksa widget perkongsian sedia ada untuk mencari bekas induk yang mengandungi elemen perkongsian untuk mencarinya dalam skrip pengguna. Pada halaman web, tekan Ctrl + Shift + C untuk membuka Inspect Element. Seterusnya, pilih elemen widget kongsi pada halaman untuk memeriksanya.
Anda akan melihat bahawa ia adalah Selepas memilih elemen, mari masukkan butang kongsi sebagai kanak-kanak kepadanya: Tekan Ctrl + S untuk menyimpan skrip. Jika anda memuat semula halaman, anda akan melihat butang kongsi dimasukkan ke dalam widget kongsi sedia ada. Tetapi mengklik padanya tidak akan melakukan apa-apa. Untuk membuat butang berfungsi, kami akan mencipta fungsi untuk menjana URL perkongsian WhatsApp berdasarkan URL halaman semasa. Anda boleh menggunakan location.href untuk mengembalikan URL halaman. Seterusnya, mari tambahkan pendengar acara pada butang. Apabila diklik, penyemak imbas akan membuka tab baharu dengan pautan perkongsian WhatsApp yang membolehkan anda mengarang mesej. Setelah anda menyediakan skrip pengguna, tekan Ctrl + S untuk menyimpan perubahan. Buka Skrip Pengguna yang Dipasang tab dalam Tampermonkey untuk melihat semua skrip pengguna yang dipasang pada penyemak imbas anda. Untuk melihat skrip pengguna dalam tindakan, buka halaman web sasaran. Anda akan melihat hijau Kongsi butang. Mengklik pada butang akan menggesa anda untuk membuka desktop WhatsApp, dengan syarat anda telah memasang apl tersebut. Anda kemudian boleh memilih kenalan daripada senarai untuk menghantar pautan artikel. Anda boleh mengubah suai skrip untuk menambah lebih banyak peningkatan. Sebagai contoh, anda boleh memaparkan ikon WhatsApp pada butang atau menukar peletakannya menggunakan fungsi InsertAfter(). Anda boleh mendayakan, melumpuhkan atau mengedit skrip pengguna individu daripada papan pemuka Tampermonkey. Sebagai alternatif, klik ikon Tampermonkey dalam bar alat untuk melumpuhkan semua skrip pengguna aktif sekaligus. Tampermonkey ialah salah satu daripada banyak pengurus skrip pengguna yang tersedia yang membolehkan anda mengubah suai halaman web untuk meningkatkan pengalaman menyemak imbas anda. Pengubahsuaian kecil boleh membantu dalam kebolehaksesan yang lebih baik dan membetulkan gangguan kecil dengan tapak web kegemaran anda. Sebelum anda mula menulis skrip, semak sama ada skrip daripada pengguna lain sudah wujud. Walau bagaimanapun, berhati-hati dengan memasang skrip pengguna pihak ketiga daripada sumber yang tidak diketahui untuk mengelakkan kod berniat jahat.const sharingDiv = document.querySelector ('div.sharing.bottom');if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}
function generateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return `https://api.whatsapp.com/send?text=${pageURL}`;
}Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
}); Simpan dan Jalankan Skrip Pengguna
Membuat Inspect Element Changes Kekal Menggunakan Tampermonkey