Skip to content

Latest commit

 

History

History
76 lines (54 loc) · 3.28 KB

README_en.md

File metadata and controls

76 lines (54 loc) · 3.28 KB

JavaScript Hook Event Listener

GitHub Repository：https://github.com/JSREI/js-hook-event-listener

简体中文 | English

JavaScript Hook Event Listener

A fundamental component series for JavaScript reverse engineering: Hooking event listener functions, typically used in writing JavaScript reverse engineering scripts like Tampermonkey, serves as a basic component to improve development efficiency.

API

    /**
     *
     * @param object The object to be hooked, events added to this object will be hooked.
     * @param addEventListenerAttributeName If callbacks are set using properties,
     * @param addEventListenerMethodName If event listeners are added using methods, what is the name of this method? The default value is addEventListener.
     * @param eventNameArray { string | Array } The name of the event to be hooked, can be a single string representing a single event, or an array of strings representing multiple events.
     * @param eventListenerHookFunc The hook logic to be added, before executing the hooked event listener each time the hooked event is triggered, this function will be executed first. This method needs to return a value that can be converted to true,
     *                       only then will the hooked event listener function be executed, otherwise it will not be executed.
     */
    constructor(object, addEventListenerAttributeName, addEventListenerMethodName = "addEventListener", eventNameArray, eventListenerHookFunc) {
      // ...
    }

Example

The usage in a Tampermonkey script is roughly as follows:

// Lurk in advance, the logic given later will be put in when the event listener is added, usually relying on tools like Tampermonkey scripts to inject into the head of the normal page to execute first
(() => {
    const fooBtnElement = document.getElementById("foo-btn");
    const hookFunc = function () {
        alert("Hook logic executed!");
        return true;
        // return false;
    };
    // Indicates that this element's
    new HookEventListener(fooBtnElement, "onclick", "addEventListener", ["click"], hookFunc).addHook();
})();

The code of the website developer in the page is like this and will be hooked by the previous code:

// Normal code, just add events normally, but it will be caught by the hook added before and quietly execute the hook logic first, and then execute the event callback method specified here
const elementById = document.getElementById("foo-btn");
const eventFunc = function () {
    alert("Button clicked!");
};
// elementById.addEventListener("click", eventFunc);
elementById.onclick = eventFunc;

TODO

For DOM elements that bind events directly in the tag, it should also be possible to hook them.

Reverse Engineering Technical Exchange Group

Scan to join the reverse engineering technical exchange group:

If the group QR code has expired, you can add my personal WeChat and send [Reverse Engineering Group] to invite you to the group:

Click here or scan to join the TG exchange group: