browser-extension-utils 0.1.13 → 0.1.15

package/lib/index.js

@@ -4,6 +4,13 @@ export const win = window
 
 export const uniq = (array) => [...new Set(array)]
 
+// Polyfill for String.prototype.replaceAll()
+// eslint-disable-next-line no-use-extend-native/no-use-extend-native
+if (typeof String.prototype.replaceAll !== "function") {
+  // eslint-disable-next-line no-use-extend-native/no-use-extend-native, no-extend-native
+  String.prototype.replaceAll = String.prototype.replace
+}
+
 export const toCamelCase = function (text) {
   return text.replaceAll(/^([A-Z])|[\s-_](\w)/g, function (match, p1, p2) {
     if (p2) return p2.toUpperCase()
@@ -19,18 +26,29 @@ export const $$ = (selectors, element) => [
 export const querySelector = $
 export const querySelectorAll = $$
 
+export const getRootElement = (type) =>
+  type === 1
+    ? doc.head || doc.body || doc.documentElement
+    : type === 2
+    ? doc.body || doc.documentElement
+    : doc.documentElement
+
 export const createElement = (tagName, attributes) =>
   setAttributes(doc.createElement(tagName), attributes)
 
 export const addElement = (parentNode, tagName, attributes) => {
-  if (!parentNode) {
+  if (typeof parentNode === "string") {
+    return addElement(null, parentNode, tagName)
+  }
+
+  if (!tagName) {
     return
   }
 
-  if (typeof parentNode === "string") {
-    attributes = tagName
-    tagName = parentNode
-    parentNode = doc.head
+  if (!parentNode) {
+    parentNode = /^(script|link|style|meta)$/.test(tagName)
+      ? getRootElement(1)
+      : getRootElement(2)
   }
 
   if (typeof tagName === "string") {
@@ -47,7 +65,7 @@ export const addElement = (parentNode, tagName, attributes) => {
 
 export const addStyle = (styleText) => {
   const element = createElement("style", { textContent: styleText })
-  doc.head.append(element)
+  getRootElement(1).append(element)
   return element
 }
 
@@ -251,6 +269,7 @@ export const throttle = (func, interval) => {
   return handler
 }
 
+// Polyfill for Object.hasOwn()
 if (typeof Object.hasOwn !== "function") {
   Object.hasOwn = (instance, prop) =>
     Object.prototype.hasOwnProperty.call(instance, prop)

package/lib/userscript.js

@@ -1,8 +1,7 @@
 import {
-  doc,
+  getRootElement,
   setAttributes,
   addElement as _addElement,
-  addStyle as _addStyle,
 } from "./index.js"
 
 export * from "./index.js"
@@ -24,19 +23,39 @@ process.env.PLASMO_TAG === "dev" &&
 export const addElement =
   typeof GM_addElement === "function"
     ? (parentNode, tagName, attributes) => {
-        if (!parentNode) {
+        if (typeof parentNode === "string") {
+          return addElement(null, parentNode, tagName)
+        }
+
+        if (!tagName) {
           return
         }
 
-        if (typeof parentNode === "string") {
-          attributes = tagName
-          tagName = parentNode
-          parentNode = doc.head
+        if (!parentNode) {
+          parentNode = /^(script|link|style|meta)$/.test(tagName)
+            ? getRootElement(1)
+            : getRootElement(2)
         }
 
         if (typeof tagName === "string") {
-          const element = GM_addElement(tagName)
-          setAttributes(element, attributes)
+          let attributes2
+          if (attributes) {
+            const entries1 = []
+            const entries2 = []
+            for (const entry of Object.entries(attributes)) {
+              if (/^(on\w+|innerHTML)$/.test(entry[0])) {
+                entries2.push(entry)
+              } else {
+                entries1.push(entry)
+              }
+            }
+
+            attributes = Object.fromEntries(entries1)
+            attributes2 = Object.fromEntries(entries2)
+          }
+
+          const element = GM_addElement(null, tagName, attributes)
+          setAttributes(element, attributes2)
           parentNode.append(element)
           return element
         }
@@ -48,10 +67,8 @@ export const addElement =
       }
     : _addElement
 
-export const addStyle =
-  typeof GM_addStyle === "function"
-    ? (styleText) => GM_addStyle(styleText)
-    : _addStyle
+export const addStyle = (styleText) =>
+  addElement(null, "style", { textContent: styleText })
 
 // Only register menu on top frame
 export const registerMenuCommand = (name, callback, accessKey) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension-utils",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Utilities for developing browser extensions and userscripts",
   "type": "module",
   "main": "./lib/index.js",