browser-extension-utils 0.2.1 → 0.3.1

package/README.md

@@ -19,6 +19,4 @@ Copyright (c) 2023 [Pipecraft](https://www.pipecraft.net). Licensed under the [M
 ## >\_
 
 [![Pipecraft](https://img.shields.io/badge/site-pipecraft-brightgreen)](https://www.pipecraft.net)
-[![UTags](https://img.shields.io/badge/site-UTags-brightgreen)](https://utags.pipecraft.net)
-[![DTO](https://img.shields.io/badge/site-DTO-brightgreen)](https://dto.pipecraft.net)
-[![BestXTools](https://img.shields.io/badge/site-bestxtools-brightgreen)](https://www.bestxtools.com)
+[![UTags](https://img.shields.io/badge/site-UTags-brightgreen)](https://utags.link)

package/lib/add-element.ts

@@ -0,0 +1,38 @@
+import { getRootElement } from './dom-utils'
+import { createElement } from './create-element'
+import { setAttributes } from './set-attributes'
+
+export const addElement = (
+  parentNode: HTMLElement | string | null | undefined,
+  tagName: string | HTMLElement,
+  attributes?: Record<string, unknown>
+): HTMLElement | undefined => {
+  if (typeof parentNode === 'string') {
+    return addElement(
+      null,
+      parentNode,
+      tagName as unknown as Record<string, unknown>
+    )
+  }
+
+  if (!tagName) {
+    return undefined
+  }
+
+  if (!parentNode) {
+    parentNode = /^(script|link|style|meta)$/.test(tagName as string)
+      ? getRootElement(1)
+      : getRootElement(2)
+  }
+
+  if (typeof tagName === 'string') {
+    const element = createElement(tagName, attributes)
+    parentNode.append(element)
+    return element
+  }
+
+  // tagName: HTMLElement
+  setAttributes(tagName, attributes)
+  parentNode.append(tagName)
+  return tagName
+}

package/lib/create-element.ts

@@ -0,0 +1,11 @@
+import { doc } from './dom-utils'
+import { setAttributes } from './set-attributes'
+
+export const createElement = (
+  tagName: string,
+  attributes?: Record<string, unknown>
+): HTMLElement =>
+  setAttributes(
+    doc.createElement(tagName),
+    attributes
+  ) as unknown as HTMLElement

package/lib/dom-utils.ts

@@ -0,0 +1,232 @@
+export const doc = document
+
+export const win = globalThis
+
+// Polyfill for String.prototype.replaceAll()
+if (typeof String.prototype.replaceAll !== 'function') {
+  // eslint-disable-next-line no-extend-native
+  String.prototype.replaceAll = String.prototype.replace
+}
+
+// Polyfill for Object.hasOwn()
+if (typeof Object.hasOwn !== 'function') {
+  Object.hasOwn = (instance, prop) =>
+    Object.prototype.hasOwnProperty.call(instance, prop)
+}
+
+export const toCamelCase = function (text: string): string {
+  return text.replaceAll(
+    /^([A-Z])|[\s-_](\w)/g,
+    (_match: string, p1: string, p2: string) => {
+      if (p2) return p2.toUpperCase()
+      return p1.toLowerCase()
+    }
+  )
+}
+
+export const addEventListener = (
+  element: HTMLElement | Document | EventTarget | null | undefined,
+  type: string | Record<string, any>,
+  listener?: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions
+): void => {
+  if (!element) {
+    return
+  }
+
+  if (typeof type === 'object') {
+    for (const type1 in type) {
+      if (Object.hasOwn(type, type1)) {
+        element.addEventListener(
+          type1,
+          (type as any)[type1] as EventListenerOrEventListenerObject
+        )
+      }
+    }
+  } else if (typeof type === 'string' && typeof listener === 'function') {
+    element.addEventListener(type, listener, options)
+  }
+}
+
+export const removeEventListener = (
+  element: HTMLElement | Document | EventTarget | null | undefined,
+  type: string | Record<string, any>,
+  listener?: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions
+): void => {
+  if (!element) {
+    return
+  }
+
+  if (typeof type === 'object') {
+    for (const type1 in type) {
+      if (Object.hasOwn(type, type1)) {
+        element.removeEventListener(
+          type1,
+          (type as any)[type1] as EventListenerOrEventListenerObject
+        )
+      }
+    }
+  } else if (typeof type === 'string' && typeof listener === 'function') {
+    element.removeEventListener(type, listener, options)
+  }
+}
+
+export const getAttribute = (
+  element: HTMLElement | null | undefined,
+  name: string
+): string | undefined =>
+  element && element.getAttribute
+    ? element.getAttribute(name) || undefined
+    : undefined
+
+export const setAttribute = (
+  element: HTMLElement | null | undefined,
+  name: string,
+  value: string
+): void => {
+  if (element && element.setAttribute) {
+    element.setAttribute(name, value)
+  }
+}
+
+export const removeAttribute = (
+  element: HTMLElement | null | undefined,
+  name: string
+): void => {
+  if (element && element.removeAttribute) {
+    element.removeAttribute(name)
+  }
+}
+
+export const addAttribute = (
+  element: HTMLElement | null | undefined,
+  name: string,
+  value: string
+): void => {
+  const orgValue = getAttribute(element, name)
+  if (!orgValue) {
+    setAttribute(element, name, value)
+  } else if (!orgValue.includes(value)) {
+    setAttribute(element, name, orgValue + ' ' + value)
+  }
+}
+
+export const addClass = (
+  element: HTMLElement | null | undefined,
+  className: string
+): void => {
+  if (!element || !element.classList) {
+    return
+  }
+
+  element.classList.add(className)
+}
+
+export const removeClass = (
+  element: HTMLElement | null | undefined,
+  className: string
+): void => {
+  if (!element || !element.classList) {
+    return
+  }
+
+  element.classList.remove(className)
+}
+
+export const hasClass = (
+  element: HTMLElement | null | undefined,
+  className: string
+): boolean => {
+  if (!element || !element.classList) {
+    return false
+  }
+
+  return element.classList.contains(className)
+}
+
+export type SetStyle = (
+  element: HTMLElement | null | undefined,
+  style: string | Record<string, unknown>,
+  overwrite?: boolean
+) => void
+
+export const setStyle = (
+  element: HTMLElement | null | undefined,
+  values: string | Record<string, any>,
+  overwrite?: boolean
+): void => {
+  if (!element) {
+    return
+  }
+
+  // element.setAttribute("style", value) -> Fail when violates CSP
+  const style = element.style
+
+  if (typeof values === 'string') {
+    style.cssText = overwrite ? values : style.cssText + ';' + values
+    return
+  }
+
+  if (overwrite) {
+    style.cssText = ''
+  }
+
+  for (const key in values) {
+    if (Object.hasOwn(values, key)) {
+      ;(style as any)[key] = String(values[key]).replace('!important', '')
+    }
+  }
+}
+
+export const noStyleSpace = (text: string): string =>
+  text.replaceAll(/\s*([^\w-+%!])\s*/gm, '$1')
+
+export const toStyleMap = (styleText: string): Record<string, string> => {
+  styleText = noStyleSpace(styleText)
+  const map: Record<string, string> = {}
+  const keyValues = styleText.split('}')
+  for (const keyValue of keyValues) {
+    const kv = keyValue.split('{')
+    if (kv[0] && kv[1]) {
+      map[kv[0]] = kv[1]
+    }
+  }
+
+  return map
+}
+
+export const createSetStyle = (styleText: string): SetStyle => {
+  const styleMap = toStyleMap(styleText)
+  return (element, value, overwrite) => {
+    if (typeof value === 'object') {
+      setStyle(element, value, overwrite)
+    } else if (typeof value === 'string') {
+      const key = noStyleSpace(value)
+      const value2 = styleMap[key]
+      setStyle(element, value2 || value, overwrite)
+    }
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const tt = (globalThis as any).trustedTypes
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const escapeHTMLPolicy =
+  tt !== undefined && typeof tt.createPolicy === 'function'
+    ? // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      tt.createPolicy('beuEscapePolicy', {
+        createHTML: (string: string) => string,
+      })
+    : undefined
+
+export const createHTML = (html: string): string =>
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  escapeHTMLPolicy ? (escapeHTMLPolicy.createHTML(html) as string) : html
+
+export const getRootElement = (type?: number): HTMLElement =>
+  type === 1
+    ? doc.head || doc.body || doc.documentElement
+    : type === 2
+      ? doc.body || doc.documentElement
+      : doc.documentElement

package/lib/global.d.ts

@@ -0,0 +1,154 @@
+declare module 'css:*' {
+  const cssText: string
+  export default cssText
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+declare const GM_info: {
+  scriptHandler: string
+}
+
+declare function GM_addValueChangeListener(
+  key: string,
+  cb: (key: string, oldValue: any, newValue: any, remote: boolean) => void
+): number
+
+declare function GM_registerMenuCommand(
+  caption: string,
+  onClick: () => void,
+  options_or_accessKey?:
+    | string
+    | {
+        id?: string | number
+        accessKey?: string
+        autoClose?: boolean
+        // Tampermonkey-specific
+        title?: string
+        // ScriptCat-specific
+        nested?: boolean
+        // ScriptCat-specific
+        individual?: boolean
+      }
+): number
+
+declare function GM_unregisterMenuCommand(menuId: number): void
+
+declare const GM: {
+  info: {
+    scriptHandler: string
+    version: string
+  }
+  getValue<T = unknown>(key: string, defaultValue: T): Promise<T>
+  setValue(key: string, value: unknown): Promise<void>
+  deleteValue(key: string): Promise<void>
+  addValueChangeListener(
+    key: string,
+    cb: (key: string, oldValue: any, newValue: any, remote: boolean) => void
+  ): Promise<number>
+  removeValueChangeListener(id: number): Promise<void>
+  xmlHttpRequest(options: {
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE'
+    url: string
+    headers?: Record<string, string>
+    data?: string | FormData | ArrayBuffer
+    responseType?: 'text' | 'json' | 'blob'
+    onload?: (response: {
+      status: number
+      responseText?: string
+      response?: any
+      responseHeaders?: string
+    }) => void
+    onerror?: (error: any) => void
+  }): Promise<void>
+  setClipboard(text: string): Promise<void>
+  addStyle(css: string): Promise<HTMLStyleElement>
+  addElement(
+    tag: string,
+    attributes?: Record<string, string>
+  ): Promise<HTMLElement>
+  addElement(
+    parentNode: Element,
+    tag: string,
+    attributes?: Record<string, string>
+  ): Promise<HTMLElement>
+  registerMenuCommand(
+    caption: string,
+    onClick: () => void,
+    options_or_accessKey?:
+      | string
+      | {
+          id?: string | number
+          accessKey?: string
+          autoClose?: boolean
+          // Tampermonkey-specific
+          title?: string
+          // ScriptCat-specific
+          nested?: boolean
+          // ScriptCat-specific
+          individual?: boolean
+        }
+  ): Promise<number>
+  unregisterMenuCommand(menuId: number): Promise<void>
+  download(options: {
+    url: string
+    name: string
+    onload?: () => void
+  }): Promise<void>
+  openInTab(
+    url: string,
+    options?: { active?: boolean; insert?: boolean }
+  ): Promise<void>
+  notification(options: {
+    text: string
+    title?: string
+    image?: string
+    onclick?: () => void
+  }): Promise<void>
+}
+
+declare function GM_getValue<T = unknown>(key: string, defaultValue: T): any
+declare function GM_setValue(key: string, value: any): void
+declare function GM_deleteValue(key: string): void
+declare function GM_addStyle(css: string): HTMLStyleElement
+declare function GM_addElement(
+  tag: string,
+  attributes?: Record<string, string>
+): HTMLElement
+declare function GM_addElement(
+  parentNode: Element,
+  tag: string,
+  attributes?: Record<string, string>
+): HTMLElement
+declare function GM_openInTab(
+  url: string,
+  options?: { active?: boolean; insert?: boolean }
+): void
+declare function GM_removeValueChangeListener(id: number): void
+declare function GM_download(options: {
+  url: string
+  name: string
+  onload?: () => void
+}): void
+declare function GM_notification(options: {
+  text: string
+  title?: string
+  image?: string
+  onclick?: () => void
+}): void
+
+declare function GM_xmlhttpRequest(options: {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  url: string
+  headers?: Record<string, string>
+  data?: string | FormData | ArrayBuffer
+  responseType?: 'text' | 'json' | 'blob'
+  onload?: (response: {
+    status: number
+    responseText?: string
+    response?: any
+    responseHeaders?: string
+  }) => void
+  onerror?: (error: any) => void
+}): void
+
+declare function GM_setClipboard(text: string): void