browser-extension-utils 0.0.15 → 0.1.1

package/lib/index.d.ts

@@ -1,34 +1,28 @@
+export const doc: Document
+
 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
-): HTMLElement
-
-export function querySelector(selectors: string): HTMLElement
+  selectors: string,
+  element?: HTMLElement | Document
+): Element | undefined
 
 export function querySelector(
-  element: HTMLElement | Document | string,
-  selectors: string
-): HTMLElement
-
-export function $$(selectors: string): HTMLElement[]
+  selectors: string,
+  element?: HTMLElement | Document
+): Element | undefined
 
 export function $$(
-  element: HTMLElement | Document | string,
-  selectors: string
-): HTMLElement[]
-
-export function querySelectorAll(selectors: string): HTMLElement[]
+  selectors: string,
+  element?: HTMLElement | Document
+): Element[]
 
 export function querySelectorAll(
-  element: HTMLElement | Document | string,
-  selectors: string
-): HTMLElement[]
+  selectors: string,
+  element?: HTMLElement | Document
+): Element[]
 
 export function createElement(
   tagName: string,
@@ -85,6 +79,12 @@ export function setAttributes(
   attributes: Record<string, unknown>
 ): void
 
+export function addAttribute(
+  element: HTMLElement,
+  name: string,
+  value: string
+): void
+
 export type SetStyle = (
   element: HTMLElement,
   style: string | Record<string, unknown>,
@@ -105,9 +105,13 @@ export function createSetStyle(styleText: string): SetStyle
 
 export function isUrl(text: string): boolean
 
+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

package/lib/index.js

@@ -1,4 +1,4 @@
-const doc = document
+export const doc = document
 
 export const uniq = (array) => [...new Set(array)]
 
@@ -9,14 +9,11 @@ export const toCamelCase = function (text) {
   })
 }
 
-export const $ = (element, selectors) =>
-  element && typeof element === "object"
-    ? element.querySelector(selectors)
-    : doc.querySelector(element)
-export const $$ = (element, selectors) =>
-  element && typeof element === "object"
-    ? [...element.querySelectorAll(selectors)]
-    : [...doc.querySelectorAll(element)]
+export const $ = (selectors, element) =>
+  (element || doc).querySelector(selectors)
+export const $$ = (selectors, element) => [
+  ...(element || doc).querySelectorAll(selectors),
+]
 export const querySelector = $
 export const querySelectorAll = $$
 
@@ -115,6 +112,15 @@ export const setAttributes = (element, attributes) => {
   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 setStyle = (element, values, overwrite) => {
   if (!element) {
     return
@@ -186,9 +192,65 @@ export const createSetStyle = (styleText) => {
 
 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!")
+  // })
+}

package/lib/userscript.js

@@ -1,4 +1,9 @@
-import { setAttributes } from "./index.js"
+import {
+  doc,
+  setAttributes,
+  addElement as _addElement,
+  addStyle as _addStyle,
+} from "./index.js"
 
 export * from "./index.js"
 
@@ -15,23 +20,50 @@ process.env.PLASMO_TAG === "dev" &&
     }
   })()
 
-/* 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
-  }
+/* eslint-disable new-cap, camelcase */
+export const addElement =
+  typeof GM_addElement === "function"
+    ? (parentNode, tagName, attributes) => {
+        if (!parentNode) {
+          return
+        }
 
-  // tagName: HTMLElement
-  setAttributes(tagName, attributes)
-  parentNode.append(tagName)
-  return tagName
-}
+        if (typeof parentNode === "string") {
+          attributes = tagName
+          tagName = parentNode
+          parentNode = doc.head
+        }
 
-export const addStyle = (styleText) => GM_addStyle(styleText)
+        if (typeof tagName === "string") {
+          const element = GM_addElement(tagName)
+          setAttributes(element, attributes)
+          parentNode.append(element)
+          return element
+        }
+
+        // tagName: HTMLElement
+        setAttributes(tagName, attributes)
+        parentNode.append(tagName)
+        return tagName
+      }
+    : _addElement
+
+export const addStyle =
+  typeof GM_addStyle === "function"
+    ? (styleText) => GM_addStyle(styleText)
+    : _addStyle
 
 // Only register menu on top frame
-export const registerMenuCommand = (name, callback, accessKey) =>
-  window === top && GM_registerMenuCommand(name, callback, accessKey)
-/* eslint-enable new-cap */
+export const registerMenuCommand = (name, callback, accessKey) => {
+  if (window !== top) {
+    return
+  }
+
+  if (typeof GM.registerMenuCommand !== "function") {
+    console.warn("Do not support GM.registerMenuCommand!")
+    return
+  }
+
+  GM.registerMenuCommand(name, callback, accessKey)
+}
+/* eslint-enable new-cap, camelcase */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-utils",
-  "version": "0.0.15",
+  "version": "0.1.1",
   "description": "Utilities for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.js",
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/PipecraftNet/browser-extension-utils#readme",
   "devDependencies": {
-    "prettier": "^2.8.7",
-    "xo": "^0.53.1"
+    "prettier": "^2.8.8",
+    "xo": "^0.54.2"
   },
   "files": [
     "lib/",
@@ -44,9 +44,11 @@
     "space": 2,
     "prettier": true,
     "globals": [
+      "GM",
       "GM_addElement",
       "GM_addStyle",
       "GM_registerMenuCommand",
+      "history",
       "window",
       "top",
       "document"