AG-39760 Improve 'prevent-addEventListener' — add ability to match specific element. #480

AdamWr · AdamWr · commit 9d40d112adc6 · 2025-04-01T17:07:07.000+03:00
Squashed commit of the following: commit c16c23f Author: Adam Wróblewski <adam@adguard.com> Date: Tue Mar 25 17:10:07 2025 +0100 Add log message for additionalArgName and additionalArgValue commit 025902f Author: Slava Leleka <v.leleka@adguard.com> Date: Tue Mar 25 18:45:20 2025 +0300 Update docs commit b05c54a Author: Adam Wróblewski <adam@adguard.com> Date: Mon Mar 24 13:55:22 2025 +0100 Add JSDoc for elementMatches function Fix element type checking in getElementAttributesWithValues commit 3147a1a Author: Slava Leleka <v.leleka@adguard.com> Date: Mon Mar 24 15:31:57 2025 +0300 Update jsdoc commit 33fa116 Author: Adam Wróblewski <adam@adguard.com> Date: Mon Mar 24 12:34:22 2025 +0100 Fix formatting in documentation commit 8b20b18 Author: Adam Wróblewski <adam@adguard.com> Date: Mon Mar 24 12:19:24 2025 +0100 Improve log-addEventListener Log target element commit 5f9c075 Author: Adam Wróblewski <adam@adguard.com> Date: Fri Mar 14 15:07:50 2025 +0100 Improve 'prevent-addEventListener' — add ability to match specific element
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,16 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 <!-- TODO: change `@added unknown` tag due to the actual version -->
 <!--       during new scriptlets or redirects releasing -->
 
+## [Unreleased]
+
+### Added
+
+- ability in `prevent-addEventListener` scriptlet to match specific element
+  and updated `log-addEventListener` scriptlet to log target element [#480]
+
+[Unreleased]: https://github.com/AdguardTeam/Scriptlets/compare/v2.1.6...HEAD
+[#480]: https://github.com/AdguardTeam/Scriptlets/issues/480
+
 ## [v2.1.6] - 2025-03-06
 
 ### Fixed
diff --git a/src/helpers/attribute-utils.ts b/src/helpers/attribute-utils.ts
@@ -156,3 +156,34 @@ export const parseAttributePairs = (input: string): ParsedAttributePair[] => {
 
     return pairs;
 };
+
+/**
+ * Retrieves the attributes and their values of a given DOM element
+ * and returns them as a string in the format:
+ * 'nodeName[attrName1="attrValue1"][attrName2="attrValue2"]'.
+ *
+ * @param element The DOM element to extract attributes from.
+ * @returns A string representation of the element's attributes
+ * and their values, or an empty string if the element
+ * or its attributes are not defined.
+ */
+export const getElementAttributesWithValues = (element: any): string => {
+    if (
+        !element
+        || !(element instanceof Element)
+        || !element.attributes
+        || !element.nodeName
+    ) {
+        return '';
+    }
+    const attributes = element.attributes;
+    const nodeName = element.nodeName.toLowerCase();
+    let result = nodeName;
+
+    for (let i = 0; i < attributes.length; i += 1) {
+        const attr = attributes[i];
+        result += `[${attr.name}="${attr.value}"]`;
+    }
+
+    return result;
+};
diff --git a/src/scriptlets/log-addEventListener.js b/src/scriptlets/log-addEventListener.js
@@ -7,6 +7,7 @@ import {
     logMessage,
     objectToString,
     isEmptyObject,
+    getElementAttributesWithValues,
 } from '../helpers';
 
 /**
@@ -31,8 +32,32 @@ export function logAddEventListener(source) {
 
     function addEventListenerWrapper(type, listener, ...args) {
         if (validateType(type) && validateListener(listener)) {
-            const message = `addEventListener("${type}", ${listenerToString(listener)})`;
-            logMessage(source, message, true);
+            let targetElement;
+            let targetElementInfo;
+            const listenerInfo = listenerToString(listener);
+
+            if (this) {
+                if (this instanceof Window) {
+                    targetElementInfo = 'window';
+                } else if (this instanceof Document) {
+                    targetElementInfo = 'document';
+                } else if (this instanceof Element) {
+                    targetElement = this;
+                    targetElementInfo = getElementAttributesWithValues(this);
+                }
+            }
+
+            if (targetElementInfo) {
+                const message = `addEventListener("${type}", ${listenerInfo})\nElement: ${targetElementInfo}`;
+                logMessage(source, message, true);
+                if (targetElement) {
+                    // eslint-disable-next-line no-console
+                    console.log('log-addEventListener Element:', targetElement);
+                }
+            } else {
+                const message = `addEventListener("${type}", ${listenerInfo})`;
+                logMessage(source, message, true);
+            }
             hit(source);
         } else {
             // logging while debugging
@@ -86,4 +111,5 @@ logAddEventListener.injections = [
     logMessage,
     objectToString,
     isEmptyObject,
+    getElementAttributesWithValues,
 ];
diff --git a/src/scriptlets/prevent-addEventListener.js b/src/scriptlets/prevent-addEventListener.js
@@ -4,6 +4,7 @@ import {
     validateType,
     validateListener,
     listenerToString,
+    logMessage,
 } from '../helpers';
 
 /* eslint-disable max-len */
@@ -21,14 +22,24 @@ import {
  *
  * ### Syntax
  *
+ * <!-- markdownlint-disable line-length -->
+ *
  * ```text
- * example.org#%#//scriptlet('prevent-addEventListener'[, typeSearch[, listenerSearch]])
+ * example.org#%#//scriptlet('prevent-addEventListener'[, typeSearch[, listenerSearch[, additionalArgName, additionalArgValue]]])
  * ```
  *
+ * <!-- markdownlint-enable line-length -->
+ *
  * - `typeSearch` — optional, string or regular expression matching the type (event name);
  *   defaults to match all types; invalid regular expression will cause exit and rule will not work
  * - `listenerSearch` — optional, string or regular expression matching the listener function body;
  *   defaults to match all listeners; invalid regular expression will cause exit and rule will not work
+ * - `additionalArgName` — optional, string, name of the additional argument to match;
+ *   currently only `elements` is supported;
+ * - `additionalArgValue` — optional, value corresponding to the additional argument name;
+ *   for `elements` it can be a CSS selector or one of the following values:
+ *     - `window`
+ *     - `document`
  *
  * ### Examples
  *
@@ -52,20 +63,84 @@ import {
  *     });
  *     ```
  *
+ * 1. Prevent 'click' listeners with the callback body containing `foo` and only if the element has the class `bar`
+ *
+ *     ```adblock
+ *     example.org#%#//scriptlet('prevent-addEventListener', 'click', 'foo', 'elements', '.bar')
+ *     ```
+ *
+ *     For instance, this listener will not be called:
+ *
+ *     ```javascript
+ *     const el = document.querySelector('.bar');
+ *     el.addEventListener('click', () => {
+ *         window.test = 'foo';
+ *     });
+ *     ```
+ *
+ *     This listener will be called:
+ *
+ *     ```javascript
+ *     const el = document.querySelector('.xyz');
+ *     el.addEventListener('click', () => {
+ *         window.test = 'foo';
+ *     });
+ *     ```
+ *
  * @added v1.0.4.
  */
 /* eslint-enable max-len */
-export function preventAddEventListener(source, typeSearch, listenerSearch) {
+export function preventAddEventListener(source, typeSearch, listenerSearch, additionalArgName, additionalArgValue) {
     const typeSearchRegexp = toRegExp(typeSearch);
     const listenerSearchRegexp = toRegExp(listenerSearch);
 
+    let elementToMatch;
+    if (additionalArgName) {
+        if (additionalArgName !== 'elements') {
+            logMessage(source, `Invalid "additionalArgName": ${additionalArgName}\nOnly "elements" is supported.`);
+            return;
+        }
+
+        if (!additionalArgValue) {
+            logMessage(source, '"additionalArgValue" is required.');
+            return;
+        }
+
+        elementToMatch = additionalArgValue;
+    }
+
+    /**
+     * Checks if an element matches the specified selector or element type.
+     *
+     * @param {any} element - The element to check
+     * @returns {boolean}
+     */
+    const elementMatches = (element) => {
+        // If elementToMatch is undefined, it means that the scriptlet was called without the `elements` argument
+        // so it should match all elements
+        if (elementToMatch === undefined) {
+            return true;
+        }
+        if (elementToMatch === 'window') {
+            return element === window;
+        }
+        if (elementToMatch === 'document') {
+            return element === document;
+        }
+        if (element && element.matches && element.matches(elementToMatch)) {
+            return true;
+        }
+        return false;
+    };
+
     const nativeAddEventListener = window.EventTarget.prototype.addEventListener;
 
     function addEventListenerWrapper(type, listener, ...args) {
         let shouldPrevent = false;
         if (validateType(type) && validateListener(listener)) {
             shouldPrevent = typeSearchRegexp.test(type.toString())
-                && listenerSearchRegexp.test(listenerToString(listener));
+                && listenerSearchRegexp.test(listenerToString(listener))
+                && elementMatches(this);
         }
 
         if (shouldPrevent) {
@@ -115,4 +190,5 @@ preventAddEventListener.injections = [
     validateType,
     validateListener,
     listenerToString,
+    logMessage,
 ];
diff --git a/tests/helpers/attribute-utils.spec.js b/tests/helpers/attribute-utils.spec.js
@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'vitest';
 
-import { parseAttributePairs } from '../../src/helpers';
+import { parseAttributePairs, getElementAttributesWithValues } from '../../src/helpers';
 
 describe('parseAttributePairs', () => {
     describe('valid input', () => {
@@ -153,3 +153,36 @@ describe('parseAttributePairs', () => {
         });
     });
 });
+
+describe('getElementAttributesWithValues', () => {
+    test('Only node name', () => {
+        const anchor = document.createElement('a');
+        const expected = 'a';
+        const result = getElementAttributesWithValues(anchor);
+        expect(result).toStrictEqual(expected);
+    });
+
+    test('Node name with attributes', () => {
+        const NODE_NAME = 'div';
+        const ATTRIBUTE_CLASS = 'class';
+        const ATTRIBUTE_CLASS_VALUE = 'test-class';
+        const ATTRIBUTE_STYLE = 'style';
+        const ATTRIBUTE_STYLE_VALUE = 'display: none;';
+        const ATTRIBUTE_DATA_TEST = 'data-test';
+        const ATTRIBUTE_DATA_TEST_VALUE = 'test-value';
+        const divWithClassAndStyle = document.createElement(NODE_NAME);
+        divWithClassAndStyle.setAttribute(ATTRIBUTE_CLASS, ATTRIBUTE_CLASS_VALUE);
+        divWithClassAndStyle.setAttribute(ATTRIBUTE_STYLE, ATTRIBUTE_STYLE_VALUE);
+        divWithClassAndStyle.setAttribute(ATTRIBUTE_DATA_TEST, ATTRIBUTE_DATA_TEST_VALUE);
+        // eslint-disable-next-line max-len
+        const expected = `${NODE_NAME}[${ATTRIBUTE_CLASS}="${ATTRIBUTE_CLASS_VALUE}"][${ATTRIBUTE_STYLE}="${ATTRIBUTE_STYLE_VALUE}"][${ATTRIBUTE_DATA_TEST}="${ATTRIBUTE_DATA_TEST_VALUE}"]`;
+        const result = getElementAttributesWithValues(divWithClassAndStyle);
+        expect(result).toStrictEqual(expected);
+    });
+
+    test('Not element - should return empty string', () => {
+        const expected = '';
+        const result = getElementAttributesWithValues('test');
+        expect(result).toStrictEqual(expected);
+    });
+});
diff --git a/tests/scriptlets/log-addEventListener.test.js b/tests/scriptlets/log-addEventListener.test.js
@@ -48,24 +48,38 @@ test('Checking if alias name works', (assert) => {
 });
 
 test('logs events to console', (assert) => {
+    assert.expect(7);
+
+    const elementId = 'testElement';
     const agLogAddEventListenerProp = 'agLogAddEventListenerProp';
     const eventName = 'click';
     const callback = function callback() {
         window[agLogAddEventListenerProp] = 'clicked';
     };
-    console.log = function log(input) {
+
+    const element = document.createElement('div');
+    element.setAttribute('id', elementId);
+    console.log = function log(...args) {
+        const input = args[0];
+        const elementArg = args[1];
         // Ignore hit messages with "trace"
         if (input.includes('trace')) {
             return;
         }
-        assert.ok(input.includes(eventName), 'console.hit input should be equal');
-        assert.ok(input.includes(callback.toString()), 'console.hit input should be equal');
-        assert.notOk(input.includes(INVALID_MESSAGE_START), 'Invalid message should not be displayed');
+
+        if (input.includes('log-addEventListener Element:')) {
+            assert.true(elementArg.matches(`div#${elementId}`), 'target element should matches the element');
+        } else {
+            assert.ok(input.includes(eventName), 'event name should be logged');
+            assert.ok(input.includes(callback.toString()), 'callback should be logged');
+            assert.ok(input.includes(`Element: div[id="${elementId}"]`), 'target element should be logged');
+            assert.notOk(input.includes(INVALID_MESSAGE_START), 'Invalid message should not be displayed');
+        }
+        nativeConsole(...args);
     };
 
     runScriptlet(name);
 
-    const element = document.createElement('div');
     element.addEventListener(eventName, callback);
     element.click();
 
@@ -74,6 +88,39 @@ test('logs events to console', (assert) => {
     clearGlobalProps(agLogAddEventListenerProp);
 });
 
+test('logs events to console - listener added to window', (assert) => {
+    assert.expect(6);
+
+    const agLogAddEventListenerProp = 'agLogAddEventListenerProp';
+    const eventName = 'click';
+    const callback = function callback() {
+        window[agLogAddEventListenerProp] = 'clicked';
+    };
+
+    console.log = function log(...args) {
+        const input = args[0];
+        // Ignore hit messages with "trace"
+        if (input.includes('trace')) {
+            return;
+        }
+        assert.ok(input.includes(eventName), 'event name should be logged');
+        assert.ok(input.includes(callback.toString()), 'callback should be logged');
+        assert.ok(input.includes('Element: window'), 'target element should be logged');
+        assert.notOk(input.includes(INVALID_MESSAGE_START), 'Invalid message should not be displayed');
+
+        nativeConsole(...args);
+    };
+
+    runScriptlet(name);
+
+    window.addEventListener(eventName, callback);
+    window.dispatchEvent(new Event(eventName));
+
+    assert.strictEqual(window.hit, 'FIRED', 'hit function fired');
+    assert.strictEqual(window[agLogAddEventListenerProp], 'clicked', 'property should change');
+    clearGlobalProps(agLogAddEventListenerProp);
+});
+
 test('logs events to console - listener is null', (assert) => {
     const eventName = 'click';
     const listener = null;
diff --git a/tests/scriptlets/prevent-addEventListener.test.js b/tests/scriptlets/prevent-addEventListener.test.js
