@readium/navigator 2.2.6 → 2.2.8

package/src/injection/Injector.ts

@@ -0,0 +1,356 @@
+import { IInjectableRule, IInjectable, IInjector, IInjectablesConfig } from "./Injectable";
+import { Link } from "@readium/shared";
+
+const inferTypeFromResource = (resource: IInjectable): string | undefined => {
+    // If blob has a type, use it
+    if ("blob" in resource && resource.blob.type) {
+        return resource.blob.type;
+    }
+    
+    // For scripts, default to text/javascript
+    if (resource.as === "script") {
+        return "text/javascript";
+    }
+    
+    // For links, try to infer from URL extension
+    if (resource.as === "link" && "url" in resource) {
+        const url = resource.url.toLowerCase();
+        if (url.endsWith(".css")) return "text/css";
+        if ([".js", ".mjs", ".cjs"].some(ext => url.endsWith(ext))) return "text/javascript";
+    }
+    
+    return undefined;
+};
+
+const applyAttributes = (element: HTMLElement, resource: IInjectable): void => {
+    // Apply extra attributes, filtering out root-level properties
+    if (resource.attributes) {
+        Object.entries(resource.attributes).forEach(([key, value]) => {
+            // Skip root-level properties to prevent conflicts
+            if (key === "type" || key === "rel" || key === "href" || key === "src") {
+                return;
+            }
+            
+            if (value !== undefined && value !== null) {
+                // Convert boolean attributes to proper HTML format
+                if (typeof value === "boolean") {
+                    if (value) {
+                        element.setAttribute(key, "");
+                    }
+                } else {
+                    element.setAttribute(key, value);
+                }
+            }
+        });
+    }
+};
+
+const scriptify = (doc: Document, resource: IInjectable, source: string): HTMLScriptElement => {
+    const s = doc.createElement("script");
+    s.dataset.readium = "true";
+    
+    // Set the injectable ID if provided
+    if (resource.id) {
+        s.id = resource.id;
+    }
+    
+    // Apply root-level type if provided
+    const finalType = resource.type || inferTypeFromResource(resource);
+    if (finalType) {
+        s.type = finalType;
+    }
+    
+    // Apply extra attributes
+    applyAttributes(s, resource);
+    
+    // Always set src from the processed URL
+    s.src = source;
+    
+    return s;
+};
+
+const linkify = (doc: Document, resource: IInjectable, source: string): HTMLLinkElement => {
+    const s = doc.createElement("link");
+    s.dataset.readium = "true";
+    
+    // Set the injectable ID if provided
+    if (resource.id) {
+        s.id = resource.id;
+    }
+    
+    // Apply root-level rel if provided
+    if (resource.rel) {
+        s.rel = resource.rel;
+    }
+    
+    const finalType = resource.type || inferTypeFromResource(resource);
+    if (finalType) {
+        s.type = finalType;
+    }
+    
+    // Apply extra attributes
+    applyAttributes(s, resource);
+    
+    // Always set href from the processed URL
+    s.href = source;
+    
+    return s;
+};
+
+export class Injector implements IInjector {
+    private readonly blobStore: Map<string, { url: string; refCount: number }> = new Map();
+    private readonly createdBlobUrls: Set<string> = new Set();
+    private readonly rules: IInjectableRule[];
+    private readonly allowedDomains: string[] = [];
+    private injectableIdCounter = 0;
+    
+    constructor(config: IInjectablesConfig) {
+        // Validate allowed domains - they should be proper URLs for external resources
+        this.allowedDomains = (config.allowedDomains || []).map(domain => {
+            try {
+                new URL(domain);
+                return domain;
+            } catch {
+                throw new Error(`Invalid allowed domain: "${domain}". Must be a valid URL (e.g., "https://fonts.googleapis.com").`);
+            }
+        });
+        
+        // Assign IDs to injectables that don't have them
+        this.rules = config.rules.map(rule => {
+            const processedRule: IInjectableRule = { ...rule };
+            
+            // Process prepend injectables (reverse to preserve order when prepending)
+            if (rule.prepend) {
+                processedRule.prepend = rule.prepend.map(injectable => ({
+                    ...injectable,
+                    id: injectable.id || `injectable-${this.injectableIdCounter++}`
+                })).reverse(); // Reverse here so we can process normally later
+            }
+            
+            // Process append injectables (keep original order)
+            if (rule.append) {
+                processedRule.append = rule.append.map(injectable => ({
+                    ...injectable,
+                    id: injectable.id || `injectable-${this.injectableIdCounter++}`
+                }));
+            }
+            
+            return processedRule;
+        });
+    }
+    
+    public dispose(): void {
+        // Cleanup any created blob URLs
+        for (const url of this.createdBlobUrls) {
+            try {
+                URL.revokeObjectURL(url);
+            } catch (error) {
+                console.warn("Failed to revoke blob URL:", url, error);
+            }
+        }
+        this.createdBlobUrls.clear();
+    }
+
+    public getAllowedDomains(): string[] {
+        return [...this.allowedDomains]; // Return a copy to prevent external modification
+    }
+
+    public async injectForDocument(doc: Document, link: Link): Promise<void> {        
+        for (const rule of this.rules) {
+            if (this.matchesRule(rule, link)) {
+                await this.applyRule(doc, rule);
+            }
+        }
+    }
+
+    private matchesRule(rule: IInjectableRule, link: Link): boolean {
+        // Use the original href from the publication, not the resolved blob URL
+        const originalHref = link.href;
+        
+        return rule.resources.some(pattern => {
+            if (pattern instanceof RegExp) {
+                return pattern.test(originalHref);
+            }
+            return originalHref === pattern;
+        });
+    }
+
+    private async getOrCreateBlobUrl(resource: IInjectable): Promise<string> {
+        // Use the injectable ID as the cache key
+        const cacheKey = resource.id!; // ID is guaranteed to exist after constructor
+        
+        if (this.blobStore.has(cacheKey)) {
+            const entry = this.blobStore.get(cacheKey)!;
+            entry.refCount++;
+            return entry.url;
+        }
+
+        if ("blob" in resource) {
+            const url = URL.createObjectURL(resource.blob);
+            this.blobStore.set(cacheKey, { url, refCount: 1 });
+            this.createdBlobUrls.add(url);
+            return url;
+        }
+        
+        throw new Error("Resource must have a blob property");
+    }
+
+    public async releaseBlobUrl(url: string): Promise<void> {
+        if (!this.createdBlobUrls.has(url)) return;
+
+        const entry = Array.from(this.blobStore.values())
+            .find(entry => entry.url === url);
+
+        if (entry) {
+            entry.refCount--;
+            if (entry.refCount <= 0) {
+                URL.revokeObjectURL(url);
+                this.createdBlobUrls.delete(url);
+                // Remove from blobStore
+                for (const [key, value] of this.blobStore.entries()) {
+                    if (value.url === url) {
+                        this.blobStore.delete(key);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    private async getResourceUrl(resource: IInjectable, doc: Document): Promise<string> {
+        if ("url" in resource) {
+            const resolvedUrl = new URL(resource.url, doc.baseURI).toString();
+            if (!this.isValidUrl(resolvedUrl, doc)) {
+                throw new Error(`Invalid URL: Only HTTPS, data:, blob:, or localhost HTTP URLs are allowed. Got: ${resource.url}`);
+            }
+            return resolvedUrl;
+        } else {
+            return this.getOrCreateBlobUrl(resource);
+        }
+    }
+
+    private createPreloadLink(doc: Document, resource: IInjectable, url: string): void {
+        if (resource.as !== "link" || resource.rel !== "preload") return;
+        
+        // Create a new resource object with preload attributes
+        const preloadResource: IInjectable = {
+            ...resource,
+            rel: "preload",
+            attributes: {
+                ...resource.attributes,
+                as: resource.as
+            }
+        };
+        
+        const preloadLink = linkify(doc, preloadResource, url);
+        doc.head.appendChild(preloadLink);
+    }
+
+    private createElement(doc: Document, resource: IInjectable, source: string): HTMLElement {
+        if (resource.as === "script") {
+            return scriptify(doc, resource, source);
+        }
+        if (resource.as === "link") {
+            return linkify(doc, resource, source);
+        }
+        throw new Error(`Unsupported element type: ${(resource as any).as}`);
+    }
+
+    private async applyRule(doc: Document, rule: IInjectableRule): Promise<void> {
+        const createdElements: { element: HTMLElement; url: string }[] = [];
+        
+        // Collect all injectables that pass their conditions before modifying the document
+        const prependInjectables = rule.prepend ? rule.prepend.filter(resource => 
+            !resource.condition || resource.condition(doc)
+        ) : [];
+        
+        const appendInjectables = rule.append ? rule.append.filter(resource => 
+            !resource.condition || resource.condition(doc)
+        ) : [];
+        
+        try {
+            // Process prepend injectables first (already reversed in constructor)
+            for (const resource of prependInjectables) {
+                await this.processInjectable(resource, doc, createdElements, "prepend");
+            }
+            
+            // Process append injectables next (in order)
+            for (const resource of appendInjectables) {
+                await this.processInjectable(resource, doc, createdElements, "append");
+            }
+        } catch (error) {
+            // Clean up any created elements on error
+            for (const { element, url } of createdElements) {
+                try {
+                    element.remove();
+                    await this.releaseBlobUrl(url);
+                } catch (cleanupError) {
+                    console.error("Error during cleanup:", cleanupError);
+                }
+            }
+            throw error;
+        }
+    }
+    
+    private async processInjectable(
+        resource: IInjectable, 
+        doc: Document, 
+        createdElements: { element: HTMLElement; url: string }[], 
+        position: "prepend" | "append"
+    ): Promise<void> {
+        const target = resource.target === "body" ? doc.body : doc.head;
+        if (!target) return;
+
+        let url: string | null = null;
+        try {
+            url = await this.getResourceUrl(resource, doc);
+            
+            if (resource.rel === "preload" && "url" in resource) {
+                this.createPreloadLink(doc, resource, url);
+            } else {
+                const element = this.createElement(doc, resource, url);
+                createdElements.push({ element, url });
+                
+                if (position === "prepend") {
+                    target.prepend(element);
+                } else {
+                    target.append(element);
+                }
+            }
+        } catch (error) {
+            console.error("Failed to process resource:", error);
+            if (url && "blob" in resource) {
+                await this.releaseBlobUrl(url);
+            }
+            throw error;
+        }
+    }
+
+    private isValidUrl(url: string, doc: Document): boolean {
+        try {
+            const parsed = new URL(url, doc.baseURI);
+            
+            // Allow data URLs
+            if (parsed.protocol === "data:") return true;
+            
+            // Allow blob URLs that we created
+            if (parsed.protocol === "blob:" && this.createdBlobUrls.has(url)) {
+                return true;
+            }
+
+            // Check against allowed domains if any are specified
+            if (this.allowedDomains.length > 0) {
+                const origin = parsed.origin;
+                return this.allowedDomains.some(allowed => {
+                    const allowedOrigin = new URL(allowed).origin;
+                    return origin === allowedOrigin;
+                });
+            }
+
+            // No allowed domains specified - deny external URLs
+            return false;
+        } catch {
+            return false;
+        }
+    }
+}

package/src/injection/epubInjectables.ts

@@ -0,0 +1,90 @@
+import { IInjectableRule, IInjectable } from "../injection/Injectable";
+import { stripJS, stripCSS } from "../helpers/minify";
+import { Metadata, Layout } from "@readium/shared";
+
+import readiumCSSAfter from "@readium/css/css/dist/ReadiumCSS-after.css?raw";
+import readiumCSSBefore from "@readium/css/css/dist/ReadiumCSS-before.css?raw";
+import readiumCSSDefault from "@readium/css/css/dist/ReadiumCSS-default.css?raw";
+
+import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
+import executionPreventionContent from "../dom/_readium_executionPrevention.js?raw";
+import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
+
+/**
+ * Creates injectable rules for EPUB content documents
+ */
+export function createReadiumEpubRules(metadata: Metadata): IInjectableRule[] {
+    const isFixedLayout = metadata.effectiveLayout === Layout.fixed;
+    
+    // Core injectables that should be prepended
+    const prependInjectables: IInjectable[] = [
+        // CSS Selector Generator - always injected
+        {
+            id: "css-selector-generator",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(cssSelectorGeneratorContent)], { type: "text/javascript" })
+        },
+        // Execution Prevention - conditional (has executable scripts)
+        {
+            id: "execution-prevention",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(executionPreventionContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        }
+    ];
+
+    // Core injectables that should be appended
+    const appendInjectables: IInjectable[] = [
+        // Onload Proxy - conditional (has executable scripts)
+        {
+            id: "onload-proxy",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(onloadProxyContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        }
+    ];
+
+    // Only add Readium CSS for reflowable documents
+    if (!isFixedLayout) {
+        // Readium CSS Before - prepended for reflowable
+        prependInjectables.unshift({
+            id: "readium-css-before",
+            as: "link",
+            target: "head",
+            blob: new Blob([stripCSS(readiumCSSBefore)], { type: "text/css" }),
+            rel: "stylesheet"
+        });
+        
+        // Readium CSS Default and After - appended for reflowable
+        appendInjectables.unshift(
+            // Readium CSS Default - only for reflowable AND no existing styles
+            {
+                id: "readium-css-default",
+                as: "link",
+                target: "head",
+                blob: new Blob([stripCSS(readiumCSSDefault)], { type: "text/css" }),
+                rel: "stylesheet",
+                condition: (doc: Document) => !(doc.querySelector("link[rel='stylesheet']") || doc.querySelector("style") || doc.querySelector("[style]:not([style=''])"))
+            },
+            // Readium CSS After - only for reflowable
+            {
+                id: "readium-css-after",
+                as: "link",
+                target: "head",
+                blob: new Blob([stripCSS(readiumCSSAfter)], { type: "text/css" }),
+                rel: "stylesheet"
+            }
+        );
+    }
+
+    return [
+        {
+            resources: [/\.xhtml$/, /\.html$/],
+            prepend: prependInjectables,
+            append: appendInjectables
+        }
+    ];
+}

package/src/injection/index.ts

@@ -0,0 +1,2 @@
+export * from "./Injectable";
+export * from "./Injector";

package/src/injection/webpubInjectables.ts

@@ -0,0 +1,59 @@
+import { IInjectableRule, IInjectable } from "../injection/Injectable";
+import { stripJS, stripCSS } from "../helpers/minify";
+
+import readiumCSSWebPub from "@readium/css/css/dist/webPub/ReadiumCSS-webPub.css?raw";
+
+import cssSelectorGeneratorContent from "../dom/_readium_cssSelectorGenerator.js?raw";
+import webpubExecutionContent from "../dom/_readium_webpubExecution.js?raw";
+import onloadProxyContent from "../dom/_readium_executionCleanup.js?raw";
+
+/**
+ * Creates injectable rules for WebPub content documents
+ */
+export function createReadiumWebPubRules(): IInjectableRule[] {
+    // Core injectables that should be prepended
+    const prependInjectables: IInjectable[] = [
+        // CSS Selector Generator - always injected
+        {
+            id: "css-selector-generator",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(cssSelectorGeneratorContent)], { type: "text/javascript" })
+        },
+        // WebPub Execution - always injected (sets up event blocking to false)
+        {
+            id: "webpub-execution",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(webpubExecutionContent)], { type: "text/javascript" })
+        }
+    ];
+
+    // Core injectables that should be appended
+    const appendInjectables: IInjectable[] = [
+        // Onload Proxy - conditional (has executable scripts)
+        {
+            id: "onload-proxy",
+            as: "script",
+            target: "head",
+            blob: new Blob([stripJS(onloadProxyContent)], { type: "text/javascript" }),
+            condition: (doc: Document) => !!(doc.querySelector("script") || doc.querySelector("body[onload]:not(body[onload=''])"))
+        },
+        // Readium CSS WebPub - always injected
+        {
+            id: "readium-css-webpub",
+            as: "link",
+            target: "head",
+            blob: new Blob([stripCSS(readiumCSSWebPub)], { type: "text/css" }),
+            rel: "stylesheet"
+        }
+    ];
+
+    return [
+        {
+            resources: [/\.xhtml$/, /\.html$/],
+            prepend: prependInjectables,
+            append: appendInjectables
+        }
+    ];
+}

package/src/webpub/WebPubBlobBuilder.ts

@@ -1,74 +1,27 @@
 import { Link, Publication } from "@readium/shared";
-
-// Readium CSS imports
-// The "?inline" query is to prevent some bundlers from injecting these into the page (e.g. vite)
-// @ts-ignore
-import readiumCSSWebPub from "@readium/css/css/dist/webPub/ReadiumCSS-webPub.css?inline";
-
-// Utilities
-const blobify = (source: string, type: string) => URL.createObjectURL(new Blob([source], { type }));
-const stripJS = (source: string) => source.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n/g, "").replace(/\s+/g, " ");
-const stripCSS = (source: string) => source.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '').replace(/ {2,}/g, ' ')
-    // Fully resolve absolute local URLs created by bundlers since it's going into a blob
-    .replace(/url\((?!(https?:)?\/\/)("?)\/([^\)]+)/g, `url($2${window.location.origin}/$3`);
-const scriptify = (doc: Document, source: string) => {
-    const s = doc.createElement("script");
-    s.dataset.readium = "true";
-    s.src = source.startsWith("blob:") ? source : blobify(source, "text/javascript");
-    return s;
-}
-const styleify = (doc: Document, source: string) => {
-    const s = doc.createElement("link");
-    s.dataset.readium = "true";
-    s.rel = "stylesheet";
-    s.type = "text/css";
-    s.href = source.startsWith("blob:") ? source : blobify(source, "text/css");
-    return s;
-}
-
-type CacheFunction = () => string;
-const resourceBlobCache = new Map<string, string>();
-const cached = (key: string, cacher: CacheFunction) => {
-    if(resourceBlobCache.has(key)) return resourceBlobCache.get(key)!;
-    const value = cacher();
-    resourceBlobCache.set(key, value);
-    return value;
-};
-
-const cssSelectorGenerator = (doc: Document) => scriptify(doc, cached("css-selector-generator", () => blobify(
-    "!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define([],e):\"object\"==typeof exports?exports._readium_cssSelectorGenerator=e():t._readium_cssSelectorGenerator=e()}(self,(()=>(()=>{\"use strict\";var t,e,n={d:(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})}},o={};function r(t){return t&&t instanceof Element}function i(t=\"unknown problem\",...e){console.warn(`CssSelectorGenerator: ${t}`,...e)}n.r(o),n.d(o,{default:()=>z,getCssSelector:()=>U}),function(t){t.NONE=\"none\",t.DESCENDANT=\"descendant\",t.CHILD=\"child\"}(t||(t={})),function(t){t.id=\"id\",t.class=\"class\",t.tag=\"tag\",t.attribute=\"attribute\",t.nthchild=\"nthchild\",t.nthoftype=\"nthoftype\"}(e||(e={}));const c={selectors:[e.id,e.class,e.tag,e.attribute],includeTag:!1,whitelist:[],blacklist:[],combineWithinSelector:!0,combineBetweenSelectors:!0,root:null,maxCombinations:Number.POSITIVE_INFINITY,maxCandidates:Number.POSITIVE_INFINITY};function u(t){return t instanceof RegExp}function s(t){return[\"string\",\"function\"].includes(typeof t)||u(t)}function l(t){return Array.isArray(t)?t.filter(s):[]}function a(t){const e=[Node.DOCUMENT_NODE,Node.DOCUMENT_FRAGMENT_NODE,Node.ELEMENT_NODE];return function(t){return t instanceof Node}(t)&&e.includes(t.nodeType)}function f(t,e){if(a(t))return t.contains(e)||i(\"element root mismatch\",\"Provided root does not contain the element. This will most likely result in producing a fallback selector using element\'s real root node. If you plan to use the selector using provided root (e.g. `root.querySelector`), it will nto work as intended.\"),t;const n=e.getRootNode({composed:!1});return a(n)?(n!==document&&i(\"shadow root inferred\",\"You did not provide a root and the element is a child of Shadow DOM. This will produce a selector using ShadowRoot as a root. If you plan to use the selector using document as a root (e.g. `document.querySelector`), it will not work as intended.\"),n):e.ownerDocument.querySelector(\":root\")}function d(t){return\"number\"==typeof t?t:Number.POSITIVE_INFINITY}function m(t=[]){const[e=[],...n]=t;return 0===n.length?e:n.reduce(((t,e)=>t.filter((t=>e.includes(t)))),e)}function p(t){return[].concat(...t)}function h(t){const e=t.map((t=>{if(u(t))return e=>t.test(e);if(\"function\"==typeof t)return e=>{const n=t(e);return\"boolean\"!=typeof n?(i(\"pattern matcher function invalid\",\"Provided pattern matching function does not return boolean. It\'s result will be ignored.\",t),!1):n};if(\"string\"==typeof t){const e=new RegExp(\"^\"+t.replace(\/[|\\\\{}()[\\]^$+?.]\/g,\"\\\\$&\").replace(\/\\*\/g,\".+\")+\"$\");return t=>e.test(t)}return i(\"pattern matcher invalid\",\"Pattern matching only accepts strings, regular expressions and\/or functions. This item is invalid and will be ignored.\",t),()=>!1}));return t=>e.some((e=>e(t)))}function g(t,e,n){const o=Array.from(f(n,t[0]).querySelectorAll(e));return o.length===t.length&&t.every((t=>o.includes(t)))}function y(t,e){e=null!=e?e:function(t){return t.ownerDocument.querySelector(\":root\")}(t);const n=[];let o=t;for(;r(o)&&o!==e;)n.push(o),o=o.parentElement;return n}function b(t,e){return m(t.map((t=>y(t,e))))}const N={[t.NONE]:{type:t.NONE,value:\"\"},[t.DESCENDANT]:{type:t.DESCENDANT,value:\" > \"},[t.CHILD]:{type:t.CHILD,value:\" \"}},S=new RegExp([\"^$\",\"\\\\s\"].join(\"|\")),E=new RegExp([\"^$\"].join(\"|\")),w=[e.nthoftype,e.tag,e.id,e.class,e.attribute,e.nthchild],v=h([\"class\",\"id\",\"ng-*\"]);function C({nodeName:t}){return`[${t}]`}function O({nodeName:t,nodeValue:e}){return`[${t}=\'${L(e)}\']`}function T(t){const e=Array.from(t.attributes).filter((e=>function({nodeName:t},e){const n=e.tagName.toLowerCase();return!([\"input\",\"option\"].includes(n)&&\"value\"===t||v(t))}(e,t)));return[...e.map(C),...e.map(O)]}function I(t){return(t.getAttribute(\"class\")||\"\").trim().split(\/\\s+\/).filter((t=>!E.test(t))).map((t=>`.${L(t)}`))}function x(t){const e=t.getAttribute(\"id\")||\"\",n=`#${L(e)}`,o=t.getRootNode({composed:!1});return!S.test(e)&&g([t],n,o)?[n]:[]}function j(t){const e=t.parentNode;if(e){const n=Array.from(e.childNodes).filter(r).indexOf(t);if(n>-1)return[`:nth-child(${n+1})`]}return[]}function A(t){return[L(t.tagName.toLowerCase())]}function D(t){const e=[...new Set(p(t.map(A)))];return 0===e.length||e.length>1?[]:[e[0]]}function $(t){const e=D([t])[0],n=t.parentElement;if(n){const o=Array.from(n.children).filter((t=>t.tagName.toLowerCase()===e)),r=o.indexOf(t);if(r>-1)return[`${e}:nth-of-type(${r+1})`]}return[]}function R(t=[],{maxResults:e=Number.POSITIVE_INFINITY}={}){const n=[];let o=0,r=k(1);for(;r.length<=t.length&&o<e;)o+=1,n.push(r.map((e=>t[e]))),r=P(r,t.length-1);return n}function P(t=[],e=0){const n=t.length;if(0===n)return[];const o=[...t];o[n-1]+=1;for(let t=n-1;t>=0;t--)if(o[t]>e){if(0===t)return k(n+1);o[t-1]++,o[t]=o[t-1]+1}return o[n-1]>e?k(n+1):o}function k(t=1){return Array.from(Array(t).keys())}const _=\":\".charCodeAt(0).toString(16).toUpperCase(),M=\/[ !\"#$%&\'()\\[\\]{|}<>*+,.\/;=?@^`~\\\\]\/;function L(t=\"\"){var e,n;return null!==(n=null===(e=null===CSS||void 0===CSS?void 0:CSS.escape)||void 0===e?void 0:e.call(CSS,t))&&void 0!==n?n:function(t=\"\"){return t.split(\"\").map((t=>\":\"===t?`\\\\${_} `:M.test(t)?`\\\\${t}`:escape(t).replace(\/%\/g,\"\\\\\"))).join(\"\")}(t)}const q={tag:D,id:function(t){return 0===t.length||t.length>1?[]:x(t[0])},class:function(t){return m(t.map(I))},attribute:function(t){return m(t.map(T))},nthchild:function(t){return m(t.map(j))},nthoftype:function(t){return m(t.map($))}},F={tag:A,id:x,class:I,attribute:T,nthchild:j,nthoftype:$};function V(t){return t.includes(e.tag)||t.includes(e.nthoftype)?[...t]:[...t,e.tag]}function Y(t={}){const n=[...w];return t[e.tag]&&t[e.nthoftype]&&n.splice(n.indexOf(e.tag),1),n.map((e=>{return(o=t)[n=e]?o[n].join(\"\"):\"\";var n,o})).join(\"\")}function B(t,e,n=\"\",o){const r=function(t,e){return\"\"===e?t:function(t,e){return[...t.map((t=>e+\" \"+t)),...t.map((t=>e+\" > \"+t))]}(t,e)}(function(t,e,n){const o=function(t,e){const{blacklist:n,whitelist:o,combineWithinSelector:r,maxCombinations:i}=e,c=h(n),u=h(o);return function(t){const{selectors:e,includeTag:n}=t,o=[].concat(e);return n&&!o.includes(\"tag\")&&o.push(\"tag\"),o}(e).reduce(((e,n)=>{const o=function(t,e){var n;return(null!==(n=q[e])&&void 0!==n?n:()=>[])(t)}(t,n),s=function(t=[],e,n){return t.filter((t=>n(t)||!e(t)))}(o,c,u),l=function(t=[],e){return t.sort(((t,n)=>{const o=e(t),r=e(n);return o&&!r?-1:!o&&r?1:0}))}(s,u);return e[n]=r?R(l,{maxResults:i}):l.map((t=>[t])),e}),{})}(t,n),r=function(t,e){return function(t){const{selectors:e,combineBetweenSelectors:n,includeTag:o,maxCandidates:r}=t,i=n?R(e,{maxResults:r}):e.map((t=>[t]));return o?i.map(V):i}(e).map((e=>function(t,e){const n={};return t.forEach((t=>{const o=e[t];o.length>0&&(n[t]=o)})),function(t={}){let e=[];return Object.entries(t).forEach((([t,n])=>{e=n.flatMap((n=>0===e.length?[{[t]:n}]:e.map((e=>Object.assign(Object.assign({},e),{[t]:n})))))})),e}(n).map(Y)}(e,t))).filter((t=>t.length>0))}(o,n),i=p(r);return[...new Set(i)]}(t,o.root,o),n);for(const e of r)if(g(t,e,o.root))return e;return null}function G(t){return{value:t,include:!1}}function W({selectors:t,operator:n}){let o=[...w];t[e.tag]&&t[e.nthoftype]&&(o=o.filter((t=>t!==e.tag)));let r=\"\";return o.forEach((e=>{(t[e]||[]).forEach((({value:t,include:e})=>{e&&(r+=t)}))})),n.value+r}function H(n){return[\":root\",...y(n).reverse().map((n=>{const o=function(e,n,o=t.NONE){const r={};return n.forEach((t=>{Reflect.set(r,t,function(t,e){return F[e](t)}(e,t).map(G))})),{element:e,operator:N[o],selectors:r}}(n,[e.nthchild],t.DESCENDANT);return o.selectors.nthchild.forEach((t=>{t.include=!0})),o})).map(W)].join(\"\")}function U(t,n={}){const o=function(t){const e=(Array.isArray(t)?t:[t]).filter(r);return[...new Set(e)]}(t),i=function(t,n={}){const o=Object.assign(Object.assign({},c),n);return{selectors:(r=o.selectors,Array.isArray(r)?r.filter((t=>{return n=e,o=t,Object.values(n).includes(o);var n,o})):[]),whitelist:l(o.whitelist),blacklist:l(o.blacklist),root:f(o.root,t),combineWithinSelector:!!o.combineWithinSelector,combineBetweenSelectors:!!o.combineBetweenSelectors,includeTag:!!o.includeTag,maxCombinations:d(o.maxCombinations),maxCandidates:d(o.maxCandidates)};var r}(o[0],n);let u=\"\",s=i.root;function a(){return function(t,e,n=\"\",o){if(0===t.length)return null;const r=[t.length>1?t:[],...b(t,e).map((t=>[t]))];for(const t of r){const e=B(t,0,n,o);if(e)return{foundElements:t,selector:e}}return null}(o,s,u,i)}let m=a();for(;m;){const{foundElements:t,selector:e}=m;if(g(o,e,i.root))return e;s=t[0],u=e,m=a()}return o.length>1?o.map((t=>U(t,i))).join(\", \"):function(t){return t.map(H).join(\", \")}(o)}const z=U;return o})()));",
-    "text/javascript"
-)));
-
-const readiumPropertiesScript = `
-window._readium_blockedEvents = [];
-window._readium_blockEvents = false; // WebPub doesn't need event blocking
-window._readium_eventBlocker = null;
-`;
-
-const rBefore = (doc: Document) => scriptify(doc, cached("webpub-js-before", () => blobify(stripJS(readiumPropertiesScript), "text/javascript")));
-const rAfter = (doc: Document) => scriptify(doc, cached("webpub-js-after", () => blobify(stripJS(`
-if(window.onload) window.onload = new Proxy(window.onload, {
-    apply: function(target, receiver, args) {
-        if(!window._readium_blockEvents) {
-            Reflect.apply(target, receiver, args);
-            return;
-        }
-        _readium_blockedEvents.push([0, target, receiver, args]);
-    }
-});`), "text/javascript")));
+import { Injector } from "../injection/Injector";
 
 export class WebPubBlobBuilder {
     private readonly item: Link;
     private readonly burl: string;
     private readonly pub: Publication;
     private readonly cssProperties?: { [key: string]: string };
-
-    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: { [key: string]: string }) {
+    private readonly injector: Injector | null = null;
+
+    constructor(
+        pub: Publication,
+        baseURL: string,
+        item: Link,
+        options: {
+            cssProperties?: { [key: string]: string };
+            injector?: Injector | null;
+        }
+    ) {
         this.pub = pub;
         this.item = item;
         this.burl = item.toURL(baseURL) || "";
-        this.cssProperties = cssProperties;
+        this.cssProperties = options.cssProperties;
+        this.injector = options.injector ?? null;
     }
 
     public async build(): Promise<string> {
@@ -92,14 +45,12 @@ export class WebPubBlobBuilder {
             const details = perror.querySelector("div");
             throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
         }
-        return this.finalizeDOM(doc, this.burl, this.item.mediaType, txt, this.cssProperties);
-    }
 
-    private hasExecutable(doc: Document): boolean {
-        return (
-            !!doc.querySelector("script") ||
-            !!doc.querySelector("body[onload]:not(body[onload=''])")
-        );
+        // Apply resource injections if injection service is provided
+        if (this.injector) {
+            await this.injector.injectForDocument(doc, this.item);
+        }
+        return this.finalizeDOM(doc, this.burl, this.item.mediaType, txt, this.cssProperties);
     }
 
     private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
@@ -112,9 +63,6 @@ export class WebPubBlobBuilder {
     private finalizeDOM(doc: Document, base: string | undefined, mediaType: any, txt?: string, cssProperties?: { [key: string]: string }): string {
         if(!doc) return "";
 
-        // ReadiumCSS WebPub
-        doc.head.appendChild(styleify(doc, cached("ReadiumCSS-webpub", () => blobify(stripCSS(readiumCSSWebPub), "text/css"))));
-
         if (cssProperties) {
             this.setProperties(cssProperties, doc);
         }
@@ -130,11 +78,6 @@ export class WebPubBlobBuilder {
             doc.head.firstChild!.before(b);
         }
 
-        const hasExecutable = this.hasExecutable(doc);
-        if(hasExecutable) doc.head.firstChild!.before(rBefore(doc));
-        doc.head.firstChild!.before(cssSelectorGenerator(doc));
-        if(hasExecutable) doc.head.appendChild(rAfter(doc));
-
         // Serialize properly based on content type
         let serializedContent: string;