[mv3] Add support for custom scriptlet filters

At commit time, only Chromium supports custom scriptlet filters, and
this also requires that the user enables the "Allow User Scripts"
setting in the extension details.

Custom scriptlet filters can be entered through the "Import/Export"
field in the "Custom filters" pane in the dashboard. Once a custom
scriptlet filter i spresent in the list of filters, it can be freely
edited.

Custom scriptlet filters are enforced in basic and higher filtering
modes -- just as is the case with custom cosmetic filters.

This new capability is mostly of interest to filter list authors.

Author: gorhill

platform/mv3/chromium/manifest.json

@@ -43,8 +43,10 @@
   "permissions": [
     "activeTab",
     "declarativeNetRequest",
+    "offscreen",
     "scripting",
-    "storage"
+    "storage",
+    "userScripts"
   ],
   "short_name": "uBO Lite",
   "storage": {

platform/mv3/extension/js/fetch.js

@@ -23,14 +23,10 @@ import { ubolErr } from './debug.js';
 
 /******************************************************************************/
 
-function fetchJSON(path) {
+export function fetchJSON(path) {
     return fetch(`${path}.json`).then(response =>
         response.json()
     ).catch(reason => {
         ubolErr(`fetchJSON/${reason}`);
     });
 }
-
-/******************************************************************************/
-
-export { fetchJSON };

platform/mv3/extension/js/filter-manager-ui.js

@@ -156,7 +156,16 @@ async function renderCustomFilters() {
                 ...Array.from(storedSelectors),
                 ...Array.from(domSelectors),
             ])
-        ).sort();
+        ).sort((a, b) => {
+            const as = a[0] === '+';
+            const bs = b[0] === '+';
+            if ( as ) {
+                return bs && as < bs ? -1 : 1;
+            } else if ( bs ) {
+                return -1;
+            }
+            return a < b ? -1 : 1;
+        });
         const ulSelectors = qs$(hostnameNode, '.selectors');
         for ( const selector of selectors ) {
             const selectorNode = nodeFromTemplate('customFiltersSelector');
@@ -251,15 +260,29 @@ async function onHostnameChanged(target, before, after) {
 
 async function onSelectorChanged(target, before, after) {
     // Validate selector
-    const parserModule = await import('./static-filtering-parser.js');
-    const compiler = new parserModule.ExtSelectorCompiler({ nativeCssHas: true });
-    const result = {};
-    if ( compiler.compile(after, result) === false ) {
+    const sfp = await import('./static-filtering-parser.js');
+    const parser = new sfp.AstFilterParser({
+        nativeCssHas: true,
+        trustedSource: true,
+    });
+    const hostname = hostnameFromNode(target);
+    parser.parse(`##${after}`);
+    if ( parser.hasError() ) {
+        target.textContent = before;
+        return;
+    }
+    let prettySelector, uglySelector;
+    if ( parser.isScriptletFilter() ) {
+        prettySelector = `+js(${parser.getTypeString(sfp.NODE_TYPE_EXT_PATTERN_SCRIPTLET)})`;
+        uglySelector = prettySelector;
+    } else if ( parser.isCosmeticFilter() ) {
+        prettySelector = parser.getTypeString(sfp.NODE_TYPE_EXT_PATTERN_COSMETIC);
+        uglySelector = parser.result.compiled;
+    }
+    if ( Boolean(prettySelector) === false ) {
         target.textContent = before;
         return;
     }
-
-    const hostname = hostnameFromNode(target);
 
     dom.cl.add(dom.body, 'readonly');
     updateContentEditability();
@@ -271,11 +294,11 @@ async function onSelectorChanged(target, before, after) {
     });
 
     // Add new selector to storage
-    target.dataset.ugly = result.compiled;
-    target.dataset.pretty = result.raw;
+    target.dataset.ugly = uglySelector;
+    target.dataset.pretty = prettySelector;
     await sendMessage({ what: 'addCustomFilters',
         hostname,
-        selectors: [ result.compiled ],
+        selectors: [ uglySelector ],
     });
 
     await debounceRenderCustomFilters();
@@ -285,7 +308,7 @@ async function onSelectorChanged(target, before, after) {
 
 function onTextChanged(target) {
     const before = target.dataset.pretty;
-    const after = target.textContent.trim();
+    const after = target.textContent.trim().replace('\n', '');
     if ( after !== target.textContent ) {
         target.textContent = after;
     }
@@ -353,19 +376,26 @@ function onUndoClicked(ev) {
 /******************************************************************************/
 
 async function importFromText(text) {
-    const parserModule = await import('./static-filtering-parser.js');
-    const parser = new parserModule.AstFilterParser({ nativeCssHas: true });
+    const sfp = await import('./static-filtering-parser.js');
+    const parser = new sfp.AstFilterParser({
+        nativeCssHas: true,
+        trustedSource: true,
+    });
     const lines = text.split(/\n/);
     const hostnameToSelectorsMap = new Map();
 
     for ( const line of lines ) {
         parser.parse(line);
         if ( parser.hasError() ) { continue; }
-        if ( parser.isCosmeticFilter() === false ) { continue; }
         if ( parser.hasOptions() === false ) { continue; }
-        const { compiled, exception } = parser.result;
-        if ( compiled === undefined ) { continue; }
-        if ( exception ) { continue; }
+        if ( parser.isException() ) { continue; }
+        let selector;
+        if ( parser.isScriptletFilter() ) {
+            selector = `+js(${parser.getTypeString(sfp.NODE_TYPE_EXT_PATTERN_SCRIPTLET)})`;
+        } else if ( parser.isCosmeticFilter() ) {
+            selector = parser.result.compiled;
+        }
+        if ( Boolean(selector) === false ) { continue; }
         const hostnames = new Set();
         for ( const { hn, not, bad } of parser.getExtFilterDomainIterator() ) {
             if ( bad ) { continue; }
@@ -379,7 +409,7 @@ async function importFromText(text) {
             if ( selectors.size === 0 ) {
                 hostnameToSelectorsMap.set(hn, selectors)
             }
-            selectors.add(compiled);
+            selectors.add(selector);
         }
     }
 

platform/mv3/extension/js/filter-manager.js

@@ -25,6 +25,7 @@ import {
     localRead,
     localRemove,
     localWrite,
+    runtime,
 } from './ext.js';
 
 import {
@@ -33,7 +34,16 @@ import {
     subtractHostnameIters,
 } from './utils.js';
 
-import { ubolErr } from './debug.js';
+import {
+    ubolErr,
+    ubolLog,
+} from './debug.js';
+
+/******************************************************************************/
+
+const isProcedural = a => a.startsWith('{');
+const isScriptlet = a => a.startsWith('+js');
+const isCSS = a => isProcedural(a) === false && isScriptlet(a) === false;
 
 /******************************************************************************/
 
@@ -82,7 +92,7 @@ export async function customFiltersFromHostname(hostname) {
         const selectors = results[i];
         if ( selectors === undefined ) { continue; }
         selectors.forEach(selector => {
-            out.push(selector.startsWith('0') ? selector.slice(1) : selector);
+            out.push(selector);
         });
     }
     return out.sort();
@@ -107,7 +117,7 @@ async function getAllCustomFilterKeys() {
 export async function getAllCustomFilters() {
     const collect = async key => {
         const selectors = await readFromStorage(key);
-        return [ key.slice(5), selectors.map(a => a.startsWith('0') ? a.slice(1) : a) ];
+        return [ key.slice(5), selectors ];
     };
     const keys = await getAllCustomFilterKeys();
     const promises = keys.map(k => collect(k));
@@ -142,7 +152,7 @@ export async function injectCustomFilters(tabId, frameId, hostname) {
     const selectors = await customFiltersFromHostname(hostname);
     if ( selectors.length === 0 ) { return; }
     const promises = [];
-    const plainSelectors = selectors.filter(a => a.startsWith('{') === false);
+    const plainSelectors = selectors.filter(a => isCSS(a));
     if ( plainSelectors.length !== 0 ) {
         promises.push(
             browser.scripting.insertCSS({
@@ -154,7 +164,7 @@ export async function injectCustomFilters(tabId, frameId, hostname) {
             })
         );
     }
-    const proceduralSelectors = selectors.filter(a => a.startsWith('{'));
+    const proceduralSelectors = selectors.filter(a => isProcedural(a));
     if ( proceduralSelectors.length !== 0 ) {
         promises.push(
             browser.scripting.executeScript({
@@ -173,11 +183,11 @@ export async function injectCustomFilters(tabId, frameId, hostname) {
 /******************************************************************************/
 
 export async function registerCustomFilters(context) {
-    const siteKeys = await getAllCustomFilterKeys();
-    if ( siteKeys.length === 0 ) { return; }
+    const customFilters = new Map(await getAllCustomFilters());
+    if ( customFilters.size === 0 ) { return; }
 
     const { none } = context.filteringModeDetails;
-    let hostnames = siteKeys.map(a => a.slice(5));
+    let hostnames = Array.from(customFilters.keys());
     if ( none.has('all-urls') ) {
         const { basic, optimal, complete } = context.filteringModeDetails;
         hostnames = intersectHostnameIters(hostnames, [
@@ -186,6 +196,9 @@ export async function registerCustomFilters(context) {
     } else if ( none.size !== 0 ) {
         hostnames = [ ...subtractHostnameIters(hostnames, none) ];
     }
+    hostnames = hostnames.filter(a => {
+        return customFilters.get(a).some(a => isCSS(a) || isProcedural(a));
+    });
     if ( hostnames.length === 0 ) { return; }
 
     const directive = {
@@ -251,10 +264,6 @@ async function removeCustomFiltersByKey(key, toRemove) {
     const beforeCount = selectors.length;
     for ( const selector of toRemove ) {
         let i = selectors.indexOf(selector);
-        if ( i === -1 ) {
-            i = selectors.indexOf(`0${selector}`);
-            if ( i === -1 ) { continue; }
-        }
         selectors.splice(i, 1);
     }
     const afterCount = selectors.length;
@@ -266,3 +275,113 @@ async function removeCustomFiltersByKey(key, toRemove) {
     }
     return true;
 }
+
+/******************************************************************************/
+
+export function isUserScriptsAvailable() {
+    if ( browser.offscreen === undefined ) { return false; }
+    try {
+        chrome.userScripts.getScripts();
+    } catch {
+        return false;
+    }
+    return true;
+}
+
+export async function registerCustomScriptlets(context) {
+    if ( isUserScriptsAvailable() === false ) { return; }
+    const { none, basic, optimal, complete } = context.filteringModeDetails;
+    const notNone = [ ...basic, ...optimal, ...complete ];
+    if ( registerCustomScriptlets.promise ) {
+        registerCustomScriptlets.promise = registerCustomScriptlets.promise.then(( ) =>
+            registerCustomScriptlets.create().then(worlds =>
+                registerCustomScriptlets.register(worlds, none, notNone)
+            )
+        );
+    } else {
+        registerCustomScriptlets.promise = registerCustomScriptlets.create().then(worlds =>
+            registerCustomScriptlets.register(worlds, none, notNone)
+        );
+    }
+    return registerCustomScriptlets.promise;
+}
+
+registerCustomScriptlets.register = async function(worlds, none, notNone) {
+    if ( Boolean(worlds) === false ) { return; }
+    const toAdd = [];
+    const prepare = world => {
+        let { hostnames } = world;
+        if ( none.has('all-urls') ) {
+            hostnames = intersectHostnameIters(hostnames, notNone);
+        } else if ( none.size !== 0 ) {
+            hostnames = [ ...subtractHostnameIters(hostnames, none) ];
+        }
+        if ( hostnames.length === 0 ) { return; }
+        return {
+            allFrames: true,
+            js: [ { code: world.code } ],
+            matches: matchesFromHostnames(hostnames),
+            runAt: 'document_start',
+        };
+    };
+    if ( worlds.ISOLATED ) {
+        const directive = prepare(worlds.ISOLATED);
+        if ( directive ) {
+            directive.id = 'user.isolated';
+            directive.world = 'USER_SCRIPT';
+            toAdd.push(directive);
+        }
+    }
+    if ( worlds.MAIN ) {
+        const directive = prepare(worlds.MAIN);
+        if ( directive ) {
+            directive.id = 'user.main';
+            directive.world = 'MAIN';
+            toAdd.push(directive);
+        }
+    }
+    if ( toAdd.length === 0 ) { return; }
+    await browser.userScripts.register(toAdd).then(( ) => {
+        ubolLog(`Registered userscript ${toAdd.map(v => v.id)}`);
+    });
+};
+
+registerCustomScriptlets.create = async function() {
+    const toRemove = await browser.userScripts.getScripts();
+    if ( toRemove.length !== 0 ) {
+        await browser.userScripts.unregister();
+        ubolLog(`Unregistered userscript ${toRemove.map(v => v.id)}`);
+    }
+    const { promise: offscreenPromise, resolve: offscreenResolve } = Promise.withResolvers();
+    const handler = (msg, sender, callback) => {
+        if ( typeof msg !== 'object' ) { return; }
+        switch ( msg?.what ) {
+        case 'getAllCustomFilters':
+            getAllCustomFilters().then(result => {
+                callback(result);
+            });
+            break;
+        case 'registerCustomScriptlets':
+            offscreenResolve(msg);
+            break;
+        default:
+            break;
+        }
+    };
+    const { promise: timeoutPromise, resolve: timeoutResolve } = Promise.withResolvers();
+    self.setTimeout(timeoutResolve, 1000);
+    runtime.onMessage.addListener(handler);
+    const [ worlds ] = await Promise.all([
+        Promise.race([ offscreenPromise, timeoutPromise ]),
+        browser.offscreen.createDocument({
+            url: '/js/offscreen/compile-scriptlets.html',
+            reasons: [ 'WORKERS' ],
+            justification: 'To compile custom user script-based filters in a modular way from service worker (service workers do not allow dynamic module import)',
+        }),
+    ]);
+    runtime.onMessage.removeListener(handler);
+    await browser.offscreen.closeDocument();
+    return worlds;
+};
+
+registerCustomScriptlets.promise = null;