ส่วนขยาย Chome: จะเปลี่ยนพฤติกรรมของปุ่มภายในเพจได้อย่างไร?

หากคุณต้องการเปลี่ยนพฤติกรรมของปุ่ม คุณจะต้องฉีดสคริปต์เนื้อหาที่เข้าถึงเหตุการณ์บนปุ่มก่อนตัวจัดการปัจจุบัน คุณทำเช่นนี้ได้อย่างไร และเหตุการณ์ที่คุณต้องสกัดกั้นจะแตกต่างกันไปในแต่ละสถานการณ์

สำหรับปุ่ม เหตุการณ์ที่เป็นไปได้มากที่สุดที่คุณต้องสกัดกั้นคือ click< /a> แต่คุณอาจต้องสกัดกั้นเหตุการณ์อื่นๆ เช่น mousedown หรือ mouseup

สำหรับองค์ประกอบอินพุตประเภทอื่นๆ แน่นอนว่ายังมีเหตุการณ์อื่นๆ อีกหลายเหตุการณ์ที่เป็นไปได้ ตามตัวอย่าง Stack Exchange จะรับฟัง input, < a href="https://developer.mozilla.org/en-US/docs/Web/Events/keydown" rel="nofollow noreferrer">keydown และ keypress เหตุการณ์เพื่อรับอินพุตภายใน textareas.

วิธีเดียวที่จะตัดสินได้ว่าเหตุการณ์ใดที่คุณต้องสกัดกั้นก็คือ

1. การทดลอง: ลองใช้เหตุการณ์ที่น่าจะเป็นไปได้มากที่สุด หรือผสมผสานเหตุการณ์ต่างๆ แล้วดูว่าเกิดอะไรขึ้น หรือ
2. ดูโค้ดของเพจเพื่อพิจารณาว่าตัวจัดการเหตุการณ์ใดแนบมาด้วย

แน่นอนว่าคุณอาจจะเลือกใช้ stopImmediatePropagation(), stopPropagation() และ/หรือ preventDefault() เพื่อป้องกัน ตัวจัดการเหตุการณ์ที่มีอยู่จากการถูกเรียก

HTML ของปุ่มอาจเปลี่ยนแปลงได้ในอนาคต

จากความกังวลของคุณว่า HTML สำหรับเพจอาจเปลี่ยนแปลง: ใช่ อาจเป็นเช่นนั้น นั่นอาจทำให้ส่วนขยายของคุณเสียหาย จากนั้นคุณจะต้องอัปเดตส่วนขยายของคุณ หากคุณสามารถกำหนดตัวเลือกที่แน่นอนซึ่งใช้โดยโค้ดสำหรับเพจได้ คุณสามารถลองใช้ตัวเลือกเดียวกันได้ สิ่งเหล่านี้มีโอกาสน้อยที่สุดที่จะเปลี่ยนแปลง เนื่องจากผู้ออกแบบหน้าเว็บต้องเปลี่ยนโค้ดด้วย แต่ท้ายที่สุดแล้ว คุณเพียงแค่ต้องอยู่กับความจริงที่ว่า HTML อาจเปลี่ยนแปลงไป แม้ว่าคุณจะสามารถพยายามลดผลกระทบที่อาจเกิดขึ้นจากการเปลี่ยนแปลงดังกล่าวได้ แต่ก็ไม่มีอะไรที่คุณสามารถทำได้เพื่อลบการพึ่งพา HTML ของหน้าเว็บที่คุณกำลังพยายามเชื่อมต่อโดยสมบูรณ์

เนื่องจากปฏิทินเป็นแอปหน้าเดียว ฉันจึงไม่รู้ว่าเวลาที่เหมาะสมในการค้นหาปุ่มใน DOM

เวลาที่เหมาะสมในการค้นหาปุ่มใน DOM จะขึ้นอยู่กับเพจเฉพาะที่คุณพยายามจะเชื่อมต่อด้วย มีเหตุการณ์ที่เป็นไปได้หลายเหตุการณ์ที่คุณสามารถใช้เพื่อกำหนดเวลาที่ควรเพิ่มตัวจัดการเหตุการณ์ของคุณ ซึ่งรวมถึง DOMContentLoaded, load< /a> และ readystatechange อย่างไรก็ตาม คุณสามารถเลือกทำการค้นหานี้ในขณะที่ click หรือเหตุการณ์อื่นๆ เกิดขึ้นได้ การดำเนินการนี้ใช้ทรัพยากร CPU เพิ่มขึ้นเล็กน้อย ดังนั้นจึงแนะนำให้ทำเช่นนั้นจนกว่าคุณจะพบองค์ประกอบที่คุณต้องการรับชม (เช่น เมื่อพบแล้ว ให้จำองค์ประกอบนั้นไว้)

อาจจำเป็นต้องเพิ่ม Listener หลักของคุณไปที่ window ก่อนที่จะโหลดเนื้อหาของหน้าใดๆ สิ่งนี้อาจจำเป็นเมื่อมีการแนบ Listeners ของเพจเข้ากับ window ตัวจัดการที่ถูกเพิ่มก่อนจะถูกเรียกก่อน ในฐานะส่วนขยาย คุณสามารถเลือกให้แน่ใจว่าสคริปต์เนื้อหาของคุณทำงานก่อนที่จะโหลดเนื้อหาของหน้าใดๆ การทำเช่นนี้ช่วยให้คุณมั่นใจได้ว่าตัวจัดการของคุณจะถูกเรียกก่อน

การสกัดกั้นเหตุการณ์จริงๆ:
เป้าหมายของคุณคือการเรียกตัวจัดการของคุณก่อนตัวจัดการซึ่งอยู่ในสคริปต์ของเพจ โดยไม่รู้ว่าองค์ประกอบใดที่ตัวฟังเหตุการณ์ถูกวางไว้จริง ๆ (อาจเป็นองค์ประกอบบรรพบุรุษขององค์ประกอบหรือองค์ประกอบนั้นเอง) และหากวางไว้บน ระยะการจับภาพ เป้าหมาย หรือฟองสบู่ วิธีที่คุณสามารถทำให้มีแนวโน้มมากที่สุดที่จะมีการเรียกตัวจัดการของคุณก่อนคือการวางลงบน window ในระยะการจับภาพ คุณอาจจำเป็นต้องให้สคริปต์ของคุณทำงานก่อนที่จะโหลดเนื้อหาใดๆ เพื่อให้ตัวจัดการของคุณเป็นคนแรกที่ถูกเพิ่มใน window สำหรับเหตุการณ์ประเภทนั้น อย่างไรก็ตาม โดยปกติแล้วไม่จำเป็นต้องแน่ใจว่าได้รันก่อนที่จะโหลดเนื้อหาใดๆ

สำหรับกรณีเฉพาะที่คุณสนใจ ปุ่ม "สร้าง" ใน Google ปฏิทิน รหัสสำหรับ <div> ที่มีปุ่มคือ createEventButtonContainer ดังนั้น คุณสามารถทำบางอย่างเช่น (คุณไม่สามารถใช้ jQuery ได้ เนื่องจากเป็นเพียงช่วง 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.
    }
}

คุณสามารถรับปุ่มผ่านฟังก์ชัน $() ใน jQuery เพื่อให้ได้ปุ่มมานั้น ก็ไม่รับประกัน 100% แต่อย่างใด และเพิ่มผู้ฟังเหตุการณ์ที่ส่วนท้ายของการโหลดหน้า ดังนั้นคุณจึงมั่นใจได้ว่ามีการโหลดหน้าทั้งหมดแล้ว