refactor: addElement, addStyle; remove GM_addStyle

utags · Aug 5, 2023 · e945c29 · e945c29
1 parent d0a99b9
commit e945c29
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -26,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") {
@@ -54,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
 }
 

diff --git a/lib/userscript.js b/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) => {