@browserless.io/browserless 2.32.1 → 2.33.0

package/extensions/ublocklite/js/scripting/zapper.js

@@ -23,187 +23,9 @@
 
 /******************************************************************************/
 
-const zapper = self.uBOLZapper = self.uBOLZapper || {};
-
-if ( zapper.injected ) { return; }
-zapper.injected = true;
-
-const webext = typeof browser === 'object' ? browser : chrome;
-
-/******************************************************************************/
-
-const sendMessage = msg => {
-    try {
-        webext.runtime.sendMessage(msg).catch(( ) => { });
-    } catch {
-    }
-};
-
-/******************************************************************************/
-
-const zapperSecret = (( ) => {
-    let secret = String.fromCharCode((Math.random() * 26) + 97);
-    do {
-        secret += (Math.floor(Math.random() * 2147483647) + 2147483647)
-            .toString(36)
-            .slice(2);
-    } while ( secret.length < 8 );
-    return secret;
-})();
-
-const zapperCSSStyle = [
-    'background: transparent',
-    'border: 0',
-    'border-radius: 0',
-    'box-shadow: none',
-    'color-scheme: light dark',
-    'display: block',
-    'filter: none',
-    'height: 100vh',
-    '    height: 100svh',
-    'left: 0',
-    'margin: 0',
-    'max-height: none',
-    'max-width: none',
-    'min-height: unset',
-    'min-width: unset',
-    'opacity: 1',
-    'outline: 0',
-    'padding: 0',
-    'pointer-events: auto',
-    'position: fixed',
-    'top: 0',
-    'transform: none',
-    'visibility: hidden',
-    'width: 100%',
-    'z-index: 2147483647',
-    ''
-].join(' !important;\n');
-
-const zapperCSS = `
-:root > [${zapperSecret}] {
-    ${zapperCSSStyle}
-}
-:root > [${zapperSecret}-loaded] {
-    visibility: visible !important;
-}
-:root [${zapperSecret}-click] {
-    pointer-events: none !important;
-}
-`;
-
-sendMessage({ what: 'insertCSS', css: zapperCSS });
-
-/******************************************************************************/
-
-const getElementBoundingClientRect = function(elem) {
-    let rect = typeof elem.getBoundingClientRect === 'function'
-        ? elem.getBoundingClientRect()
-        : { height: 0, left: 0, top: 0, width: 0 };
-
-    // https://github.com/gorhill/uBlock/issues/1024
-    // Try not returning an empty bounding rect.
-    if ( rect.width !== 0 && rect.height !== 0 ) {
-        return rect;
-    }
-    if ( elem.shadowRoot instanceof DocumentFragment ) {
-        return getElementBoundingClientRect(elem.shadowRoot);
-    }
-
-    let left = rect.left,
-        right = left + rect.width,
-        top = rect.top,
-        bottom = top + rect.height;
-
-    for ( const child of elem.children ) {
-        rect = getElementBoundingClientRect(child);
-        if ( rect.width === 0 || rect.height === 0 ) { continue; }
-        if ( rect.left < left ) { left = rect.left; }
-        if ( rect.right > right ) { right = rect.right; }
-        if ( rect.top < top ) { top = rect.top; }
-        if ( rect.bottom > bottom ) { bottom = rect.bottom; }
-    }
-
-    return {
-        bottom,
-        height: bottom - top,
-        left,
-        right,
-        top,
-        width: right - left
-    };
-};
-
-/******************************************************************************/
-
-const highlightElement = function(elem) {
-    if ( elem !== true ) {
-        if ( elem !== undefined ) {
-            if ( elem === highlightElement.current ) { return; }
-            if ( elem !== zapperFrame ) {
-                highlightElement.current = elem;
-            }
-        }
-    }
-    elem = highlightElement.current;
-
-    const ow = self.innerWidth;
-    const oh = self.innerHeight;
-    const islands = [];
-
-    if ( elem !== null ) {
-        const rect = getElementBoundingClientRect(elem);
-        // Ignore offscreen areas
-        if (
-            rect.left <= ow && rect.top <= oh &&
-            rect.left + rect.width >= 0 && rect.top + rect.height >= 0
-        ) {
-            islands.push(
-                `M${rect.left} ${rect.top}h${rect.width}v${rect.height}h-${rect.width}z`
-            );
-        }
-    }
-
-    zapperFramePort.postMessage({
-        what: 'svgPaths',
-        ocean: `M0 0h${ow}v${oh}h-${ow}z`,
-        islands: islands.join(''),
-    });
-};
-highlightElement.current = null;
-
-/******************************************************************************/
-
-const elementFromPoint = (( ) => {
-    let lastX, lastY;
-
-    return (x, y) => {
-        if ( x !== undefined ) {
-            lastX = x; lastY = y;
-        } else if ( lastX !== undefined ) {
-            x = lastX; y = lastY;
-        } else {
-            return null;
-        }
-        if ( !zapperFrame ) { return null; }
-        const magicAttr = `${zapperSecret}-click`;
-        zapperFrame.setAttribute(magicAttr, '');
-        let elem = document.elementFromPoint(x, y);
-        if ( elem === document.body || elem === document.documentElement ) {
-            elem = null;
-        }
-        // https://github.com/uBlockOrigin/uBlock-issues/issues/380
-        zapperFrame.removeAttribute(magicAttr);
-        return elem;
-    };
-})();
-
-/******************************************************************************/
-
-const highlightElementAtPoint = function(mx, my) {
-    const elem = elementFromPoint(mx, my);
-    highlightElement(elem);
-};
+const ubolOverlay = self.ubolOverlay;
+if ( ubolOverlay === undefined ) { return; }
+if ( ubolOverlay.file === '/zapper-ui.html' ) { return; }
 
 /******************************************************************************/
 
@@ -213,18 +35,18 @@ const highlightElementAtPoint = function(mx, my) {
 // With touch-driven devices, first highlight the element and remove only
 // when tapping again the highlighted area.
 
-const zapElementAtPoint = function(mx, my, options) {
+function zapElementAtPoint(mx, my, options) {
     if ( options.highlight ) {
-        const elem = elementFromPoint(mx, my);
+        const elem = ubolOverlay.elementFromPoint(mx, my);
         if ( elem ) {
-            highlightElement(elem);
+            ubolOverlay.highlightElements([ elem ]);
         }
         return;
     }
 
-    let elemToRemove = highlightElement.current;
+    let elemToRemove = ubolOverlay.highlightedElements?.[0] ?? null;
     if ( elemToRemove === null && mx !== undefined ) {
-        elemToRemove = elementFromPoint(mx, my);
+        elemToRemove = ubolOverlay.elementFromPoint(mx, my);
     }
 
     if ( elemToRemove instanceof Element === false ) { return; }
@@ -261,86 +83,38 @@ const zapElementAtPoint = function(mx, my, options) {
         }
     }
     elemToRemove.remove();
-    highlightElementAtPoint(mx, my);
-};
-
-/******************************************************************************/
-
-const onKeyPressed = function(ev) {
-    // Delete
-    if (
-        (ev.key === 'Delete' || ev.key === 'Backspace') ) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        zapElementAtPoint();
-        return;
-    }
-    // Esc
-    if ( ev.key === 'Escape' || ev.which === 27 ) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        quitZapper();
-        return;
-    }
-};
+    ubolOverlay.highlightElementAtPoint(mx, my);
+}
 
 /******************************************************************************/
 
-// https://github.com/chrisaljoudi/uBlock/issues/190
-//   May need to dynamically adjust the height of the overlay + new position
-//   of highlighted elements.
-
-const onViewportChanged = function() {
-    highlightElement(true);
-};
+function onKeyPressed(ev) {
+    if ( ev.key !== 'Delete' && ev.key !== 'Backspace' ) { return; }
+    ev.stopPropagation();
+    ev.preventDefault();
+    zapElementAtPoint();
+}
 
 /******************************************************************************/
 
-const startZapper = function() {
-    zapperFrame.focus();
-    self.addEventListener('scroll', onViewportChanged, { passive: true });
-    self.addEventListener('resize', onViewportChanged, { passive: true });
+function startZapper() {
     self.addEventListener('keydown', onKeyPressed, true);
-};
-
-/******************************************************************************/
+}
 
-const quitZapper = function() {
-    self.removeEventListener('scroll', onViewportChanged, { passive: true });
-    self.removeEventListener('resize', onViewportChanged, { passive: true });
+function quitZapper() {
     self.removeEventListener('keydown', onKeyPressed, true);
-    if ( zapperFramePort ) {
-        zapperFramePort.close();
-        zapperFramePort.onmessage = null;
-        zapperFramePort.onmessageerror = null;
-        zapperFramePort = null;
-    }
-    if ( zapperFrame ) {
-        zapperFrame.remove();
-        zapperFrame = null;
-    }
-    sendMessage({ what: 'removeCSS', css: zapperCSS });
-    zapper.injected = false;
-};
+}
 
 /******************************************************************************/
 
-const onFrameMessage = function(msg) {
+function onMessage(msg) {
     switch ( msg.what ) {
-    case 'start':
+    case 'startTool':
         startZapper();
-        if ( Boolean(zapperFramePort) === false ) { break; }
-        highlightElement(true);
         break;
-    case 'quitZapper':
+    case 'quitTool':
         quitZapper();
         break;
-    case 'highlightElementAtPoint':
-        highlightElementAtPoint(msg.mx, msg.my);
-        break;
-    case 'unhighlight':
-        highlightElement(null);
-        break;
     case 'zapElementAtPoint':
         zapElementAtPoint(msg.mx, msg.my, msg.options);
         if ( msg.options.highlight !== true && msg.options.stay !== true ) {
@@ -350,68 +124,11 @@ const onFrameMessage = function(msg) {
     default:
         break;
     }
-};
+}
 
 /******************************************************************************/
 
-// zapper-ui.html will be injected in the page through an iframe, and
-// is a sandboxed so as to prevent the page from interfering with its
-// content and behavior.
-//
-// The purpose of zapper.js is to install the zapper UI, and wait for the
-// component to establish a direct communication channel.
-//
-// When the zapper is installed on a page, the only change the page sees is an
-// iframe with a random attribute. The page can't see the content of the
-// iframe, and cannot interfere with its style properties. However the page
-// can remove the iframe.
-
-const bootstrap = async ( ) => {
-    const dynamicURL = new URL(webext.runtime.getURL('/zapper-ui.html'));
-    return new Promise(resolve => {
-        const frame = document.createElement('iframe');
-        frame.setAttribute(zapperSecret, '');
-        const onZapperLoad = ( ) => {
-            frame.onload = null;
-            frame.setAttribute(`${zapperSecret}-loaded`, '');
-            const channel = new MessageChannel();
-            const port = channel.port1;
-            port.onmessage = ev => {
-                onFrameMessage(ev.data || {});
-            };
-            port.onmessageerror = ( ) => {
-                quitZapper();
-            };
-            const realURL = new URL(dynamicURL);
-            realURL.hostname = webext.i18n.getMessage('@@extension_id');
-            frame.contentWindow.postMessage(
-                { what: 'zapperStart' },
-                realURL.origin,
-                [ channel.port2 ]
-            );
-            frame.contentWindow.focus();
-            resolve({
-                zapperFrame: frame,
-                zapperFramePort: port,
-            });
-        };
-        if ( dynamicURL.protocol !== 'safari-web-extension:' ) {
-            frame.onload = ( ) => {
-                frame.onload = onZapperLoad;
-                frame.contentWindow.location = dynamicURL.href;
-            };
-        } else {
-            frame.onload = onZapperLoad;
-            frame.setAttribute('src', dynamicURL.href);
-        }
-        document.documentElement.append(frame);
-    });
-};
-
-let { zapperFrame, zapperFramePort } = await bootstrap();
-if ( zapperFrame && zapperFramePort ) { return; }
-
-quitZapper();
+await ubolOverlay.install('/zapper-ui.html', onMessage);
 
 /******************************************************************************/
 

package/extensions/ublocklite/js/scripting-manager.js

@@ -30,6 +30,7 @@ import {
 import { fetchJSON } from './fetch.js';
 import { getEnabledRulesetsDetails } from './ruleset-manager.js';
 import { getFilteringModeDetails } from './mode-manager.js';
+import { registerCustomFilters } from './filter-manager.js';
 import { registerToolbarIconToggler } from './action.js';
 import { ubolLog } from './debug.js';
 
@@ -600,13 +601,16 @@ async function registerInjectables() {
         toRemove,
     };
 
-    registerDeclarative(context);
-    registerProcedural(context);
-    registerScriptlet(context, scriptletDetails);
-    registerSpecific(context);
-    registerGeneric(context, genericDetails);
-    registerHighGeneric(context, genericDetails);
-    registerToolbarIconToggler(context);
+    await Promise.all([
+        registerDeclarative(context),
+        registerProcedural(context),
+        registerScriptlet(context, scriptletDetails),
+        registerSpecific(context),
+        registerGeneric(context, genericDetails),
+        registerHighGeneric(context, genericDetails),
+        registerCustomFilters(context),
+        registerToolbarIconToggler(context),
+    ]);
 
     toRemove.push(...Array.from(before.keys()));
 

package/extensions/ublocklite/js/tool-overlay-ui.js

@@ -0,0 +1,241 @@
+/*******************************************************************************
+
+    uBlock Origin - a comprehensive, efficient content blocker
+    Copyright (C) 2025-present Raymond Hill
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see {http://www.gnu.org/licenses/}.
+
+    Home: https://github.com/gorhill/uBlock
+*/
+
+import { dom, qs$ } from './dom.js';
+import { sendMessage } from './ext.js';
+
+/******************************************************************************/
+
+export const toolOverlay = {
+    url: new URL('about:blank'),
+    svgRoot: qs$('svg#overlay'),
+    svgOcean: qs$('svg#overlay > path'),
+    svgIslands: qs$('svg#overlay > path + path'),
+    emptyPath: 'M0 0',
+    port: null,
+
+    start(onmessage) {
+        this.onmessage = onmessage;
+        globalThis.addEventListener('message', ev => {
+            const msg = ev.data || {};
+            if ( msg.what !== 'startOverlay' ) { return; }
+            if ( Array.isArray(ev.ports) === false ) { return; }
+            if ( ev.ports.length === 0 ) { return; }
+            toolOverlay.port = ev.ports[0];
+            toolOverlay.port.onmessage = ev => {
+                this.onMessage(ev.data || {});
+            };
+            toolOverlay.port.onmessageerror = ( ) => {
+                this.onmessage({ what: 'stopTool' });
+            };
+            this.moveable = qs$('aside:has(#move)');
+            if ( this.moveable !== null ) {
+                dom.on('aside #move', 'pointerdown', ev => {
+                    this.mover(ev);
+                });
+            }
+            this.onMessage({ what: 'startTool',
+                url: msg.url,
+                width: msg.width,
+                height: msg.height,
+            });
+            dom.cl.remove(dom.body, 'loading');
+        }, { once: true });
+    },
+
+    stop() {
+        this.highlightElementUnderMouse(false);
+        if ( this.port ) {
+            this.port.postMessage({ what: 'quitTool' });
+            this.port.onmessage = null;
+            this.port.onmessageerror = null;
+            this.port = null;
+        }
+    },
+
+    onMessage(wrapped) {
+        // Response to frame-initiated message?
+        if ( typeof wrapped?.fromFrameId === 'number' ) {
+            const resolve = this.pendingMessages.get(wrapped.fromFrameId);
+            if ( resolve ) {
+                this.pendingMessages.delete(wrapped.fromFrameId);
+                resolve(wrapped.msg);
+            }
+            return;
+        }
+        const msg = wrapped.msg || wrapped;
+        switch ( msg.what ) {
+        case 'startTool': {
+            this.url.href = msg.url;
+            const ow = msg.width;
+            const oh = msg.height;
+            this.svgOcean.setAttribute('d', `M0 0h${ow}v${oh}h-${ow}z`);
+            break;
+        }
+        case 'svgPaths':
+            this.svgOcean.setAttribute('d', msg.ocean + msg.islands);
+            this.svgIslands.setAttribute('d', msg.islands || this.emptyPath);
+            break;
+        default:
+            break;
+        }
+        const response = this.onmessage && this.onmessage(msg) || undefined;
+        // Send response if this is script-initiated message
+        if ( wrapped?.fromScriptId && this.port ) {
+            const { fromScriptId } = wrapped;
+            if ( response instanceof Promise ) {
+                response.then(response => {
+                    if ( this.port === null ) { return; }
+                    this.port.postMessage({ fromScriptId, msg: response });
+                });
+            } else {
+                this.port.postMessage({ fromScriptId, msg: response });
+            }
+        }
+    },
+    postMessage(msg) {
+        if ( this.port === null ) { return; }
+        const wrapped = {
+            fromFrameId: this.messageId++,
+            msg,
+        };
+        return new Promise(resolve => {
+            this.pendingMessages.set(wrapped.fromFrameId, resolve);
+            this.port.postMessage(wrapped);
+        });
+    },
+    messageId: 1,
+    pendingMessages: new Map(),
+
+    sendMessage(msg) {
+        return sendMessage(msg);
+    },
+
+    highlightElementUnderMouse(state) {
+        if ( dom.cl.has(dom.root, 'mobile') ) { return; }
+        if ( state === this.mstrackerOn ) { return; }
+        this.mstrackerOn = state;
+        if ( this.mstrackerOn ) {
+            dom.on(document, 'mousemove', this.onHover, { passive: true });
+            return;
+        }
+        dom.off(document, 'mousemove', this.onHover, { passive: true });
+        if ( this.mstrackerTimer === undefined ) { return; }
+        self.cancelAnimationFrame(this.mstrackerTimer);
+        this.mstrackerTimer = undefined;
+    },
+    onTimer() {
+        toolOverlay.mstrackerTimer = undefined;
+        if ( toolOverlay.port === null ) { return; }
+        toolOverlay.port.postMessage({
+            what: 'highlightElementAtPoint',
+            mx: toolOverlay.mstrackerX,
+            my: toolOverlay.mstrackerY,
+        });
+    },
+    onHover(ev) {
+        toolOverlay.mstrackerX = ev.clientX;
+        toolOverlay.mstrackerY = ev.clientY;
+        if ( toolOverlay.mstrackerTimer !== undefined ) { return; }
+        toolOverlay.mstrackerTimer =
+            self.requestAnimationFrame(toolOverlay.onTimer);
+    },
+    mstrackerOn: false,
+    mstrackerX: 0, mstrackerY: 0,
+    mstrackerTimer: undefined,
+
+    mover(ev) {
+        const target = ev.target;
+        if ( target.matches('#move') === false ) { return; }
+        if ( dom.cl.has(this.moveable, 'moving') ) { return; }
+        target.setPointerCapture(ev.pointerId);
+        this.moverIsTouch = ev.type.startsWith('touch');
+        if ( this.moverIsTouch ) {
+            const touch = ev.touches[0];
+            this.moverX0 = touch.pageX;
+            this.moverY0 = touch.pageY;
+        } else {
+            this.moverX0 = ev.pageX;
+            this.moverY0 = ev.pageY;
+        }
+        const rect = this.moveable.getBoundingClientRect();
+        this.moverCX0 = rect.x + rect.width / 2;
+        this.moverCY0 = rect.y + rect.height / 2;
+        dom.cl.add(this.moveable, 'moving');
+        self.addEventListener('pointermove', this.moverMoveAsync, { capture: true });
+        self.addEventListener('pointerup', this.moverStop, { capture: true, once: true });
+        ev.stopPropagation();
+        ev.preventDefault();
+    },
+    moverMove() {
+        this.moverTimer = undefined;
+        const cx1 = this.moverCX0 + this.moverX1 - this.moverX0;
+        const cy1 = this.moverCY0 + this.moverY1 - this.moverY0;
+        const rootW = dom.root.clientWidth;
+        const rootH = dom.root.clientHeight;
+        const moveableW = this.moveable.clientWidth;
+        const moveableH = this.moveable.clientHeight;
+        if ( cx1 < rootW / 2 ) {
+            this.moveable.style.setProperty('left', `${Math.max(cx1-moveableW/2,2)}px`);
+            this.moveable.style.removeProperty('right');
+        } else {
+            this.moveable.style.removeProperty('left');
+            this.moveable.style.setProperty('right', `${Math.max(rootW-cx1-moveableW/2,2)}px`);
+        }
+        if ( cy1 < rootH / 2 ) {
+            this.moveable.style.setProperty('top', `${Math.max(cy1-moveableH/2,2)}px`);
+            this.moveable.style.removeProperty('bottom');
+        } else {
+            this.moveable.style.removeProperty('top');
+            this.moveable.style.setProperty('bottom', `${Math.max(rootH-cy1-moveableH/2,2)}px`);
+        }
+    },
+    moverMoveAsync(ev) {
+        if ( toolOverlay.moverTimer !== undefined ) { return; }
+        if ( toolOverlay.moverIsTouch ) {
+            const touch = ev.touches[0];
+            toolOverlay.moverX1 = touch.pageX;
+            toolOverlay.moverY1 = touch.pageY;
+        } else {
+            toolOverlay.moverX1 = ev.pageX;
+            toolOverlay.moverY1 = ev.pageY;
+        }
+        toolOverlay.moverTimer = self.requestAnimationFrame(( ) => {
+            toolOverlay.moverMove();
+        });
+    },
+    moverStop(ev) {
+        if ( dom.cl.has(toolOverlay.moveable, 'moving') === false ) { return; }
+        dom.cl.remove(toolOverlay.moveable, 'moving');
+        self.removeEventListener('pointermove', toolOverlay.moverMoveAsync, { capture: true });
+        ev.target.releasePointerCapture(ev.pointerId);
+        ev.stopPropagation();
+        ev.preventDefault();
+    },
+    moveable: null,
+    moverIsTouch: false,
+    moverX0: 0, moverY0: 0,
+    moverX1: 0, moverY1: 0,
+    moverCX0: 0, moverCY0: 0,
+    moverTimer: undefined,
+};
+
+/******************************************************************************/