browser-extension-settings 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Pipecraft
+
+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,24 @@
+# browser-extension-settings
+
+Settings module for developing browser extensions and userscripts
+
+## Usage
+
+```bash
+npm i browser-extension-settings
+# or
+pnpm add browser-extension-settings
+# or
+yarn add browser-extension-settings
+```
+
+## License
+
+Copyright (c) 2023 [Pipecraft](https://www.pipecraft.net). Licensed under the [MIT License](LICENSE).
+
+## >\_
+
+[![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)

package/lib/index.d.ts

@@ -0,0 +1,139 @@
+export const doc: Document
+
+export const win: Window
+
+export function uniq(array: any[]): any[]
+
+export function toCamelCase(text: string): string
+
+export function $(
+  selectors: string,
+  element?: HTMLElement | Document
+): HTMLElement | undefined
+
+export function querySelector(
+  selectors: string,
+  element?: HTMLElement | Document
+): HTMLElement | undefined
+
+export function $$(
+  selectors: string,
+  element?: HTMLElement | Document
+): HTMLElement[]
+
+export function querySelectorAll(
+  selectors: string,
+  element?: HTMLElement | Document
+): HTMLElement[]
+
+export function createElement(
+  tagName: string,
+  attributes?: Record<string, unknown>
+): HTMLElement
+
+export function addElement(
+  tagName: string,
+  attributes?: Record<string, unknown>
+): HTMLElement
+
+export function addElement(
+  parentNode: HTMLElement,
+  tagName: string | HTMLElement,
+  attributes?: Record<string, unknown>
+): HTMLElement
+
+export function addStyle(styleText: string): HTMLElement
+
+export function addEventListener(
+  element: HTMLElement | Document | EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions
+): void
+
+export function addEventListener(
+  element: HTMLElement | Document | EventTarget,
+  type: string | Record<string, unknown>
+): void
+
+export function removeEventListener(
+  element: HTMLElement | Document | EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions
+): void
+
+export function removeEventListener(
+  element: HTMLElement | Document | EventTarget,
+  type: string | Record<string, unknown>
+): void
+
+export function getAttribute(element: HTMLElement, name: string): string
+
+export function setAttribute(
+  element: HTMLElement,
+  name: string,
+  value: string
+): void
+
+export function setAttributes(
+  element: HTMLElement,
+  attributes: Record<string, unknown>
+): void
+
+export function addAttribute(
+  element: HTMLElement,
+  name: string,
+  value: string
+): void
+
+export function addClass(element: HTMLElement, className: string): void
+
+export function removeClass(element: HTMLElement, className: string): void
+
+export function hasClass(element: HTMLElement, className: string): boolean
+
+export type SetStyle = (
+  element: HTMLElement,
+  style: string | Record<string, unknown>,
+  overwrite?: boolean
+) => void
+
+export function setStyle(
+  element: HTMLElement,
+  style: string | Record<string, unknown>,
+  overwrite?: boolean
+): void
+
+export function toStyleMap(styleText: string): Record<string, string>
+
+export function noStyleSpace(text: string): string
+
+export function createSetStyle(styleText: string): SetStyle
+
+export function isUrl(text: string): boolean
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function throttle(func: Function, interval: number): Function
+
+export type MenuCallback = (event?: MouseEvent | KeyboardEvent) => void
+export function registerMenuCommand(
+  name: string,
+  callback: MenuCallback,
+  accessKey?: string
+): void
+
+export function extendHistoryApi(): void
+
+export const actionHref: string
+
+export function getOffsetPosition(
+  element: HTMLElement | undefined,
+  referElement?: HTMLElement | undefined
+): {
+  top: number
+  left: number
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function runOnce(key: string, func: Function): any

package/lib/index.js

@@ -0,0 +1,335 @@
+export const doc = document
+
+export const win = window
+
+export const uniq = (array) => [...new Set(array)]
+
+export const toCamelCase = function (text) {
+  return text.replace(/^([A-Z])|[\s-_](\w)/g, function (match, p1, p2) {
+    if (p2) return p2.toUpperCase()
+    return p1.toLowerCase()
+  })
+}
+
+export const $ = (selectors, element) =>
+  (element || doc).querySelector(selectors)
+export const $$ = (selectors, element) => [
+  ...(element || doc).querySelectorAll(selectors),
+]
+export const querySelector = $
+export const querySelectorAll = $$
+
+export const createElement = (tagName, attributes) =>
+  setAttributes(doc.createElement(tagName), attributes)
+
+export const addElement = (parentNode, tagName, attributes) => {
+  if (!parentNode) {
+    return
+  }
+
+  if (typeof parentNode === "string") {
+    attributes = tagName
+    tagName = parentNode
+    parentNode = doc.head
+  }
+
+  if (typeof tagName === "string") {
+    const element = createElement(tagName, attributes)
+    parentNode.append(element)
+    return element
+  }
+
+  // tagName: HTMLElement
+  setAttributes(tagName, attributes)
+  parentNode.append(tagName)
+  return tagName
+}
+
+export const addStyle = (styleText) => {
+  const element = createElement("style", { textContent: styleText })
+  doc.head.append(element)
+  return element
+}
+
+export const addEventListener = (element, type, listener, options) => {
+  if (!element) {
+    return
+  }
+
+  if (typeof type === "object") {
+    for (const type1 in type) {
+      if (Object.hasOwn(type, type1)) {
+        element.addEventListener(type1, type[type1])
+      }
+    }
+  } else if (typeof type === "string" && typeof listener === "function") {
+    element.addEventListener(type, listener, options)
+  }
+}
+
+export const removeEventListener = (element, type, listener, options) => {
+  if (!element) {
+    return
+  }
+
+  if (typeof type === "object") {
+    for (const type1 in type) {
+      if (Object.hasOwn(type, type1)) {
+        element.removeEventListener(type1, type[type1])
+      }
+    }
+  } else if (typeof type === "string" && typeof listener === "function") {
+    element.removeEventListener(type, listener, options)
+  }
+}
+
+export const getAttribute = (element, name) =>
+  element ? element.getAttribute(name) : null
+export const setAttribute = (element, name, value) =>
+  element ? element.setAttribute(name, value) : undefined
+
+export const setAttributes = (element, attributes) => {
+  if (element && attributes) {
+    for (const name in attributes) {
+      if (Object.hasOwn(attributes, name)) {
+        const value = attributes[name]
+        if (value === undefined) {
+          continue
+        }
+
+        if (/^(value|textContent|innerText|innerHTML)$/.test(name)) {
+          element[name] = value
+        } else if (name === "style") {
+          setStyle(element, value, true)
+        } else if (/on\w+/.test(name)) {
+          const type = name.slice(2)
+          addEventListener(element, type, value)
+        } else {
+          setAttribute(element, name, value)
+        }
+      }
+    }
+  }
+
+  return element
+}
+
+export const addAttribute = (element, name, value) => {
+  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, className) => {
+  if (!element || !element.classList) {
+    return
+  }
+
+  element.classList.add(className)
+}
+
+export const removeClass = (element, className) => {
+  if (!element || !element.classList) {
+    return
+  }
+
+  element.classList.remove(className)
+}
+
+export const hasClass = (element, className) => {
+  if (!element || !element.classList) {
+    return false
+  }
+
+  return element.classList.contains(className)
+}
+
+export const setStyle = (element, values, overwrite) => {
+  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[key] = values[key].replace("!important", "")
+    }
+  }
+}
+
+// convert `font-size: 12px; color: red` to `{"fontSize": "12px"; "color": "red"}`
+// eslint-disable-next-line no-unused-vars
+const toStyleKeyValues = (styleText) => {
+  const result = {}
+  const keyValues = styleText.split(/\s*;\s*/)
+  for (const keyValue of keyValues) {
+    const kv = keyValue.split(/\s*:\s*/)
+    // TODO: fix when key is such as -webkit-xxx
+    const key = toCamelCase(kv[0])
+    if (key) {
+      result[key] = kv[1]
+    }
+  }
+
+  return result
+}
+
+export const toStyleMap = (styleText) => {
+  styleText = noStyleSpace(styleText)
+  const map = {}
+  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 noStyleSpace = (text) => text.replace(/\s*([^\w-+%!])\s*/gm, "$1")
+
+export const createSetStyle = (styleText) => {
+  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)
+    }
+  }
+}
+
+export const isUrl = (text) => /^https?:\/\//.test(text)
+
+/**
+ *
+ * @param { function } func
+ * @param { number } interval
+ * @returns
+ */
+export const throttle = (func, interval) => {
+  let timeoutId = null
+  let next = false
+  const handler = (...args) => {
+    if (timeoutId) {
+      next = true
+    } else {
+      func.apply(this, args)
+      timeoutId = setTimeout(() => {
+        timeoutId = null
+        if (next) {
+          next = false
+          handler()
+        }
+      }, interval)
+    }
+  }
+
+  return handler
+}
+
+if (typeof Object.hasOwn !== "function") {
+  Object.hasOwn = (instance, prop) =>
+    Object.prototype.hasOwnProperty.call(instance, prop)
+}
+
+export const registerMenuCommand = () => undefined
+
+export const extendHistoryApi = () => {
+  // https://dirask.com/posts/JavaScript-on-location-changed-event-on-url-changed-event-DKeyZj
+  const pushState = history.pushState
+  const replaceState = history.replaceState
+
+  history.pushState = function () {
+    // eslint-disable-next-line prefer-rest-params
+    pushState.apply(history, arguments)
+    window.dispatchEvent(new Event("pushstate"))
+    window.dispatchEvent(new Event("locationchange"))
+  }
+
+  history.replaceState = function () {
+    // eslint-disable-next-line prefer-rest-params
+    replaceState.apply(history, arguments)
+    window.dispatchEvent(new Event("replacestate"))
+    window.dispatchEvent(new Event("locationchange"))
+  }
+
+  window.addEventListener("popstate", function () {
+    window.dispatchEvent(new Event("locationchange"))
+  })
+
+  // Usage example:
+  // window.addEventListener("locationchange", function () {
+  //   console.log("onlocationchange event occurred!")
+  // })
+}
+
+// eslint-disable-next-line no-script-url
+export const actionHref = "javascript:;"
+
+export const getOffsetPosition = (element, referElement) => {
+  const position = { top: 0, left: 0 }
+  referElement = referElement || doc.body
+
+  while (element && element !== referElement) {
+    position.top += element.offsetTop
+    position.left += element.offsetLeft
+    element = element.offsetParent
+  }
+
+  return position
+}
+
+const runOnceCache = {}
+export const runOnce = (key, func) => {
+  if (!key) {
+    return func()
+  }
+
+  if (Object.hasOwn(runOnceCache, key)) {
+    return runOnceCache[key]
+  }
+
+  const result = func()
+  runOnceCache[key] = result
+  return result
+}
+
+const cacheStore = {}
+const makeKey = (key: string | any[]) =>
+  Array.isArray(key) ? key.join(":") : key
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Cache = {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  get: (key: string | any[]) => cacheStore[makeKey(key)],
+  add(key: string | any[], value: any) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    cacheStore[makeKey(key)] = value
+  },
+}
+
+export const sleep = async (time: number) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(1)
+    }, time)
+  })
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "browser-extension-settings",
+  "version": "0.0.1",
+  "description": "Settings module for developing browser extensions and userscripts  ",
+  "type": "module",
+  "main": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "scripts": {
+    "p": "prettier --write .",
+    "lint": "prettier --write . && xo --fix",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/utags/browser-extension-settings.git"
+  },
+  "keywords": [
+    "extensions",
+    "userscripts",
+    "settings"
+  ],
+  "author": "Pipecraft",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/utags/browser-extension-settings/issues"
+  },
+  "homepage": "https://github.com/utags/browser-extension-settings#readme",
+  "devDependencies": {
+    "prettier": "^2.8.8",
+    "xo": "^0.54.2"
+  },
+  "files": [
+    "lib/",
+    "LICENSE",
+    "README.md"
+  ],
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
+  "xo": {
+    "space": 2,
+    "prettier": true,
+    "globals": [
+      "document"
+    ],
+    "rules": {
+      "prefer-destructuring": 0,
+      "capitalized-comments": 0
+    }
+  }
+}