browser-extension-utils 0.0.13 → 0.0.15

package/lib/index.d.ts

@@ -42,7 +42,7 @@ export function addElement(
 
 export function addElement(
   parentNode: HTMLElement,
-  tagName: string,
+  tagName: string | HTMLElement,
   attributes?: Record<string, unknown>
 ): HTMLElement
 
@@ -53,12 +53,24 @@ export function addEventListener(
   type: string,
   listener: EventListenerOrEventListenerObject,
   options?: boolean | AddEventListenerOptions
-): () => void
+): void
 
 export function addEventListener(
   element: HTMLElement | Document | EventTarget,
   type: string | Record<string, unknown>
-): () => void
+): 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
 
@@ -68,6 +80,11 @@ export function setAttribute(
   value: string
 ): void
 
+export function setAttributes(
+  element: HTMLElement,
+  attributes: Record<string, unknown>
+): void
+
 export type SetStyle = (
   element: HTMLElement,
   style: string | Record<string, unknown>,
@@ -87,3 +104,10 @@ export function noStyleSpace(text: string): string
 export function createSetStyle(styleText: string): SetStyle
 
 export function isUrl(text: string): boolean
+
+export type MenuCallback = (event?: MouseEvent | KeyboardEvent) => void
+export function registerMenuCommand(
+  name: string,
+  callback: MenuCallback,
+  accessKey?: string
+): void

package/lib/index.js

@@ -20,25 +20,8 @@ export const $$ = (element, selectors) =>
 export const querySelector = $
 export const querySelectorAll = $$
 
-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 createElement = (tagName, attributes) =>
+  setAttributes(doc.createElement(tagName), attributes)
 
 export const addElement = (parentNode, tagName, attributes) => {
   if (!parentNode) {
@@ -51,9 +34,16 @@ export const addElement = (parentNode, tagName, attributes) => {
     parentNode = doc.head
   }
 
-  const element = createElement(tagName, attributes)
-  parentNode.append(element)
-  return element
+  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) => {
@@ -64,28 +54,33 @@ export const addStyle = (styleText) => {
 
 export const addEventListener = (element, type, listener, options) => {
   if (!element) {
-    return () => 0
+    return
   }
 
   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, options)
+  }
+}
 
-    return () => {
-      for (const remover of removers) remover()
-    }
+export const removeEventListener = (element, type, listener, options) => {
+  if (!element) {
+    return
   }
 
-  if (typeof type === "string" && typeof listener === "function") {
-    element.addEventListener(type, listener, options)
-    return () => {
-      element.removeEventListener(type, listener, options)
+  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)
   }
 }
 
@@ -94,6 +89,32 @@ export const getAttribute = (element, name) =>
 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 setStyle = (element, values, overwrite) => {
   if (!element) {
     return
@@ -148,7 +169,7 @@ export const toStyleMap = (styleText) => {
   return map
 }
 
-export const noStyleSpace = (text) => text.replace(/\s*([^\w-!])\s*/gm, "$1")
+export const noStyleSpace = (text) => text.replace(/\s*([^\w-+%!])\s*/gm, "$1")
 
 export const createSetStyle = (styleText) => {
   const styleMap = toStyleMap(styleText)
@@ -169,3 +190,5 @@ if (typeof Object.hasOwn !== "function") {
   Object.hasOwn = (instance, prop) =>
     Object.prototype.hasOwnProperty.call(instance, prop)
 }
+
+export const registerMenuCommand = () => undefined

package/lib/userscript.js

@@ -1,21 +1,37 @@
+import { setAttributes } from "./index.js"
+
 export * from "./index.js"
-/* eslint-disable camelcase, new-cap */
+
 // eslint-disable-next-line no-unused-expressions, n/prefer-global/process
 process.env.PLASMO_TAG === "dev" &&
   (() => {
-    if (
-      typeof GM_addElement !== "function" &&
-      typeof document.GM_addElement === "function"
-    ) {
-      // eslint-disable-next-line no-global-assign
-      GM_addElement = document.GM_addElement
-      // eslint-disable-next-line no-global-assign
-      GM_addStyle = document.GM_addStyle
+    const functions = document.GMFunctions
+    if (typeof functions === "object") {
+      for (const key in functions) {
+        if (Object.hasOwn(functions, key)) {
+          window[key] = functions[key]
+        }
+      }
     }
   })()
 
-export const addElement = (parentNode, tagName, attributes) =>
-  GM_addElement(parentNode, tagName, attributes)
+/* eslint-disable new-cap */
+export const addElement = (parentNode, tagName, attributes) => {
+  if (typeof parentNode === "string" || typeof tagName === "string") {
+    const element = GM_addElement(parentNode, tagName, attributes)
+    setAttributes(element, attributes)
+    return element
+  }
+
+  // tagName: HTMLElement
+  setAttributes(tagName, attributes)
+  parentNode.append(tagName)
+  return tagName
+}
 
 export const addStyle = (styleText) => GM_addStyle(styleText)
-/* eslint-enable camelcase, new-cap */
+
+// Only register menu on top frame
+export const registerMenuCommand = (name, callback, accessKey) =>
+  window === top && GM_registerMenuCommand(name, callback, accessKey)
+/* eslint-enable new-cap */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-utils",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Utilities for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.js",
@@ -46,6 +46,9 @@
     "globals": [
       "GM_addElement",
       "GM_addStyle",
+      "GM_registerMenuCommand",
+      "window",
+      "top",
       "document"
     ],
     "rules": {