Add patching changes

Author: jonathanKingston

injected/src/config-feature.js

@@ -1,5 +1,6 @@
 import { immutableJSONPatch } from 'immutable-json-patch';
 import { camelcase, computeEnabledFeatures, matchHostname, parseFeatureSettings } from './utils.js';
+import { URLPattern } from 'urlpattern-polyfill';
 
 export default class ConfigFeature {
     /** @type {import('./utils.js').RemoteConfig | undefined} */
@@ -48,19 +49,55 @@ export default class ConfigFeature {
      * @protected
      */
     matchDomainFeatureSetting(featureKeyName) {
-        const domain = this.args?.site.domain;
-        if (!domain) return [];
         const domains = this._getFeatureSettings()?.[featureKeyName] || [];
         return domains.filter((rule) => {
-            if (Array.isArray(rule.domain)) {
-                return rule.domain.some((domainRule) => {
-                    return matchHostname(domain, domainRule);
-                });
-            }
-            return matchHostname(domain, rule.domain);
+            return this.matchConditionalChanges(rule);
         });
     }
 
+    /**
+     * Used to match conditional changes for a settings feature.
+     * @typedef {object} ConditionBlock
+     * @property {string[] | string} domain?
+     * @property {object} urlPattern?
+     */
+
+    /**
+     * Takes a conditional block and returns true if it applies.
+     * All conditions must be met to return true.
+     * @param {ConditionBlock} conditionBlock
+     * @returns {boolean}
+     */
+    matchConditionalChanges(conditionBlock) {
+        // Check domain condition
+        if (conditionBlock.domain && !this._matchDomainConditional(conditionBlock)) {
+            return false;
+        }
+
+        // Check URL pattern condition
+        if (conditionBlock.urlPattern) {
+            const pattern = new URLPattern(conditionBlock.urlPattern);
+            if (!this.args?.site.url || !pattern.test(this.args?.site.url)) {
+                return false;
+            }
+        }
+
+        // All conditions are met
+        return true;
+    }
+
+    _matchDomainConditional(conditionBlock) {
+        if (!conditionBlock.domain) return false;
+        const domain = this.args?.site.domain;
+        if (!domain) return false;
+        if (Array.isArray(conditionBlock.domain)) {
+            return conditionBlock.domain.some((domainRule) => {
+                return matchHostname(domain, domainRule);
+            });
+        }
+        return matchHostname(domain, conditionBlock.domain);
+    }
+
     /**
      * Return the settings object for a feature
      * @param {string} [featureName] - The name of the feature to get the settings for; defaults to the name of the feature
@@ -131,13 +168,14 @@ export default class ConfigFeature {
     */
     getFeatureSetting(featureKeyName, featureName) {
         let result = this._getFeatureSettings(featureName);
-        if (featureKeyName === 'domains') {
-            throw new Error('domains is a reserved feature setting key name');
+        if (featureKeyName in ['domains', 'conditionalChanges']) {
+            throw new Error(`${featureKeyName} is a reserved feature setting key name`);
         }
-        const domainMatch = [...this.matchDomainFeatureSetting('domains')].sort((a, b) => {
-            return a.domain.length - b.domain.length;
-        });
-        for (const match of domainMatch) {
+        // We only support one of these keys at a time, where conditionalChanges takes precedence
+        // TODO should we rename these?
+        // TODO should we only support conditionalChanges to support other types of settings?
+        const conditionalMatch = this.matchDomainFeatureSetting('conditionalChanges') || this.matchDomainFeatureSetting('domains');
+        for (const match of conditionalMatch) {
             if (match.patchSettings === undefined) {
                 continue;
             }

injected/src/content-feature.js

@@ -17,6 +17,7 @@ import ConfigFeature from './config-feature.js';
 /**
  * @typedef {object} Site
  * @property {string | null} domain
+ * @property {URL | null} url
  * @property {boolean} [isBroken]
  * @property {boolean} [allowlisted]
  * @property {string[]} [enabledFeatures]

injected/src/utils.js

@@ -118,31 +118,40 @@ export function hasThirdPartyOrigin(scriptOrigins) {
 }
 
 /**
- * Best guess effort of the tabs hostname; where possible always prefer the args.site.domain
- * @returns {string|null} inferred tab hostname
+ * @returns {URL | null}
  */
-export function getTabHostname() {
-    let framingOrigin = null;
+export function getTabUrl() {
+    let framingURLString = null;
     try {
         // @ts-expect-error - globalThis.top is possibly 'null' here
-        framingOrigin = globalThis.top.location.href;
+        framingURLString = globalThis.top.location.href;
     } catch {
-        framingOrigin = globalThis.document.referrer;
+        framingURLString = globalThis.document.referrer;
     }
 
+    // TODO validate if we need this, is it for Blob? Or data or something like that? My memory is fuzzy
     // Not supported in Firefox
     if ('ancestorOrigins' in globalThis.location && globalThis.location.ancestorOrigins.length) {
         // ancestorOrigins is reverse order, with the last item being the top frame
-        framingOrigin = globalThis.location.ancestorOrigins.item(globalThis.location.ancestorOrigins.length - 1);
+        framingURLString = globalThis.location.ancestorOrigins.item(globalThis.location.ancestorOrigins.length - 1);
     }
 
+    let framingURL;
     try {
         // @ts-expect-error - framingOrigin is possibly 'null' here
-        framingOrigin = new URL(framingOrigin).hostname;
+        framingURL = new URL(framingURLString)
     } catch {
-        framingOrigin = null;
+        framingURL = null;
     }
-    return framingOrigin;
+    return framingURL;
+}
+
+/**
+ * Best guess effort of the tabs hostname; where possible always prefer the args.site.domain
+ * @returns {string|null} inferred tab hostname
+ */
+export function getTabHostname() {
+    return getTabUrl()?.hostname || null;
 }
 
 /**
@@ -524,6 +533,7 @@ export function computeLimitedSiteObject() {
     const topLevelHostname = getTabHostname();
     return {
         domain: topLevelHostname,
+        url: getTabUrl()
     };
 }
 

package-lock.json

@@ -49,7 +49,8 @@
     "stylelint-csstree-validator": "^3.0.0",
     "typedoc": "^0.27.9",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0"
+    "typescript-eslint": "^8.27.0",
+    "urlpattern-polyfill": "^10.0.0"
   },
   "dependencies": {
     "immutable-json-patch": "^6.0.1"