Ekstensi Chome: Bagaimana cara mengubah perilaku tombol di dalam halaman?

Jika Anda ingin mengubah perilaku tombol, Anda perlu memasukkan skrip konten yang mendapatkan akses ke peristiwa pada tombol sebelum pengendali saat ini. Bagaimana tepatnya Anda melakukan ini, dan peristiwa yang perlu Anda cegat akan bervariasi dari satu situasi ke situasi lainnya.

Untuk sebuah tombol, kejadian yang paling mungkin perlu Anda intersepsi adalah click< /a>, namun Anda mungkin perlu mencegat acara lain, seperti mousedown atau mouseup.

Untuk jenis elemen masukan lainnya, tentu saja ada beberapa kejadian lain yang mungkin terjadi. Sebagai contoh, Stack Exchange mendengarkan input, < a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown" rel="nofollow noreferrer">keydown, dan keypress acara untuk mendapatkan masukan dalam textareas.

Satu-satunya cara untuk benar-benar menentukan peristiwa mana yang perlu Anda cegat adalah dengan melakukannya

1. Eksperimen: mencoba peristiwa yang paling mungkin terjadi, atau kombinasi peristiwa dan melihat apa yang terjadi, atau
2. Lihat kode halaman untuk menentukan event handler apa yang dilampirkan.

Tentu saja, Anda mungkin akan memilih untuk menggunakan stopImmediatePropagation(), stopPropagation(), dan/atau preventDefault() untuk mencegah hal yang sudah pengendali acara yang ada agar tidak dipanggil.

HTML tombol dapat berubah di masa mendatang

Mengenai kekhawatiran Anda bahwa HTML halaman tersebut dapat berubah: Ya, mungkin saja. Hal ini dapat merusak ekstensi Anda. Anda kemudian perlu memperbarui ekstensi Anda. Jika Anda dapat menentukan pemilih yang tepat yang digunakan oleh kode untuk halaman tersebut, Anda dapat mencoba menggunakan pemilih yang sama. Itu adalah hal-hal yang paling kecil kemungkinannya untuk berubah karena perancang halaman web juga harus mengubah kodenya. Namun, pada akhirnya, Anda hanya harus menerima kenyataan bahwa HTML mungkin berubah. Meskipun Anda dapat mencoba mengurangi dampak perubahan tersebut, tidak ada yang dapat Anda lakukan untuk sepenuhnya menghilangkan ketergantungan Anda pada HTML halaman yang ingin Anda gunakan antarmukanya.

Karena kalender adalah Aplikasi Satu Halaman, saya tidak tahu saat yang tepat untuk mencari tombol di DOM

Waktu yang tepat untuk mencari tombol di DOM akan bergantung pada halaman tertentu yang Anda coba antarmukakan. Ada beberapa kejadian potensial yang dapat Anda gunakan untuk menentukan kapan menambahkan pengendali kejadian, setidaknya termasuk DOMContentLoaded, load< /a>, dan readystatechange. Namun, Anda dapat memilih untuk melakukan pencarian ini pada saat click, atau peristiwa lainnya, terjadi. Ini membutuhkan lebih banyak sumber daya CPU, jadi disarankan untuk melakukannya sampai Anda menemukan elemen yang ingin Anda tonton (yaitu setelah ditemukan, ingat elemen tersebut).

Bahkan mungkin perlu menambahkan pendengar utama Anda ke window sebelum konten laman apa pun dimuat. Ini mungkin diperlukan ketika pendengar laman dilampirkan ke window. Penangan yang ditambahkan pertama kali dipanggil terlebih dahulu. Sebagai ekstensi, Anda dapat memilih untuk memastikan skrip konten Anda berjalan sebelum konten halaman mana pun dimuat. Melakukan hal ini memungkinkan Anda memastikan pawang Anda dipanggil terlebih dahulu.

Sebenarnya mencegat acara:
Tujuan Anda adalah memanggil pengendali Anda sebelum pengendali yang ada di skrip halaman. Tanpa mengetahui elemen mana yang sebenarnya menjadi tempat pendengar acara (bisa pada leluhur elemen mana pun, atau elemen itu sendiri), dan apakah ia ditempatkan di Fase Tangkap, Target, atau Bubbling, cara agar handler Anda dapat dipanggil terlebih dahulu adalah dengan menempatkannya pada window dalam fase Tangkap. Anda mungkin perlu menjalankan skrip Anda sebelum konten apa pun dimuat sehingga pengendali Anda adalah yang pertama ditambahkan ke window untuk jenis peristiwa tersebut. Namun, memastikan untuk menjalankannya sebelum konten apa pun dimuat biasanya tidak diperlukan.

Untuk kasus spesifik yang Anda minati, tombol "Buat" di Google Kalender, id untuk <div> yang berisi tombol tersebut adalah createEventButtonContainer. Jadi, Anda dapat melakukan sesuatu seperti (Anda tidak dapat menggunakan jQuery, karena hanya melakukan fase Bubbling):

//The following will catch the event prior to almost all other possible
//  event handlers.
var createEventButtonContainerEl;
window.addEventListener('click',function(e){
    if(!createEventButtonContainerEl){
        //If we have not previously found the create event button container, try to find it.
        createEventButtonContainerEl=document.getElementById('createEventButtonContainer');
    }
    if(createEventButtonContainerEl && createEventButtonContainerEl.contains(e.target)){
        //The elements we are interested in
        e.stopImmediatePropagation();
        e.preventDefault();
        //You may want to further determine which part of the `createEventButtonContainer`
        //  was clicked as different parts have different functions.
    }
}

Anda dapat mengambil tombol melalui fungsi $() di jQuery. Untuk mendapatkan tombol tersebut, mereka tidak ada jaminan 100% dengan cara apapun. Dan tambahkan pendengar acara di akhir pemuatan halaman. Jadi Anda yakin bahwa halaman lengkap telah dimuat.