userscript...

src/userscript.js

@@ -1,6 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import Options from "./views/Options";
+import Action from "./views/Action";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 
 import { browser } from "./libs/browser";
 import {
@@ -13,6 +16,33 @@ import { getSetting } from "./libs";
 import { transPool } from "./libs/pool";
 import { Translator } from "./libs/translator";
 
+/**
+ * 自定义元素
+ */
+class ActionElement extends HTMLElement {
+  connectedCallback() {
+    const shadowContainer = this.attachShadow({ mode: "open" });
+    const emotionRoot = document.createElement("style");
+    const shadowRootElement = document.createElement("div");
+    shadowContainer.appendChild(emotionRoot);
+    shadowContainer.appendChild(shadowRootElement);
+
+    const cache = createCache({
+      key: "css",
+      prepend: true,
+      container: emotionRoot,
+    });
+
+    ReactDOM.createRoot(shadowRootElement).render(
+      <React.StrictMode>
+        <CacheProvider value={cache}>
+          <Action />
+        </CacheProvider>
+      </React.StrictMode>
+    );
+  }
+}
+
 /**
  * 入口函数
  */
@@ -28,9 +58,15 @@ import { Translator } from "./libs/translator";
     return;
   }
 
+  // 插入按钮
+  const actionName = "kiss-action";
+  customElements.define(actionName, ActionElement);
+  const $action = document.createElement(actionName);
+  document.body.parentElement.appendChild($action);
+
+  // 翻译页面
   const { fetchInterval, fetchLimit } = await getSetting();
   transPool.update(fetchInterval, fetchLimit);
-
   const rules = await getRules();
   const rule = matchRule(rules, document.location.href);
   const translator = new Translator(rule);