Web interventions: add scriptlet feature (#1742)

* Adguard sizing

* Move to using mode of scriptlets

* Ensure submodule is always checked out

* Namespace attrs

* Add verbose logging for now

* Fix up replace node text

* Add more scriptlets

* Make a default object when attrs are missing

* adjust list of scriptlets to meet popunder needs

* add breakage flag

* don't need local var for debug flag

* fix typo in scriptlets.js and populate source. add exlusion rules for scriptlet submodule.

* fix typo in package-lock

* remove unnecessary scriptlet dependency from package.json, update package-lock.json

* Update README.md

* add dependabot submodule updates

* temp ignore tsc in scriptlets.js

* temp ignore scriptlets in eslint

* change eslint ignore

* try adding ignores to other eslint file

* code style fixes

* add scriptlets to other features

* add Scriptlets to stylelint ignore

* fix failing feature order unit test

* set checkout-submodules to not fetch latest

---------

Co-authored-by: Jonathan Kingston <[email protected]>

Author: dharb

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "injected/src/features/Scriptlets"]
+	path = injected/src/features/Scriptlets
+	url = https://github.com/AdguardTeam/Scriptlets.git

.prettierignore

@@ -3,6 +3,7 @@ docs/**/*
 injected/src/types
 special-pages/pages/**/types
 injected/integration-test/extension/contentScope.js
+injected/src/features/Scriptlets
 **/*.json
 **/*.md
 **/*.html

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
     "extends": ["stylelint-config-standard"],
     "plugins": ["stylelint-csstree-validator"],
-    "ignoreFiles": ["build/**/*.css", "Sources/**/*.css", "docs/**/*.css", "special-pages/pages/**/*/dist/*.css"],
+    "ignoreFiles": ["build/**/*.css", "Sources/**/*.css", "docs/**/*.css", "special-pages/pages/**/*/dist/*.css", "injected/src/features/Scriptlets/**/*"],
     "rules": {
         "csstree/validator": {
             "ignoreProperties": ["text-wrap", "view-transition-name"]

build-output.eslint.config.js

@@ -2,6 +2,9 @@
 // https://github.com/eslint/eslint/discussions/18806#discussioncomment-10848750
 
 export default [
+    {
+        ignores: ['injected/src/features/Scriptlets', 'injected/src/features/scriptlets.js'],
+    },
     {
         languageOptions: {
             ecmaVersion: 'latest',

eslint.config.js

@@ -23,6 +23,8 @@ export default tseslint.config(
             'playwright-report',
             'test-results',
             'injected/src/types',
+            'injected/src/features/Scriptlets',
+            'injected/src/features/scriptlets.js',
             '.idea',
         ],
     },

injected/README.md

@@ -196,3 +196,7 @@ This will create platform specific code within the `build` folder (that is not c
 ```shell
 npm run build
 ```
+
+#### Third-Party Libraries
+We make use of the following submodules:
+- [Adguard Scriptlets](https://github.com/AdguardTeam/Scriptlets)

injected/package.json

@@ -3,7 +3,8 @@
   "scripts": {
     "postinstall": "npm run copy-sjcl",
     "copy-sjcl": "node scripts/generateSJCL.js",
-    "build": "npm run build-types && npm run build-locales && npm run bundle-trackers && npm run bundle-entry-points",
+    "checkout-submodules": "git submodule update --init --recursive --no-fetch",
+    "build": "npm run checkout-submodules && npm run build-types && npm run build-locales && npm run bundle-trackers && npm run bundle-entry-points",
     "bundle-config": "node scripts/bundleConfig.mjs",
     "bundle-entry-points": "node scripts/entry-points.js",
     "build-chrome-mv3": "node scripts/entry-points.js",

injected/src/features.js

@@ -28,12 +28,13 @@ const otherFeatures = /** @type {const} */ ([
     'breakageReporting',
     'autofillPasswordImport',
     'favicon',
+    'scriptlets',
 ]);
 
 /** @typedef {baseFeatures[number]|otherFeatures[number]} FeatureName */
 /** @type {Record<string, FeatureName[]>} */
 export const platformSupport = {
-    apple: ['webCompat', 'duckPlayerNative', ...baseFeatures],
+    apple: ['webCompat', 'duckPlayerNative', 'scriptlets', ...baseFeatures],
     'apple-isolated': [
         'duckPlayer',
         'duckPlayerNative',

injected/src/features/Scriptlets

@@ -0,0 +1,87 @@
+import ContentFeature from '../content-feature.js';
+import { isBeingFramed } from '../utils.js';
+import { setCookie } from './Scriptlets/src/scriptlets/set-cookie.js';
+import { trustedSetCookie } from './Scriptlets/src/scriptlets/trusted-set-cookie.js';
+import { setCookieReload } from './Scriptlets/src/scriptlets/set-cookie-reload.js';
+import { removeCookie } from './Scriptlets/src/scriptlets/remove-cookie.js';
+import { setConstant } from './Scriptlets/src/scriptlets/set-constant.js';
+import { setLocalStorageItem } from './Scriptlets/src/scriptlets/set-local-storage-item.js';
+import { abortCurrentInlineScript } from './Scriptlets/src/scriptlets/abort-current-inline-script.js';
+import { abortOnPropertyRead } from './Scriptlets/src/scriptlets/abort-on-property-read.js';
+import { abortOnPropertyWrite } from './Scriptlets/src/scriptlets/abort-on-property-write.js';
+import { preventAddEventListener } from './Scriptlets/src/scriptlets/prevent-addEventListener.js';
+import { preventWindowOpen } from './Scriptlets/src/scriptlets/prevent-window-open.js';
+import { preventSetTimeout } from './Scriptlets/src/scriptlets/prevent-setTimeout.js';
+import { removeNodeText } from './Scriptlets/src/scriptlets/remove-node-text.js';
+import { preventFetch } from './Scriptlets/src/scriptlets/prevent-fetch.js';
+
+export class Scriptlets extends ContentFeature {
+    init() {
+        if (isBeingFramed()) {
+            return;
+        }
+        /* @type {import('./Scriptlets/src/scriptlets/scriptlets.ts').Source} */
+        const source = {
+            verbose: false,
+        };
+
+        const scriptlets = this.getFeatureSetting('scriptlets');
+        for (const scriptlet of scriptlets) {
+            source.name = scriptlet.name;
+            source.args = Object.values(scriptlet.attrs);
+            this.runScriptlet(scriptlet, source);
+        }
+    }
+
+    runScriptlet(scriptlet, source) {
+        const attrs = scriptlet.attrs || {};
+
+        // add debug flag to site breakage reports
+        this.addDebugFlag();
+
+        if (scriptlet.name === 'setCookie') {
+            setCookie(source, attrs.name, attrs.value, attrs.path, attrs.domain);
+        }
+        if (scriptlet.name === 'trustedSetCookie') {
+            trustedSetCookie(source, attrs.name, attrs.value, attrs.path, attrs.domain);
+        }
+        if (scriptlet.name === 'setCookieReload') {
+            setCookieReload(source, attrs.name, attrs.value, attrs.path, attrs.domain);
+        }
+        if (scriptlet.name === 'removeCookie') {
+            removeCookie(source, attrs.match);
+        }
+        if (scriptlet.name === 'setConstant') {
+            setConstant(source, attrs.property, attrs.value, attrs.stack, attrs.valueWrapper, attrs.setProxyTrap);
+        }
+        if (scriptlet.name === 'setLocalStorageItem') {
+            setLocalStorageItem(source, attrs.key, attrs.value);
+        }
+        if (scriptlet.name === 'abortCurrentInlineScript') {
+            abortCurrentInlineScript(source, attrs.property, attrs.search);
+        }
+        if (scriptlet.name === 'abortOnPropertyRead') {
+            abortOnPropertyRead(source, attrs.property);
+        }
+        if (scriptlet.name === 'abortOnPropertyWrite') {
+            abortOnPropertyWrite(source, attrs.property);
+        }
+        if (scriptlet.name === 'preventAddEventListener') {
+            preventAddEventListener(source, attrs.typeSearch, attrs.listenerSearch, attrs.additionalArgName, attrs.additionalArgValue);
+        }
+        if (scriptlet.name === 'preventWindowOpen') {
+            preventWindowOpen(source, attrs.match, attrs.delay, attrs.replacement);
+        }
+        if (scriptlet.name === 'preventSetTimeout') {
+            preventSetTimeout(source, attrs.matchCallback, attrs.matchDelay);
+        }
+        if (scriptlet.name === 'removeNodeText') {
+            removeNodeText(source, attrs.nodeName, attrs.textMatch, attrs.parentSelector);
+        }
+        if (scriptlet.name === 'preventFetch') {
+            preventFetch(source, attrs.propsToMatch, attrs.responseBody, attrs.responseType);
+        }
+    }
+}
+
+export default Scriptlets;