browser-extension-utils 0.0.9 → 0.0.10

package/lib/index.d.ts

@@ -2,33 +2,62 @@ export function uniq(array: any[]): any[]
 
 export function toCamelCase(text: string): string
 
+export function $(selectors: string): HTMLElement
+
 export function $(
   element: HTMLElement | Document | string,
-  selectors?: string
+  selectors: string
 ): HTMLElement
 
+export function querySelector(selectors: string): HTMLElement
+
 export function querySelector(
   element: HTMLElement | Document | string,
-  selectors?: string
+  selectors: string
 ): HTMLElement
 
+export function $$(selectors: string): HTMLElement[]
+
 export function $$(
   element: HTMLElement | Document | string,
-  selectors?: string
+  selectors: string
 ): HTMLElement[]
 
+export function querySelectorAll(selectors: string): HTMLElement[]
+
 export function querySelectorAll(
   element: HTMLElement | Document | string,
-  selectors?: string
+  selectors: string
 ): HTMLElement[]
 
-export function createElement(tagName: string): 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,
+  attributes?: Record<string, unknown>
+): HTMLElement
+
+export function addStyle(styleText: string): HTMLElement
 
 export function addEventListener(
   element: HTMLElement | Document | EventTarget,
-  type: string | Record<string, unknown>,
-  listener?
-): void
+  type: string,
+  listener: Function
+): () => void
+
+export function addEventListener(
+  element: HTMLElement | Document | EventTarget,
+  type: string | Record<string, unknown>
+): () => void
 
 export function getAttribute(element: HTMLElement, name: string): string
 

package/lib/index.js

@@ -20,19 +20,65 @@ export const $$ = (element, selectors) =>
 export const querySelector = $
 export const querySelectorAll = $$
 
-export const createElement = doc.createElement.bind(doc)
+export const createElement = (tagName, attributes) => {
+  const element = doc.createElement(tagName)
+  if (attributes) {
+    for (const name in attributes) {
+      if (Object.hasOwn(attributes, name)) {
+        const value = attributes[name]
+        if (name === "textContent") {
+          element[name] = value
+        } else if (name === "style") {
+          setStyle(element, value)
+        } else {
+          setAttribute(element, name, value)
+        }
+      }
+    }
+  }
+
+  return element
+}
+
+export const addElement = (parentNode, tagName, attributes) => {
+  if (typeof parentNode === "string") {
+    attributes = tagName
+    tagName = parentNode
+    parentNode = doc.head
+  }
+
+  const element = createElement(tagName, attributes)
+  parentNode.append(element)
+  return element
+}
+
+export const addStyle = (styleText) => {
+  const element = createElement("style", { textContent: styleText })
+  doc.head.append(element)
+  return element
+}
 
-export const addEventListener = (element, type, listener) => {
+export const addEventListener = (element, type, listener, options) => {
   if (typeof type === "object") {
+    const removers = []
     for (const type1 in type) {
       if (Object.hasOwn(type, type1)) {
         element.addEventListener(type1, type[type1])
+        removers.push(() => element.removeEventListener(type1, type[type1]))
       }
     }
-  } else if (typeof type === "string" && typeof listener === "function") {
-    element.addEventListener(type, listener)
+
+    return () => {
+      for (const remover of removers) remover()
+    }
+  }
+
+  if (typeof type === "string" && typeof listener === "function") {
+    element.addEventListener(type, listener, options)
+    return () => {
+      element.removeEventListener(type, listener, options)
+    }
   }
-  // TODO: return remover function
 }
 
 export const getAttribute = (element, name) => element.getAttribute(name)
@@ -44,8 +90,8 @@ export const setStyle = (element, values, overwrite) => {
   const style = element.style
 
   if (typeof values === "string") {
-    style.cssText = overwrite? values : style.cssText + ";" +values
-    return;
+    style.cssText = overwrite ? values : style.cssText + ";" + values
+    return
   }
 
   if (overwrite) {

package/lib/userscript.js

@@ -0,0 +1,6 @@
+export * from "./index.js"
+
+// eslint-disable-next-line camelcase
+export const addElement = GM_addElement
+// eslint-disable-next-line camelcase
+export const addStyle = GM_addStyle

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "browser-extension-utils",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Utilities for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.js",
-  "exports": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./userscript": "./lib/userscript.js"
+  },
   "scripts": {
     "p": "prettier --write .",
     "lint": "prettier --write . && xo --fix",
@@ -41,6 +44,8 @@
     "space": 2,
     "prettier": true,
     "globals": [
+      "GM_addElement",
+      "GM_addStyle",
       "document"
     ],
     "rules": {