@addfox/utils 0.1.1-beta.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 addfox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @addfox/utils
+
+[中文](README-zh_CN.md) | English
+
+---
+
+Utilities for extension content scripts: **content UI** helpers to define and mount a root element (optionally in iframe or shadow DOM) into a page.
+
+- **Entry**: `@addfox/utils` — export `defineContentUI`, `mountContentUI`.
+
+## Content UI
+
+```ts
+import { defineContentUI, mountContentUI } from "@addfox/utils";
+
+const spec = defineContentUI({
+  tag: "div",
+  target: "body",
+  attr: { id: "my-root", class: "container" },
+  injectMode: "append",
+  wrapper: "shadow",
+});
+const root = mountContentUI(spec);
+root.appendChild(myContent);
+```
+
+- **tag**: Element tag name (`"div"`, `"section"`, etc.).
+- **target**: Mount target — CSS selector (for `document.querySelector`) or an `Element`.
+- **attr**: Attributes for the element (`id`, `class`, `style`, `data-*`, etc.).
+- **injectMode**: `"append"` (default) or `"prepend"`.
+- **wrapper**: `"none"` (default), `"shadow"` (attach shadow root), or `"iframe"`.
+
+If you need the `browser` API (e.g. `browser.runtime`), install [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) yourself and import from it.

package/dist/content-ui.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Content UI helpers for extension content scripts: define and mount a root element
+ * (optionally inside iframe or shadow DOM) into a page target.
+ *
+ * Usage:
+ *   import { defineShadowContentUI } from "@addfox/utils";
+ *   const mount = defineShadowContentUI({ name: "my-content-ui", target: "body" });
+ *   const root = mount();
+ *   root.appendChild(myContent);
+ */
+export type ContentUIWrapper = "iframe" | "shadow" | "none";
+export type ContentUIInjectMode = "append" | "prepend";
+export interface DefineContentUIBaseOptions {
+    /** Mount target: CSS selector (document.querySelector) or an Element */
+    target: string | Element;
+    /** Element attributes (id, class, style, data-*, etc.) */
+    attr?: Record<string, string>;
+    /**
+     * How to insert relative to target: append or prepend.
+     * When wrapper is used (iframe/shadow), the wrapper element is also inserted into the target according to this mode.
+     */
+    injectMode?: ContentUIInjectMode;
+}
+export interface DefineContentUIOptions extends DefineContentUIBaseOptions {
+    /** Element tag name, e.g. "div", "section" */
+    tag: string;
+}
+export interface DefineShadowContentUIOptions extends DefineContentUIBaseOptions {
+    /** Custom element name for shadow host, e.g. "my-content-ui". */
+    name: string;
+}
+export interface DefineIframeContentUIOptions extends DefineContentUIBaseOptions {
+}
+declare const CONTENT_UI_SPEC: unique symbol;
+export interface ContentUISpecBrand {
+    readonly [CONTENT_UI_SPEC]: true;
+}
+export type NativeContentUISpec = DefineContentUIOptions & {
+    wrapper: "none";
+};
+export type ShadowContentUISpec = DefineShadowContentUIOptions & {
+    wrapper: "shadow";
+};
+export type IframeContentUISpec = DefineIframeContentUIOptions & {
+    wrapper: "iframe";
+};
+export type ContentUISpec = (NativeContentUISpec | ShadowContentUISpec | IframeContentUISpec) & ContentUISpecBrand;
+export type ContentUIMount = () => Element | ShadowRoot;
+export declare function defineContentUI(options: DefineContentUIOptions): ContentUIMount;
+export declare function defineShadowContentUI(options: DefineShadowContentUIOptions): ContentUIMount;
+export declare function defineIframeContentUI(options: DefineIframeContentUIOptions): ContentUIMount;
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { defineContentUI, defineShadowContentUI, defineIframeContentUI, type ContentUIMount, type ContentUIWrapper, type ContentUIInjectMode, type DefineContentUIBaseOptions, type DefineContentUIOptions, type DefineShadowContentUIOptions, type DefineIframeContentUIOptions, } from "./content-ui";

package/dist/index.js

@@ -0,0 +1,195 @@
+const CONTENT_CSS_GLOBAL_KEY = "__ADDFOX_CONTENT_CSS_FILES__";
+const CONTENT_CSS_TEXTS_GLOBAL_KEY = "__ADDFOX_CONTENT_CSS_TEXTS__";
+const DEFAULT_SHADOW_COMPONENT_NAME = "addfox-content-ui";
+const contentCssTargets = new WeakSet();
+const CONTENT_UI_SPEC = Symbol.for("@addfox/utils/content-ui-spec");
+function createSpec(options) {
+    const spec = {
+        ...options,
+        injectMode: options.injectMode ?? "append",
+        [CONTENT_UI_SPEC]: true
+    };
+    return spec;
+}
+function defineContentUI(options) {
+    const spec = createSpec({
+        ...options,
+        wrapper: "none"
+    });
+    return ()=>mountContentUIInternal(spec);
+}
+function defineShadowContentUI(options) {
+    const spec = createSpec({
+        ...options,
+        wrapper: "shadow"
+    });
+    return ()=>mountContentUIInternal(spec);
+}
+function defineIframeContentUI(options) {
+    const spec = createSpec({
+        ...options,
+        wrapper: "iframe"
+    });
+    return ()=>mountContentUIInternal(spec);
+}
+function resolveTarget(target) {
+    if ("string" == typeof target) return document.querySelector(target);
+    return target;
+}
+function applyHostAttrs(el, attr) {
+    if (!attr) return;
+    for (const [key, value] of Object.entries(attr))if ("style" === key && "string" == typeof value) el.style.cssText = value;
+    else el.setAttribute(key, value);
+}
+function injectChild(container, child, mode) {
+    if ("prepend" === mode) container.insertBefore(child, container.firstChild);
+    else container.appendChild(child);
+}
+function isValidCustomElementName(name) {
+    if (!name.includes("-")) return false;
+    return /^[a-z][a-z0-9._-]*-[a-z0-9._-]*$/.test(name);
+}
+function normalizeShadowComponentName(name) {
+    const normalized = (name ?? DEFAULT_SHADOW_COMPONENT_NAME).trim().toLowerCase();
+    if (isValidCustomElementName(normalized)) return normalized;
+    return DEFAULT_SHADOW_COMPONENT_NAME;
+}
+function getCustomElementsRegistry() {
+    const g = globalThis;
+    const registry = g.customElements;
+    if (!registry || "object" != typeof registry) return null;
+    const maybeGet = registry.get;
+    const maybeDefine = registry.define;
+    if ("function" != typeof maybeGet || "function" != typeof maybeDefine) return null;
+    return registry;
+}
+function ensureCustomElementDefined(tag) {
+    const registry = getCustomElementsRegistry();
+    if (!registry) return false;
+    if (registry.get(tag)) return true;
+    class AddfoxShadowElement extends HTMLElement {
+    }
+    registry.define(tag, AddfoxShadowElement);
+    return true;
+}
+function getRuntimeUrl(path) {
+    const value = path.replace(/\\/g, "/");
+    const g = globalThis;
+    const chromeUrl = g.chrome?.runtime?.getURL;
+    if ("function" == typeof chromeUrl) return chromeUrl(value);
+    const browserUrl = g.browser?.runtime?.getURL;
+    if ("function" == typeof browserUrl) return browserUrl(value);
+    return value;
+}
+function readContentCssFilesFromGlobal() {
+    const g = globalThis;
+    const list = g[CONTENT_CSS_GLOBAL_KEY];
+    if (!Array.isArray(list)) return [];
+    return list.filter((item)=>"string" == typeof item && item.length > 0);
+}
+function readContentCssTextsFromGlobal() {
+    const g = globalThis;
+    const list = g[CONTENT_CSS_TEXTS_GLOBAL_KEY];
+    if (!Array.isArray(list)) return [];
+    return list.filter((item)=>"string" == typeof item && item.length > 0);
+}
+function injectCssIntoNode(targetNode, createStyleEl) {
+    if (contentCssTargets.has(targetNode)) return;
+    contentCssTargets.add(targetNode);
+    const cssTexts = readContentCssTextsFromGlobal();
+    if (cssTexts.length > 0) {
+        for (const cssText of cssTexts){
+            const style = createStyleEl();
+            style.textContent = cssText;
+        }
+        return;
+    }
+    const files = readContentCssFilesFromGlobal();
+    if (0 === files.length) return;
+    for (const rel of files){
+        const url = getRuntimeUrl(rel);
+        fetch(url).then((res)=>res.ok ? res.text() : "").then((cssText)=>{
+            if (!cssText) return;
+            const style = createStyleEl();
+            style.textContent = cssText;
+        }).catch(()=>{});
+    }
+}
+function injectCssIntoShadowHead(shadow, head) {
+    injectCssIntoNode(shadow, ()=>{
+        const style = document.createElement("style");
+        head.appendChild(style);
+        return style;
+    });
+}
+function ensureIframeHead(doc) {
+    if (doc.head) return doc.head;
+    const head = doc.createElement("head");
+    const html = doc.documentElement ?? doc.createElement("html");
+    if (!doc.documentElement) doc.appendChild(html);
+    html.insertBefore(head, html.firstChild);
+    return head;
+}
+function injectCssIntoIframeHead(doc) {
+    const head = ensureIframeHead(doc);
+    injectCssIntoNode(doc, ()=>{
+        const style = doc.createElement("style");
+        head.appendChild(style);
+        return style;
+    });
+}
+function mountNone(spec, container) {
+    const el = document.createElement(spec.tag);
+    applyHostAttrs(el, spec.attr);
+    injectChild(container, el, spec.injectMode ?? "append");
+    return el;
+}
+function mountShadow(spec, container) {
+    const hostTag = normalizeShadowComponentName(spec.name);
+    try {
+        ensureCustomElementDefined(hostTag);
+    } catch  {}
+    const host = document.createElement(hostTag);
+    applyHostAttrs(host, spec.attr);
+    const shadow = host.attachShadow({
+        mode: "open"
+    });
+    const html = document.createElement("html");
+    const head = document.createElement("head");
+    const body = document.createElement("body");
+    const mountNode = document.createElement("div");
+    mountNode.setAttribute("data-addfox-shadow-root", "true");
+    html.appendChild(head);
+    body.appendChild(mountNode);
+    html.appendChild(body);
+    shadow.appendChild(html);
+    injectCssIntoShadowHead(shadow, head);
+    injectChild(container, host, spec.injectMode ?? "append");
+    return mountNode;
+}
+function mountIframe(spec, container) {
+    const iframe = document.createElement("iframe");
+    applyHostAttrs(iframe, spec.attr);
+    injectChild(container, iframe, spec.injectMode ?? "append");
+    const doc = iframe.contentDocument;
+    if (!doc) throw new Error("content-ui: iframe contentDocument not available");
+    injectCssIntoIframeHead(doc);
+    const root = document.createElement("div");
+    doc.body.appendChild(root);
+    return root;
+}
+function mountContentUIInternal(spec) {
+    const container = resolveTarget(spec.target);
+    if (!container) throw new Error(`content-ui: target not found (${"string" == typeof spec.target ? spec.target : "Element"})`);
+    switch(spec.wrapper){
+        case "shadow":
+            return mountShadow(spec, container);
+        case "iframe":
+            return mountIframe(spec, container);
+        default:
+            return mountNone(spec, container);
+    }
+}
+export { defineContentUI, defineIframeContentUI, defineShadowContentUI };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/content-ui.ts"],"sourcesContent":["/**\r\n * Content UI helpers for extension content scripts: define and mount a root element\r\n * (optionally inside iframe or shadow DOM) into a page target.\r\n *\r\n * Usage:\r\n *   import { defineShadowContentUI } from \"@addfox/utils\";\r\n *   const mount = defineShadowContentUI({ name: \"my-content-ui\", target: \"body\" });\r\n *   const root = mount();\r\n *   root.appendChild(myContent);\r\n */\r\n\r\nexport type ContentUIWrapper = \"iframe\" | \"shadow\" | \"none\";\r\nexport type ContentUIInjectMode = \"append\" | \"prepend\";\r\nconst CONTENT_CSS_GLOBAL_KEY = \"__ADDFOX_CONTENT_CSS_FILES__\";\r\nconst CONTENT_CSS_TEXTS_GLOBAL_KEY = \"__ADDFOX_CONTENT_CSS_TEXTS__\";\r\nconst DEFAULT_SHADOW_COMPONENT_NAME = \"addfox-content-ui\";\r\nconst contentCssTargets = new WeakSet<Node>();\r\n\r\nexport interface DefineContentUIBaseOptions {\r\n  /** Mount target: CSS selector (document.querySelector) or an Element */\r\n  target: string | Element;\r\n  /** Element attributes (id, class, style, data-*, etc.) */\r\n  attr?: Record<string, string>;\r\n  /**\r\n   * How to insert relative to target: append or prepend.\r\n   * When wrapper is used (iframe/shadow), the wrapper element is also inserted into the target according to this mode.\r\n   */\r\n  injectMode?: ContentUIInjectMode;\r\n}\r\n\r\nexport interface DefineContentUIOptions extends DefineContentUIBaseOptions {\r\n  /** Element tag name, e.g. \"div\", \"section\" */\r\n  tag: string;\r\n}\r\n\r\nexport interface DefineShadowContentUIOptions extends DefineContentUIBaseOptions {\r\n  /** Custom element name for shadow host, e.g. \"my-content-ui\". */\r\n  name: string;\r\n}\r\n\r\nexport interface DefineIframeContentUIOptions extends DefineContentUIBaseOptions {\r\n}\r\n\r\nconst CONTENT_UI_SPEC = Symbol.for(\"@addfox/utils/content-ui-spec\");\r\n\r\nexport interface ContentUISpecBrand {\r\n  readonly [CONTENT_UI_SPEC]: true;\r\n}\r\n\r\nexport type NativeContentUISpec = DefineContentUIOptions & {\r\n  wrapper: \"none\";\r\n};\r\n\r\nexport type ShadowContentUISpec = DefineShadowContentUIOptions & {\r\n  wrapper: \"shadow\";\r\n};\r\n\r\nexport type IframeContentUISpec = DefineIframeContentUIOptions & {\r\n  wrapper: \"iframe\";\r\n};\r\n\r\nexport type ContentUISpec = (\r\n  | NativeContentUISpec\r\n  | ShadowContentUISpec\r\n  | IframeContentUISpec\r\n) & ContentUISpecBrand;\r\n\r\nexport type ContentUIMount = () => Element | ShadowRoot;\r\n\r\n/**\r\n * Defines a content UI spec. Use the return value with mountContentUI() when you want to mount.\r\n */\r\nfunction createSpec<T extends NativeContentUISpec | ShadowContentUISpec | IframeContentUISpec>(\r\n  options: T\r\n): ContentUISpec {\r\n  const spec = {\r\n    ...options,\r\n    injectMode: options.injectMode ?? \"append\" as ContentUIInjectMode,\r\n    [CONTENT_UI_SPEC]: true as const,\r\n  };\r\n  return spec as ContentUISpec;\r\n}\r\n\r\nexport function defineContentUI(\r\n  options: DefineContentUIOptions\r\n): ContentUIMount {\r\n  const spec = createSpec({\r\n    ...options,\r\n    wrapper: \"none\",\r\n  });\r\n  return () => mountContentUIInternal(spec);\r\n}\r\n\r\nexport function defineShadowContentUI(\r\n  options: DefineShadowContentUIOptions\r\n): ContentUIMount {\r\n  const spec = createSpec({\r\n    ...options,\r\n    wrapper: \"shadow\",\r\n  });\r\n  return () => mountContentUIInternal(spec);\r\n}\r\n\r\nexport function defineIframeContentUI(\r\n  options: DefineIframeContentUIOptions\r\n): ContentUIMount {\r\n  const spec = createSpec({\r\n    ...options,\r\n    wrapper: \"iframe\",\r\n  });\r\n  return () => mountContentUIInternal(spec);\r\n}\r\n\r\nfunction resolveTarget(target: string | Element): Element | null {\r\n  if (typeof target === \"string\") {\r\n    return document.querySelector(target);\r\n  }\r\n  return target;\r\n}\r\n\r\n/** Apply attrs to host element (the node inserted into target) in all modes. */\r\nfunction applyHostAttrs(\r\n  el: Element,\r\n  attr: Record<string, string> | undefined\r\n): void {\r\n  if (!attr) return;\r\n  for (const [key, value] of Object.entries(attr)) {\r\n    if (key === \"style\" && typeof value === \"string\") {\r\n      (el as HTMLElement).style.cssText = value;\r\n    } else {\r\n      el.setAttribute(key, value);\r\n    }\r\n  }\r\n}\r\n\r\nfunction injectChild(\r\n  container: Element,\r\n  child: Element,\r\n  mode: ContentUIInjectMode\r\n): void {\r\n  if (mode === \"prepend\") {\r\n    container.insertBefore(child, container.firstChild);\r\n  } else {\r\n    container.appendChild(child);\r\n  }\r\n}\r\n\r\nfunction isValidCustomElementName(name: string): boolean {\r\n  if (!name.includes(\"-\")) return false;\r\n  return /^[a-z][a-z0-9._-]*-[a-z0-9._-]*$/.test(name);\r\n}\r\n\r\nfunction normalizeShadowComponentName(name: string | undefined): string {\r\n  const normalized = (name ?? DEFAULT_SHADOW_COMPONENT_NAME).trim().toLowerCase();\r\n  if (isValidCustomElementName(normalized)) return normalized;\r\n  return DEFAULT_SHADOW_COMPONENT_NAME;\r\n}\r\n\r\nfunction getCustomElementsRegistry():\r\n  | { get: (name: string) => unknown; define: (name: string, ctor: CustomElementConstructor) => void }\r\n  | null {\r\n  const g = globalThis as { customElements?: unknown };\r\n  const registry = g.customElements;\r\n  if (!registry || typeof registry !== \"object\") return null;\r\n  const maybeGet = (registry as { get?: unknown }).get;\r\n  const maybeDefine = (registry as { define?: unknown }).define;\r\n  if (typeof maybeGet !== \"function\" || typeof maybeDefine !== \"function\") return null;\r\n  return registry as {\r\n    get: (name: string) => unknown;\r\n    define: (name: string, ctor: CustomElementConstructor) => void;\r\n  };\r\n}\r\n\r\nfunction ensureCustomElementDefined(tag: string): boolean {\r\n  const registry = getCustomElementsRegistry();\r\n  if (!registry) return false;\r\n  if (registry.get(tag)) return true;\r\n  class AddfoxShadowElement extends HTMLElement {}\r\n  registry.define(tag, AddfoxShadowElement);\r\n  return true;\r\n}\r\n\r\nfunction getRuntimeUrl(path: string): string {\r\n  const value = path.replace(/\\\\/g, \"/\");\r\n  const g = globalThis as {\r\n    chrome?: { runtime?: { getURL?: (p: string) => string } };\r\n    browser?: { runtime?: { getURL?: (p: string) => string } };\r\n  };\r\n  const chromeUrl = g.chrome?.runtime?.getURL;\r\n  if (typeof chromeUrl === \"function\") return chromeUrl(value);\r\n  const browserUrl = g.browser?.runtime?.getURL;\r\n  if (typeof browserUrl === \"function\") return browserUrl(value);\r\n  return value;\r\n}\r\n\r\nfunction readContentCssFilesFromGlobal(): string[] {\r\n  const g = globalThis as { [CONTENT_CSS_GLOBAL_KEY]?: unknown };\r\n  const list = g[CONTENT_CSS_GLOBAL_KEY];\r\n  if (!Array.isArray(list)) return [];\r\n  return list.filter((item): item is string => typeof item === \"string\" && item.length > 0);\r\n}\r\n\r\nfunction readContentCssTextsFromGlobal(): string[] {\r\n  const g = globalThis as { [CONTENT_CSS_TEXTS_GLOBAL_KEY]?: unknown };\r\n  const list = g[CONTENT_CSS_TEXTS_GLOBAL_KEY];\r\n  if (!Array.isArray(list)) return [];\r\n  return list.filter((item): item is string => typeof item === \"string\" && item.length > 0);\r\n}\r\n\r\nfunction injectCssIntoNode(\r\n  targetNode: Node,\r\n  createStyleEl: () => HTMLStyleElement\r\n): void {\r\n  if (contentCssTargets.has(targetNode)) return;\r\n  contentCssTargets.add(targetNode);\r\n  const cssTexts = readContentCssTextsFromGlobal();\r\n  if (cssTexts.length > 0) {\r\n    for (const cssText of cssTexts) {\r\n      const style = createStyleEl();\r\n      style.textContent = cssText;\r\n    }\r\n    return;\r\n  }\r\n\r\n  const files = readContentCssFilesFromGlobal();\r\n  if (files.length === 0) return;\r\n\r\n  for (const rel of files) {\r\n    const url = getRuntimeUrl(rel);\r\n    void fetch(url)\r\n      .then((res) => (res.ok ? res.text() : \"\"))\r\n      .then((cssText) => {\r\n        if (!cssText) return;\r\n        const style = createStyleEl();\r\n        style.textContent = cssText;\r\n      })\r\n      .catch(() => {\r\n        // ignore css fetch errors\r\n      });\r\n  }\r\n}\r\n\r\nfunction injectCssIntoShadowHead(\r\n  shadow: ShadowRoot,\r\n  head: HTMLElement\r\n): void {\r\n  injectCssIntoNode(shadow, () => {\r\n    const style = document.createElement(\"style\");\r\n    head.appendChild(style);\r\n    return style;\r\n  });\r\n}\r\n\r\nfunction ensureIframeHead(doc: Document): HTMLHeadElement {\r\n  if (doc.head) return doc.head;\r\n  const head = doc.createElement(\"head\");\r\n  const html = doc.documentElement ?? doc.createElement(\"html\");\r\n  if (!doc.documentElement) doc.appendChild(html);\r\n  html.insertBefore(head, html.firstChild);\r\n  return head;\r\n}\r\n\r\nfunction injectCssIntoIframeHead(doc: Document): void {\r\n  const head = ensureIframeHead(doc);\r\n  injectCssIntoNode(doc, () => {\r\n    const style = doc.createElement(\"style\");\r\n    head.appendChild(style);\r\n    return style;\r\n  });\r\n}\r\n\r\nfunction mountNone(spec: NativeContentUISpec, container: Element): Element {\r\n  const el = document.createElement(spec.tag);\r\n  applyHostAttrs(el, spec.attr);\r\n  injectChild(container, el, spec.injectMode ?? \"append\");\r\n  return el;\r\n}\r\n\r\nfunction mountShadow(spec: ShadowContentUISpec, container: Element): HTMLElement {\r\n  const hostTag = normalizeShadowComponentName(spec.name);\r\n  // Always create host with custom tag name.\r\n  // Try to define it when registry is available, but never fallback to div.\r\n  try {\r\n    ensureCustomElementDefined(hostTag);\r\n  } catch {\r\n    // ignore define errors; host tag still keeps the custom element name\r\n  }\r\n  const host = document.createElement(hostTag);\r\n  applyHostAttrs(host, spec.attr);\r\n  const shadow = host.attachShadow({ mode: \"open\" });\r\n  const html = document.createElement(\"html\");\r\n  const head = document.createElement(\"head\");\r\n  const body = document.createElement(\"body\");\r\n  const mountNode = document.createElement(\"div\");\r\n  mountNode.setAttribute(\"data-addfox-shadow-root\", \"true\");\r\n  html.appendChild(head);\r\n  body.appendChild(mountNode);\r\n  html.appendChild(body);\r\n  shadow.appendChild(html);\r\n  injectCssIntoShadowHead(shadow, head);\r\n  // wrapper (host) is inserted into target according to injectMode\r\n  injectChild(container, host, spec.injectMode ?? \"append\");\r\n  return mountNode;\r\n}\r\n\r\nfunction mountIframe(spec: IframeContentUISpec, container: Element): HTMLElement {\r\n  const iframe = document.createElement(\"iframe\");\r\n  applyHostAttrs(iframe, spec.attr);\r\n  // wrapper (iframe) is inserted into target according to injectMode\r\n  injectChild(container, iframe, spec.injectMode ?? \"append\");\r\n  const doc = iframe.contentDocument;\r\n  if (!doc) throw new Error(\"content-ui: iframe contentDocument not available\");\r\n  injectCssIntoIframeHead(doc);\r\n  const root = document.createElement(\"div\");\r\n  doc.body.appendChild(root);\r\n  return root;\r\n}\r\n\r\nfunction mountContentUIInternal(spec: ContentUISpec): Element | ShadowRoot {\r\n  const container = resolveTarget(spec.target);\r\n  if (!container) {\r\n    throw new Error(\r\n      `content-ui: target not found (${\r\n        typeof spec.target === \"string\" ? spec.target : \"Element\"\r\n      })`\r\n    );\r\n  }\r\n  switch (spec.wrapper) {\r\n    case \"shadow\":\r\n      return mountShadow(spec as ShadowContentUISpec, container);\r\n    case \"iframe\":\r\n      return mountIframe(spec as IframeContentUISpec, container);\r\n    default:\r\n      return mountNone(spec as NativeContentUISpec, container);\r\n  }\r\n}\r\n"],"names":["CONTENT_CSS_GLOBAL_KEY","CONTENT_CSS_TEXTS_GLOBAL_KEY","DEFAULT_SHADOW_COMPONENT_NAME","contentCssTargets","WeakSet","CONTENT_UI_SPEC","Symbol","createSpec","options","spec","defineContentUI","mountContentUIInternal","defineShadowContentUI","defineIframeContentUI","resolveTarget","target","document","applyHostAttrs","el","attr","key","value","Object","injectChild","container","child","mode","isValidCustomElementName","name","normalizeShadowComponentName","normalized","getCustomElementsRegistry","g","globalThis","registry","maybeGet","maybeDefine","ensureCustomElementDefined","tag","AddfoxShadowElement","HTMLElement","getRuntimeUrl","path","chromeUrl","browserUrl","readContentCssFilesFromGlobal","list","Array","item","readContentCssTextsFromGlobal","injectCssIntoNode","targetNode","createStyleEl","cssTexts","cssText","style","files","rel","url","fetch","res","injectCssIntoShadowHead","shadow","head","ensureIframeHead","doc","html","injectCssIntoIframeHead","mountNone","mountShadow","hostTag","host","body","mountNode","mountIframe","iframe","Error","root"],"mappings":"AAaA,MAAMA,yBAAyB;AAC/B,MAAMC,+BAA+B;AACrC,MAAMC,gCAAgC;AACtC,MAAMC,oBAAoB,IAAIC;AA2B9B,MAAMC,kBAAkBC,OAAO,GAAG,CAAC;AA6BnC,SAASC,WACPC,OAAU;IAEV,MAAMC,OAAO;QACX,GAAGD,OAAO;QACV,YAAYA,QAAQ,UAAU,IAAI;QAClC,CAACH,gBAAgB,EAAE;IACrB;IACA,OAAOI;AACT;AAEO,SAASC,gBACdF,OAA+B;IAE/B,MAAMC,OAAOF,WAAW;QACtB,GAAGC,OAAO;QACV,SAAS;IACX;IACA,OAAO,IAAMG,uBAAuBF;AACtC;AAEO,SAASG,sBACdJ,OAAqC;IAErC,MAAMC,OAAOF,WAAW;QACtB,GAAGC,OAAO;QACV,SAAS;IACX;IACA,OAAO,IAAMG,uBAAuBF;AACtC;AAEO,SAASI,sBACdL,OAAqC;IAErC,MAAMC,OAAOF,WAAW;QACtB,GAAGC,OAAO;QACV,SAAS;IACX;IACA,OAAO,IAAMG,uBAAuBF;AACtC;AAEA,SAASK,cAAcC,MAAwB;IAC7C,IAAI,AAAkB,YAAlB,OAAOA,QACT,OAAOC,SAAS,aAAa,CAACD;IAEhC,OAAOA;AACT;AAGA,SAASE,eACPC,EAAW,EACXC,IAAwC;IAExC,IAAI,CAACA,MAAM;IACX,KAAK,MAAM,CAACC,KAAKC,MAAM,IAAIC,OAAO,OAAO,CAACH,MACxC,IAAIC,AAAQ,YAARA,OAAmB,AAAiB,YAAjB,OAAOC,OAC3BH,GAAmB,KAAK,CAAC,OAAO,GAAGG;SAEpCH,GAAG,YAAY,CAACE,KAAKC;AAG3B;AAEA,SAASE,YACPC,SAAkB,EAClBC,KAAc,EACdC,IAAyB;IAEzB,IAAIA,AAAS,cAATA,MACFF,UAAU,YAAY,CAACC,OAAOD,UAAU,UAAU;SAElDA,UAAU,WAAW,CAACC;AAE1B;AAEA,SAASE,yBAAyBC,IAAY;IAC5C,IAAI,CAACA,KAAK,QAAQ,CAAC,MAAM,OAAO;IAChC,OAAO,mCAAmC,IAAI,CAACA;AACjD;AAEA,SAASC,6BAA6BD,IAAwB;IAC5D,MAAME,aAAcF,AAAAA,CAAAA,QAAQ1B,6BAA4B,EAAG,IAAI,GAAG,WAAW;IAC7E,IAAIyB,yBAAyBG,aAAa,OAAOA;IACjD,OAAO5B;AACT;AAEA,SAAS6B;IAGP,MAAMC,IAAIC;IACV,MAAMC,WAAWF,EAAE,cAAc;IACjC,IAAI,CAACE,YAAY,AAAoB,YAApB,OAAOA,UAAuB,OAAO;IACtD,MAAMC,WAAYD,SAA+B,GAAG;IACpD,MAAME,cAAeF,SAAkC,MAAM;IAC7D,IAAI,AAAoB,cAApB,OAAOC,YAA2B,AAAuB,cAAvB,OAAOC,aAA4B,OAAO;IAChF,OAAOF;AAIT;AAEA,SAASG,2BAA2BC,GAAW;IAC7C,MAAMJ,WAAWH;IACjB,IAAI,CAACG,UAAU,OAAO;IACtB,IAAIA,SAAS,GAAG,CAACI,MAAM,OAAO;IAC9B,MAAMC,4BAA4BC;IAAa;IAC/CN,SAAS,MAAM,CAACI,KAAKC;IACrB,OAAO;AACT;AAEA,SAASE,cAAcC,IAAY;IACjC,MAAMrB,QAAQqB,KAAK,OAAO,CAAC,OAAO;IAClC,MAAMV,IAAIC;IAIV,MAAMU,YAAYX,EAAE,MAAM,EAAE,SAAS;IACrC,IAAI,AAAqB,cAArB,OAAOW,WAA0B,OAAOA,UAAUtB;IACtD,MAAMuB,aAAaZ,EAAE,OAAO,EAAE,SAAS;IACvC,IAAI,AAAsB,cAAtB,OAAOY,YAA2B,OAAOA,WAAWvB;IACxD,OAAOA;AACT;AAEA,SAASwB;IACP,MAAMb,IAAIC;IACV,MAAMa,OAAOd,CAAC,CAAChC,uBAAuB;IACtC,IAAI,CAAC+C,MAAM,OAAO,CAACD,OAAO,OAAO,EAAE;IACnC,OAAOA,KAAK,MAAM,CAAC,CAACE,OAAyB,AAAgB,YAAhB,OAAOA,QAAqBA,KAAK,MAAM,GAAG;AACzF;AAEA,SAASC;IACP,MAAMjB,IAAIC;IACV,MAAMa,OAAOd,CAAC,CAAC/B,6BAA6B;IAC5C,IAAI,CAAC8C,MAAM,OAAO,CAACD,OAAO,OAAO,EAAE;IACnC,OAAOA,KAAK,MAAM,CAAC,CAACE,OAAyB,AAAgB,YAAhB,OAAOA,QAAqBA,KAAK,MAAM,GAAG;AACzF;AAEA,SAASE,kBACPC,UAAgB,EAChBC,aAAqC;IAErC,IAAIjD,kBAAkB,GAAG,CAACgD,aAAa;IACvChD,kBAAkB,GAAG,CAACgD;IACtB,MAAME,WAAWJ;IACjB,IAAII,SAAS,MAAM,GAAG,GAAG;QACvB,KAAK,MAAMC,WAAWD,SAAU;YAC9B,MAAME,QAAQH;YACdG,MAAM,WAAW,GAAGD;QACtB;QACA;IACF;IAEA,MAAME,QAAQX;IACd,IAAIW,AAAiB,MAAjBA,MAAM,MAAM,EAAQ;IAExB,KAAK,MAAMC,OAAOD,MAAO;QACvB,MAAME,MAAMjB,cAAcgB;QACrBE,MAAMD,KACR,IAAI,CAAC,CAACE,MAASA,IAAI,EAAE,GAAGA,IAAI,IAAI,KAAK,IACrC,IAAI,CAAC,CAACN;YACL,IAAI,CAACA,SAAS;YACd,MAAMC,QAAQH;YACdG,MAAM,WAAW,GAAGD;QACtB,GACC,KAAK,CAAC,KAEP;IACJ;AACF;AAEA,SAASO,wBACPC,MAAkB,EAClBC,IAAiB;IAEjBb,kBAAkBY,QAAQ;QACxB,MAAMP,QAAQvC,SAAS,aAAa,CAAC;QACrC+C,KAAK,WAAW,CAACR;QACjB,OAAOA;IACT;AACF;AAEA,SAASS,iBAAiBC,GAAa;IACrC,IAAIA,IAAI,IAAI,EAAE,OAAOA,IAAI,IAAI;IAC7B,MAAMF,OAAOE,IAAI,aAAa,CAAC;IAC/B,MAAMC,OAAOD,IAAI,eAAe,IAAIA,IAAI,aAAa,CAAC;IACtD,IAAI,CAACA,IAAI,eAAe,EAAEA,IAAI,WAAW,CAACC;IAC1CA,KAAK,YAAY,CAACH,MAAMG,KAAK,UAAU;IACvC,OAAOH;AACT;AAEA,SAASI,wBAAwBF,GAAa;IAC5C,MAAMF,OAAOC,iBAAiBC;IAC9Bf,kBAAkBe,KAAK;QACrB,MAAMV,QAAQU,IAAI,aAAa,CAAC;QAChCF,KAAK,WAAW,CAACR;QACjB,OAAOA;IACT;AACF;AAEA,SAASa,UAAU3D,IAAyB,EAAEe,SAAkB;IAC9D,MAAMN,KAAKF,SAAS,aAAa,CAACP,KAAK,GAAG;IAC1CQ,eAAeC,IAAIT,KAAK,IAAI;IAC5Bc,YAAYC,WAAWN,IAAIT,KAAK,UAAU,IAAI;IAC9C,OAAOS;AACT;AAEA,SAASmD,YAAY5D,IAAyB,EAAEe,SAAkB;IAChE,MAAM8C,UAAUzC,6BAA6BpB,KAAK,IAAI;IAGtD,IAAI;QACF4B,2BAA2BiC;IAC7B,EAAE,OAAM,CAER;IACA,MAAMC,OAAOvD,SAAS,aAAa,CAACsD;IACpCrD,eAAesD,MAAM9D,KAAK,IAAI;IAC9B,MAAMqD,SAASS,KAAK,YAAY,CAAC;QAAE,MAAM;IAAO;IAChD,MAAML,OAAOlD,SAAS,aAAa,CAAC;IACpC,MAAM+C,OAAO/C,SAAS,aAAa,CAAC;IACpC,MAAMwD,OAAOxD,SAAS,aAAa,CAAC;IACpC,MAAMyD,YAAYzD,SAAS,aAAa,CAAC;IACzCyD,UAAU,YAAY,CAAC,2BAA2B;IAClDP,KAAK,WAAW,CAACH;IACjBS,KAAK,WAAW,CAACC;IACjBP,KAAK,WAAW,CAACM;IACjBV,OAAO,WAAW,CAACI;IACnBL,wBAAwBC,QAAQC;IAEhCxC,YAAYC,WAAW+C,MAAM9D,KAAK,UAAU,IAAI;IAChD,OAAOgE;AACT;AAEA,SAASC,YAAYjE,IAAyB,EAAEe,SAAkB;IAChE,MAAMmD,SAAS3D,SAAS,aAAa,CAAC;IACtCC,eAAe0D,QAAQlE,KAAK,IAAI;IAEhCc,YAAYC,WAAWmD,QAAQlE,KAAK,UAAU,IAAI;IAClD,MAAMwD,MAAMU,OAAO,eAAe;IAClC,IAAI,CAACV,KAAK,MAAM,IAAIW,MAAM;IAC1BT,wBAAwBF;IACxB,MAAMY,OAAO7D,SAAS,aAAa,CAAC;IACpCiD,IAAI,IAAI,CAAC,WAAW,CAACY;IACrB,OAAOA;AACT;AAEA,SAASlE,uBAAuBF,IAAmB;IACjD,MAAMe,YAAYV,cAAcL,KAAK,MAAM;IAC3C,IAAI,CAACe,WACH,MAAM,IAAIoD,MACR,CAAC,8BAA8B,EAC7B,AAAuB,YAAvB,OAAOnE,KAAK,MAAM,GAAgBA,KAAK,MAAM,GAAG,UACjD,CAAC,CAAC;IAGP,OAAQA,KAAK,OAAO;QAClB,KAAK;YACH,OAAO4D,YAAY5D,MAA6Be;QAClD,KAAK;YACH,OAAOkD,YAAYjE,MAA6Be;QAClD;YACE,OAAO4C,UAAU3D,MAA6Be;IAClD;AACF"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@addfox/utils",
+  "version": "0.1.1-beta.2",
+  "description": "Extension utils: content UI (defineContentUI / mountContentUI) for content scripts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@rslib/core": "^0.20.0",
+    "@rstest/core": "^0.9.2",
+    "@rstest/coverage-istanbul": "^0.3.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "rstest run",
+    "test:coverage": "rstest run --coverage"
+  }
+}