115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import React from "react";
|
|
import ReactDOM from "react-dom/client";
|
|
import Action from "./views/Action";
|
|
import createCache from "@emotion/cache";
|
|
import { CacheProvider } from "@emotion/react";
|
|
import { getSetting, getRules, matchRule, getFab } from "./libs";
|
|
import { Translator } from "./libs/translator";
|
|
import { trySyncAllSubRules } from "./libs/rules";
|
|
import { isGm } from "./libs/browser";
|
|
import { MSG_TRANS_TOGGLE, MSG_TRANS_PUTRULE } from "./config";
|
|
import { isIframe } from "./libs/iframe";
|
|
import { genEventName, handlePing, injectScript } from "./libs/gm";
|
|
|
|
/**
|
|
* 入口函数
|
|
*/
|
|
const init = async () => {
|
|
// 设置页面
|
|
if (
|
|
document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
|
|
document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
|
|
document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
|
|
) {
|
|
// unsafeWindow.GM = GM;
|
|
// unsafeWindow.APP_NAME = process.env.REACT_APP_NAME;
|
|
const ping = btoa(Math.random()).slice(3, 11);
|
|
window.addEventListener(ping, handlePing);
|
|
window.eval(`(${injectScript})("${ping}")`);
|
|
return;
|
|
}
|
|
|
|
// 翻译页面
|
|
const href = isIframe ? document.referrer : document.location.href;
|
|
const setting = await getSetting();
|
|
const rules = await getRules();
|
|
const rule = await matchRule(rules, href, setting);
|
|
const translator = new Translator(rule, setting);
|
|
|
|
if (isIframe) {
|
|
// iframe
|
|
window.addEventListener("message", (e) => {
|
|
const action = e?.data?.action;
|
|
switch (action) {
|
|
case MSG_TRANS_TOGGLE:
|
|
translator.toggle();
|
|
break;
|
|
case MSG_TRANS_PUTRULE:
|
|
translator.updateRule(e.data.args || {});
|
|
break;
|
|
default:
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 浮球按钮
|
|
const fab = await getFab();
|
|
const $action = document.createElement("div");
|
|
$action.setAttribute("id", "kiss-translator");
|
|
document.body.parentElement.appendChild($action);
|
|
const shadowContainer = $action.attachShadow({ mode: "closed" });
|
|
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 translator={translator} fab={fab} />
|
|
</CacheProvider>
|
|
</React.StrictMode>
|
|
);
|
|
|
|
// 注册菜单
|
|
if (isGm) {
|
|
try {
|
|
GM.registerMenuCommand(
|
|
"Toggle Translate",
|
|
(event) => {
|
|
translator.toggle();
|
|
},
|
|
"Q"
|
|
);
|
|
GM.registerMenuCommand(
|
|
"Toggle Style",
|
|
(event) => {
|
|
translator.toggleStyle();
|
|
},
|
|
"C"
|
|
);
|
|
} catch (err) {
|
|
console.log("[registerMenuCommand]", err);
|
|
}
|
|
}
|
|
|
|
// 同步订阅规则
|
|
trySyncAllSubRules(setting);
|
|
};
|
|
|
|
(async () => {
|
|
try {
|
|
await init();
|
|
} catch (err) {
|
|
const $err = document.createElement("div");
|
|
$err.innerText = `KISS-Translator: ${err.message}`;
|
|
$err.style.cssText = "background:red; color:#fff; z-index:10000;";
|
|
document.body.prepend($err);
|
|
}
|
|
})();
|