diff --git a/src/userscript.js b/src/userscript.js
index 75e7e90..b02fa6a 100644
--- a/src/userscript.js
+++ b/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(
+
+
+
+
+
+ );
+ }
+}
+
/**
* 入口函数
*/
@@ -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);
diff --git a/src/views/Action/index.js b/src/views/Action/index.js
new file mode 100644
index 0000000..c027557
--- /dev/null
+++ b/src/views/Action/index.js
@@ -0,0 +1,16 @@
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import AddIcon from "@mui/icons-material/Add";
+import ThemeProvider from "../../hooks/Theme";
+
+export default function Action() {
+ return (
+
+
+
+
+
+
+
+ );
+}